Ever done a CSS layout for a website, only to find that everything falls apart when you view it using Internet Explorer (IE)?
Every browser has its issues with CSS. IE is one of the most popular browsers and the most probably the more problematic with web designers. Hence they often use css hacks to work around the problem.
Here’s 3 essential tweaks you should know about IE and how you can tweak your css to make it work.
Tweak no.1 - The box model tweak
IE reads the CSS box model differently. While modern browsers such as Firefox adopts the W3C box model standards, IE has adopted the traditional CSS box model and hence the difference.
Here’s how this will affect your css codes:
Suppose you have the following:
div {
margin: 4em;
padding: 3em;
border: 1em solid green;
width: 20em
}
IE computes the div’s width based on the margin and width. In this case, the total width will be 28em.
To make the box model work in IE, you need to write two types of css settings in your css file, 1 for IE and 1 for any other browser using css child selectors:
#1: #test {width: 40px;}
#2: html>body #test {width: 30px;}
#1 will be read by older IE browsers, while #2, with the css child selector “>” will be read by newer browsers (Both IE7 and above and non-IE browsers).
Tweak no.2 – The margin tweak
Just as the box model paradox isn’t enough to wreck your nerves, IE also handles margin spacing alittle differently.
If you find your div tags or web elements misaligned in IE, you can try fixing it by using padding instead of using margins.
Tweak no. 3 – Centralizing your layout in IE
If you centralize your layout using commands like margin:auto, you will realized that your design refused to budge in older version of IE (6.0 and below).
Help is on the way with this simple tweak.
Write the text-align:center command under the “body” tag of your css like this:
body {
text-align:center
}
There’s plenty of CSS hacks out there to tackle these and other CSS issues. Just always make sure the hacks you used are valid on the older and current browsers as well.
Do spread the tweak around and leave a tweak in the comments to share with everyone!
Recent Comments