1 reply [Last post]
bdodge's picture
San Diego
Last seen: 14 years 13 weeks ago
San Diego
Timezone: GMT-7
Joined: 2006-10-25
Posts: 1
Points: 0

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.

Hugo's picture
Last seen: 6 years 2 weeks ago
Joined: 2004-06-06
Posts: 15668
Points: 2806

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.


Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me