This is my first post there, so be gentle.
I have an website with a php/mysql back end that generates educational websites for teachers. There's a longstanding problem that appears only in IE on Windows. Things look fine in Firefox (Win or Mac) and Safari.
Here's a sample page: http://webquest.sdsu.edu/test01.html
Normally the stylesheet is in an external file but I've made it internal to the code for this page just to make it easier to see.
The problem occurs when something is too wide to fit in the content container. It could be an image or, more often, a table like the one in this sample. In IE, there is a blank space and then the offending element appears below the level of the last text in the navigation bar.
Again, this doesn't happen in Safari or Firefox.
I know I've got some validation errors but don't think they're related to this problem.
Does anyone have a suggestion on how to fix this? I'm all ears and eager to learn. Thanks.
Widths on elements following
Widths on elements following floats = problems. Try firstly adding a wrapper div to hold all the elements and set that to your fixed width with margin:0 auto; to center entire layout (if so desired , wrapping all elements always a good idea though). Remove width on banner and margin. Remove width on #content and reduce margin left to ~180px, no padding or margins other than the top padding and left margin. Reduce #navigation to ~170px width and add display:inline to cure IE double margin bug.
See how that stacks up.