CODEWITHSUNDEEP
htmlcssinternet-explorerwordpresssyntax-error
LightningWrist
LightningWrist

Reputation: 937

IE structural problems

I have just made a very simple static side via wordpress. However, I made the theme from scratch with html and css. It looks perfect and exactly how I want in FFox,Chrome,Safari etc...but upon inspection in IE 6,7,8 is is not right.

Click {here} to see the site and if you don't have IE... Here is a screen shot of how it is rendering in there.

alt text

Any idea on what this may be or an idea on how to fix it would be greatly appreciated. I can't find any syntax errors in my css and the html seems right

Thanks

Upvotes: 0

Views: 68

Answers (3)

Sotiris
Sotiris

Reputation: 40066

In your document you don't set a DOCTYPE, so ie is forced to show it in quirks mode. You have to add the DOCTYPE in the start of your html code. You can find more information about DOCTYPE at http://www.w3.org/QA/2002/04/valid-dtd-list.html

Also you can find more information about quirks mode at http://www.quirksmode.org/

As last note, it's always valuable to validate your webpages using 3w validator. Doing this with your website, you can see that you get :

93 Errors, 15 warning(s)

and the first of all in the list is the following:

No DOCTYPE found! Checking with default XHTML 1.0 Transitional Document Type.

No DOCTYPE Declaration could be found or recognized in this document. This generally means that the document is not declaring its Document Type at the top. It can also mean that the DOCTYPE declaration contains a spelling error, or that it is not using the correct syntax.

The document was checked using a default "fallback" Document Type Definition that closely resembles “XHTML 1.0 Transitional”.

Learn how to add a doctype to your document from our FAQ.

Hope all the above information you be helpful understanding what happens with ie.

Upvotes: 3

ebolyen
ebolyen

Reputation: 966

There is usually a way to have a website render in all browsers correctly without using an IE template, but it takes a bit of work.

Try adding margin-left: auto; and margin-right: auto; and/or width:100% to your body.

Also it is good practice to wrap things that need to exist on the same y-axis, such as your tab and content in a div so that they can move together.

Upvotes: 1

Jakub
Jakub

Reputation: 20475

Well for one, not sure how new you are to CSS/HTML development, but this is NEVER a surprise that you create content in one browser only to have IE puke and choke and display something differently. Its one of the crutches that web designers / developers have to carry when making projects.

You make it right, then you mod a stylesheet to be IE approved.

You need to use conditional comments to attach those IE only sheets, and you might even have to do it for IE6 / 7 / 8 seperately, depending on what you did and how it breaks the look.

http://www.quirksmode.org/css/condcom.html

Example of this usage in the <head>:

<!--[if IE 6]>
<link rel="stylesheet" href="ie6-fixes.css" />
<![endif]-->

You would of course have your 'default' style sheet BEFORE the ie one, and the ie.css would overwrite the initially defined styles.

Only correct way to go about it.

Upvotes: 1

Related Questions