CODEWITHSUNDEEP
htmlcssinternet-explorer
GuerillaRadio
GuerillaRadio

Reputation: 1297

Hacks to make IE display like every other browser

I've been working on a PHP project for University, and as I'm rubbish at PHP I've left the design very simple so I can concentrate on the programming side of things. Now the programming is working I'm working on the design. The site looks fine in Chrome and other webkit browsers but in IE9 it looks awful. The main problems are...

1 - Background image expands the div to the full image size, whereas in webkit is only fills the div size.

2 - Content is not centred, instead it is floated left.

Does anyone know any scripts/hacks I can use to get IE to perform like every other browser? The only thing I'm using at the minute is Modernizr.

You can have a look at the site here if it helps - http://newmedia.leeds.ac.uk/ug10/cs10cwh/pod/index.php.

Upvotes: 2

Views: 2667

Answers (2)

Jeroen
Jeroen

Reputation: 63719

Modernizr can help, especially if you're using newer things like html5 and css3. Another thing that can help is boilerplate code, I personally like the html5reset.

One particular thing from that is going to help you a lot: if I look at your site in IE it says it goes into Quirks mode, making IE7, 8, and 9 behave... well... quirky :) Place the following meta tag in your head section to improve things for IE:

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

You can see what "Browser Mode" and "Document Mode" IE is running in by bringing up the developer toolbar (F12), you can tweak it temporarily for your browsing session to see what happens if document mode is "IE9 standards".

A short update. You may also want to try using w3 validator. One of the errors it gives me for your site:

Line 1, Column 15: Comments seen before doctype. Internet Explorer will 
go into the quirks mode.

There are also a few errors on unclosed tags, which can throw off rendering.

Upvotes: 4

Johannes Klau&#223;
Johannes Klau&#223;

Reputation: 11020

What we do is using a seperate .css for the IE versions and in the root we determine the browser and include that .css

So include your normal css for all browsers and for the IE versions include the specific .css file which overwrites the necessary party of the main stylesheet.

Edit: And like Jeroen said, force the IE to render in it's real mode, not some compatible or quirks thing.

Upvotes: 2

Related Questions