Michael, Looking good. Forgive the long rave here...
1. There are still validation issues with your page. There are XHTML breaks instead of HTML breaks. So, <br /> should be <br>, and the same for metadata - remove the end backslash, as this is causing items below to show up as invalid. http://validator.w3.org/check?uri=http://afpwebworks.com/beach/index.cfm 2. The thumbnail images do not have a width or height. This is an issue for two reasons (and feel free to disagree/abuse me here): a. Some browsers do not allocate space for the image and so they will not move on to redraw the page while the image is loading. You can sometimes get funny rendering issues till the page is loaded. Unless it is dynamic, it may be better to put width and height attributes into the image elements. b. If the user has images turned off (as I did when I first hit your page) and there is no width or height allocated for the image, the alt tag is used to define the width and height of the image - meaning that the entire page breaks in Win/IE5, 5.5 and 6 (plus possibly other browsers). 3. It may be worth adding some sort of image replacement heading in the top of the document as there is no heading on the page - the "Holiday at Tabourie is only accessible via the image - bad for accessibility reasons - Google and screen readers have no info on what the page is about. As Mark Stanton keeps telling us, the h1 - h6 are used by Google a lot so it is always worthwhile. You could replace the header with an <h1>, and choose your favourite image replacement option from here: http://www.mezzoblue.com/tests/revised-image-replacement/ 4. To get around the mystery gap in Win/IE5, 5.5 and 6 add a simple declaration to ".strip" which will close up the gap completely. .strip { font-size: 1px; } Why does this work? Win/IE5, 5.5 and 6 add a carriage return inside divs. It is not noticeable unless the div is very small - like your strip div (anything under about 13px high). By setting the font size to 1px the carriage return becomes tiny and the gap disappears. Gotta love IE! I wrote an article on this a while ago. It explains the issue, but it does not include the 1px solution (I'll amend the article soon): http://www.maxdesign.com.au/presentation/mystery/ HTH Russ > > Michael - > > Looks like a case of the mystery white space, where IE adds about 4 > pixels of whitespace to a div. I've had the same problem. When is a > pixel not a pixel? When you see it in IE.... > > Why don't you add the strip bg images to the red bg image and have one > div instead of three? > > HTH > James > > > Michael Kear wrote: > >> G'day Russ, >> >> Thanks a lot for the help. >> >> I've done what you suggest and it's looking much better. I don't >> understand why in IE6 the bars at the top don't touch, while they do in NN7 >> and Opera7. >> >> If yo have a look at http://afpwebworks.com/beach/index.cfm in IE, you can >> see the top grey bar doesn't touch the red pattern, while the bottom one >> does. But in NN and Opera they touch, how they're supposed to. >> >> (The images in the footer are done with an include from the rest of the site >> so that's why they're done differently.) >> >> Cheers >> Mike Kear >> >> >> ***************************************************** The discussion list for http://webstandardsgroup.org/ *****************************************************
