CSS Layout Problem

Question

Here's my page

It looks correct in Firefox, but of course in Internet Explorer, there's an issue.

The main body of the page is not displaying correctly. The left and right divs are not showing the white background that I'm trying to get them to.

Answer 1

Try separating your shortcut for background in your #left id in css. IE may not be parsing it correctly.

The #right div looks OK (I'm using IE7).

Answer 2

Your HTML appears to be broken. For example <div id="mainbody" is not closed. Run it through a validator and fix all the markup problems.

Answer 3

You need to change <div id="mainbody" to <div id="mainbody"> as i told you earlier.

Answer 4

Use the W3C validator: [Invalid] Markup Validation of modastudio.com/docs_new/bostondentalposters.shtml - W3C Markup Validator.

You've got a bad doctype that will throw IE into quirks mode, as well as missing tags, double charset calls (that should be UTF instead of 8859), duplicated meta tags, etc.....

Answer 5

You're also nesting tables and lists inside of paragraph tags which is invalid markup for the doctype you're using. A handful of the meta tags are not closed correctly along with capitalization of attributes which are also not allowed with the selected doctype. The stylesheet link tag is not closed correctly. The images tags in the table are not close correctly nor are the break tags.

Fix the html errors first and then see where you're at with your layout.

Good luck and hope this helps some.

Answer 6

Maybe not really an answer to your question, but since you seem to develop in Firefox, you might want to try the HTML Validator extension. Makes this kind of development a lot easier.