How to: Get around Internet explorer's rendering bugs - Overclock.net

sniperscope · 09-08-06

Theres a handy little trick I use to get around irritating IE issues.

Use:

Code:

html>body *tag you want to use, e.g. div.leftbar* {}

so, for example it would be like:

Code:

html>body div.leftbar {  padding: 0;
                         margin: 0 auto;
                         text-align: left;
}

This code is handy because IE cannot see or execute the CSS code that is declared after html>body, but any other modern browser, E.G. Firefox, Opera and Safari can see and execute the code. Therefore, you put the code that you want IE to execute in normal CSS layout, but code that you only want modern browsers to execute after the html>body declaration (because IE would mess it up otherwise). Heres a common example:

IE likes to add a 3px margin to images sometimes. To get around this problem, we can use this trick. Heres how:

Code:

/* Give the image a class. For this example, we'll use img.ocnlogo. */

img.ocnlogo { margin: -3px: /* <--- This is the code to get rid of the 3px margin around the image in IE. IE will execute this accordingly. */
}

html>body img.ocnlogo{
                         margin: 0;
}

Basically all we are doing is declaring what we want IE to do in the normal CSS code. However, since other browsers do not add the 3px margin like IE does, if they will be allowed to execute this they will render the image with a margin of -3px. To prevent them from doing this, we use the html>body trick to overwrite what we said to the browser previously, leaving only IE executing the code and rendering it desirably. So basically all we are doing is writing separate CSS code for the browsers, where IE is executing the normal code, other browsers executing the code within html>body. However, you should only use this if you cannot solve the problem universally using the regular cross-compatible css code that IE amongst all other browsers can see, as this method involves more typing up so it may take longer to do and increase the size of your CSS file slightly, however it is more than worth it, trust!

Understand!? Please comment if you need further explanation.

The reason why this works is that IE is meant to recognise html>body but it can't because its a bug in IE. However it is extremely easy and useful to implement. I have solved many problems using this which would otherwise be deemed near impossible to solve. It takes intelligence and coding skill to implement this effectively, as you need to have a good knowledge of the CSS code to correct IE's problems effectively.

Revision history:

13th September 2006 - Edited the text to correct a couple of mistakes and improve clarity of explanations

		Overclock.net - Overclocking.net > Overclock.net Forum > FAQs
How to: Get around Internet explorer's rendering bugs

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)