Help Please! CSS + IE = Not Displaying Correctly!

[philosiraptor]

I am attempting to do some aesthetic redesign to my company's existing website. I have gotten rid of the image based menu bar (above the header banner) and replaced it with CSS, and also added a container on the right side using CSS. These elements validate (as far as I can tell) however when I open them in Internet Explorer 5+ the menu bar stacks at full width and the container, well, I'm not sure how exactly to explain what the container is doing. I believe this has something to do with IE being unable to understand the specific width properties of images within CSS, however I am not sure how to fix it! I know my code is not super pretty, and I realize that my CSS could use some help, honestly I cobbled it together using borrowed code and the CSS editor in Kompozer, we all have to start somewhere, right?

Here is the URL for one of the test pages www dot telepress dot com / testsite / sustain.html

tl;dr Neither of the CSS elements on this test page are behaving properly in IE, they seem to work perfectly in other browsers!

[contrary mary]

Yes, we all need to start somewhere. :-)

Your CSS validates, but your HTML does not. I'm not sure what the problem is exactly, but I can tell you that it will probably be fixed, or at least be a lot easier to troubleshoot, if you get rid of the table-based design. Also, divs aren't allowed in tables, only spans. If you learn the difference between inline and block elements then you will understand why. Then you can use block elements instead of <br>.

I'm afraid you probably aren't going to get a quick fix for this. Using tables for your layout creates all sorts of unpredictable problems like this one and they are very strongly discouraged, so you really need to go back to the drawing board and make a layout without tables. Hope that helps, at least.