I am having problems with pages displaying differently in different browsers. I have validated both my HTML XHTML 1.0 Transitional and CSS. The CSS finds four errors that are included in CSS 3 but not CSS 2.1; however I don’t know how to specify CSS 3. None of these errors have anything to do with the display problems I’m having.
The pages display perfectly in Firefox 3 and Opera. Safari 4 and IE 5.2 (Mac) and 6 are having severe problems. In Safari the best I can figure is the floats are not clearing so the footer rides up to right under the header ignoring the main div. I have attached screen shots. Safari-1 and Safari-2 illustrate the problem. The second page floats the footer and thumbnails under the text box so the links cannot be accessed. IE 5 for Mac displays almost correctly with the footer only slightly overlapping the main text area. I don’t even know where to start with IE 6. Only a small part of the page shows, cropping off most of the index list. See IE-1 and IE-2.
So I’m starting to go crazy here and have run out of troubleshooting ideas. I have a CSS reset statement at the top of my CSS file. I have recoded the page/CSS many times. The thing that is sending me over the edge is that a third page loads fine with the floats stopping at the bottom of the text box on both browsers and essentially it is the same code in all cases.
Is there anyone out there who can help me to figure out why Safari and IE 6 are not loading the page correctly. I have found a lot of IE hacks but nothing for Safari. About 10% of her visitors use Safari. I really need to figure this out but have hit a brick wall.