Christopher Blake wrote: >>> Please help, I am clueless as to why it isn't working. Also I hate >>> the fact that if I >>> try things I do not know whether they have worked - I will >>> upgrading to intel-mac soon >>> and run parallels and windows as soon as I have the money!
Since money is an issue (and I hear you on that one) you can use the following free service to help: <http://browsershots.org/> It's not ideal, but definitely better than nothing. There is also browsercam.com but it isn't free. > I have heard that things are looking ok in firefox and IE7. However > browser shots tell a different story in IE6. > > First 2 pages I looked at: > > http://www.3pointdesign.com/websites.html Your problem is partly due to the fact that you haven't overridden the default border on links (hence the blue line around each image in IE). You have set the width of each of the divs (.web_left,web_middle,web_right) to be exactly the same as the image width, but with the additional border it allows the text to float up next to the image, causing the mess in the provided screen shots. I wont go into detail, but you have a little but of *divitus* going on. Change all the instances of <div class="web_row2"> to <div class="web_row"> and use that as the wrapper around each of your screen shot rows. There's no need for the additional class and it doesn't change the appearance in FF or Opera (at least not locally). Next, insert a break before each text link to force the text onto its own line, and remove the clearing div just before the end of each .web_row div. It's not required, and this is also what's causing the right column drop in your second example. Something like: <div class="web_row"> <div class="web_left"><a href="http://3pointdesign.com/two/"; title="3 Point Design (V.1)" rel="gb_page_fs[]"><img src="/images/web_pics/page2_0_1.png" alt="3 Point website - version one" /> <br />3 Point Design (V. 1)</a></div> <div class="web_middle"><a href="http://www.neilparishmep.org.uk/"; title="Neil parish MEP" rel="gb_page_fs[]"><img src="/images/web_pics/page2_1_1.png" alt="Neil Parish MEP website" /> <br />Neil parish MEP</a></div> <div class="web_right"><a href="http://www.allsetts.co.uk/"; title="Allsets Farm" rel="gb_page_fs[]"><img src="/images/web_pics/page2_2_1.png" alt="Allsets Farm website" /> <br />Allsets Farm</a></div> </div> And in your css: .web_row { padding-bottom: 15px;/*provides a small gap between each row now that there is no clearer*/ overflow: auto; zoom: 1;/*gives IE layout and allows padding-bottom to show inside floated parent div*/ } .web_row img { margin: 0; padding: 0; border: 0;/*kill the border around the image screenshots*/ } Here is a local screen shot of IE6 running on Win2k. <http://www.cwc.co.nz/sandbox/chris-blake/screenshot-ie6-opt.jpg> ...and a live link, though I know you can't view it! <http://www.cwc.co.nz/sandbox/chris-blake/websites.html> > http://www.3pointdesign.com/stuff/index2_IE6.png > > The right hand column has disappeared here too!! See above. A description of the png issue in IE and its flaws can be found here: <http://www.satzansatz.de/cssd/tmp/alphatransparency.html> A workable solution: http://www.howtocreate.co.uk/alpha.html However, I would say that your use of pngs in this case is, in my opinion, not an appropriate one (given the file size of these screen shots and the comparable result in jpg format). Using Fireworks 8 I can get your 40kb + pngs easily down to less than 15kb (in every case) without any significant decrease in quality and this would be my preferred solution. And finally, don't use underscores in your class and ID names: http://devedge-temp.mozilla.org/viewsource/2001/css-underscores/ HTH Mark ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
