How to Do Your Best with CSS Hacks for Internet Explorer
Sometimes it is rather difficult to make CSS-based sites to look perfect across all browsers. The main problem is in Internet Explorer implementing CSS commands differently to other browsers. Thus, with most difficulties caused by the same Internet Explorer CSS issues, these problems can be fixed.
Fix Narrower Page Elements in Internet Explorer
The misinterpretation of the CSS box model that make page elements to be narrower in IE is probably the most usual IE and CSS issue. In short, every HTML element is a box, the width of which equals the total of its padding, border, margin and content area. Here is the sample of CSS rule:
div {
margin: 5em;
padding: 4em;
border: 1em solid green;
width: 30em
}
It means that each div is 50em wide in total. You can make this amount just adding 30em wide content area to 4em padding, 1em border and 5em (invisible) margin on both the left and right sides.
In IE the padding and border are included in the width of the content. In other words, the width of the content is 20em only while the total width of the div is just 40em.
Such CSS box model problem will appear in IE5.x for sure and can occur in IE6, depending on the way you declare the ISO value in the HTML code. Here are the two variants possible:
- <?xml version=”1.0″ encoding=”iso-8859-1″?>
- <meta http-equiv=”content-type” content=”text/html; charset=iso-8859-1″ />
The first command should be placed on the very first line of the HTML document. The second can be placed anywhere within the <head>. You must use one of these commands and according to W3C the first command is the better choice.
On the other hand, using the first command, you will make IE6 render the CSS box model incorrectly as in version 5 browsers. CSS hack allows you to fix the box model problem. With its help you can send different width values to different browsers. The choice of CSS hack to use will depend on ISO value and versions of IE.
Here are the CSS commands to fix IE5.x only:
div {
margin: 5em;
padding: 4em;
border: 1em solid green;
width/**/:/**/ 40em;
width: 30em
}
These CSS commands can be used to fix up all versions of IE:
div {
margin: 5em;
padding: 4em;
border: 1em solid green;
width: 40em
}
html>body div {
width: 30em
}
Spilling Text Issue
Unlike other browsers, IE expands background colours and borders to avoid text spilling out of its containing element. You will view the text splitting out of the right-hand side of the box in all browsers except IE, in case you have a box assigned class=”box” with the following CSS commands,:
.box {
width: 40px;
border: 2px solid #781351;
padding: 3px;
background: #d7b9c9;
white-space: nowrap
}
The box doesn’t expand in all other browsers except IE, because they will adhere to the width: 40px CSS command. While IE interprets width as min-width (the same works for height and min-height).
To avoid spilling the text out of the box in all browsers you should use the first rule with the following CSS rule:
html>body .box
{
width: auto;
min-width: 40px
}
This command is for non-IE browsers only, because IE will ignore it because it has html>body at the front of it. Thus, the first CSS rule, width: auto, cancels out the original width rule while the second command, min-width: 40px then assigns a minimum width to the box that will always expand to fit the text.
Background Images Disappear
The other problem is background images that disappear every time you scroll up and down on a web page. As a rule, you need to refresh the page to make the background reappear. The first solution is to insert the CSS command position: relative into the CSS rule containing the background image:
.foo {
background: url(filename.jpg);
position: relative
}
However, sometimes it doesn’t change things for the better and you should assign a width or a height to the element with the background image. You can just assign a height of 1% for Internet Explorer. This CSS rule make no damage to appearance because IE interprets height as min-height:
.foo {
background: url(filename.jpg);
height: 1%
}
html>body .foo {
height: auto
}
The height: 1% CSS command is cancelled out by the height: auto CSS command. As soon as Internet Explorer doesn’t understand html>body, the second CSS rule will be ignored by IE.
Widths Working on IE Only
Every HTML element is a block or an inline element. For example, <div>, <p>, <h1>, <form> and <li> are block elements while <span>, <a>, <label>, <strong> and <em> are inline elements. All we know that the width of an inline element can’t be changed. In other words, the following CSS rule shouldn’t work:
span {
width: 100px
}
However, it works in IE. Thus, each span in IE will have a width of 100px while the width of the span in all other browsers will be the width of the number of characters contained in the element. The solution is to turn the span into a block level element just like this:
span {
width: 100px;
display: block
}
Making the span a block element will cause the width command working in every browser. On the other hand, it also makes the span being on a new line. To avoid this you can assign float: left to the span.
Unstyled Version of Web Page
In case an unstyled version of the page appears for a moment, when you load your website in IE, you can see such phenomenon as the Flash Of Unstyled Content (or FOUC).
In case you use the @import directive (e.g. <style type=”text/css”>@import “styles.css”;</style>) to call up your CSS file then it can happen on your website in IE. There is quite a simple solution to fix this problem. You just need to insert a link or a script element into the header. And it doesn’t really matter whether you insert one of them or both. It doesn’t matter which one you insert (or even if you insert both). Provide a print stylesheet, using the link element to reference it (as indicated in the example below), and forget about the FOUC phenomenon:
- <script type=”text/javascript” src=”scripts.js”></script>
- <link rel=”stylesheet” href=”styles.css” type=”text/css” media=”print” />
Fixed Width Web Page Is Not in Centre of Window
The centrally aligning content through CSS doesn’t work in IE:
#container {
width: 770px;
margin: 0 auto
}
Thus, you can’t get a fixed width website to centrally align in the window in Internet Explorer or on the contrary, it is perfect in IE but not in any other browser.
With the second command margin: 0 auto positioning the containing element in the centre of the browser window, we should use such command in IE:
body {
text-align: center
}
#container {
width: 770px;
margin: 0 auto;
text-align: left
}
You also should insert text-align: left into the container div to avoid the text aligning too.