Internet Explorer & CSS issues #1
Trying to get CSS-based websites to look the same across all browsers can often be difficult. Many of the problems however lie with Internet Explorer implementing CSS commands differently to other, more standards compliant browsers. All is not lost, however, as many of the differences you see across browsers are caused by the same Internet Explorer CSS issues…
1. Page elements are narrower in Internet Explorer
Perhaps the most famous IE and CSS problem is Internet Explorer’s misinterpretation of the CSS box model, which can cause page elements to be narrower in IE. Every HTML element is essentially a box, the width of which is the total of its margin, border, padding and content area. Imagine the following CSS rule:
div {
margin: 5em;
padding: 4em;
border: 1em solid green;
width: 30em
}
This means that each div is 50em wide in total. This amount is made up of a 30em wide content area, and a 4em padding, 1em border and 5em (invisible) margin on both the left and right sides.
In IE however, the border and padding are included in the width of the content, as opposed to added on. In IE therefore, the width of the content is only 20em (30em less 5em padding and border on either side), and the total width of the div is just 40em.
This CSS box model problem occurs in IE5.x, and can occur in IE6, depending on how you declare the ISO value in the HTML code. There are two ways of doing this:
<?xml version="1.0" encoding="iso-8859-1"?> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
The first command is placed on the very first line of the HTML document and the second can be placed anywhere within the <head>. In order for XHTML pages to validate it’s compulsory to use one of these commands. The W3C recommends using the first command as the second will be phased out in the future.
By using the first command however, Internet Explorer 6 will render the CSS box model incorrectly, just like in version 5 browsers. To fix the box model problem, you’ll need to insert a CSS hack to send different width values to different browsers. The CSS hack you use will depend on which ISO value you use, and therefore which versions of IE are rendering the box model incorrectly.
To fix up only IE5.x, use the following CSS commands:
div {
margin: 5em;
padding: 4em;
border: 1em solid green;
width/**/:/**/ 40em; //for IE5.x
width: 30em
}
To fix up all versions of IE, use these CSS commands:
div {
margin: 5em;
padding: 4em;
border: 1em solid green;
width: 40em // IE 7 or above
}
html>body div {
width: 30em // IE 6
}
Tags: CSS, internet explorer
Leave your response!
You must be logged in to post a comment.