IE Common Browser Issue

Internet Explorer Conditional Statements

Internet Explorer provides a way of adding conditional statements that allow the designer to specify which version(s) of the browser should display certain sections. These conditional statements appear as simple HTML comments to other browsers (e.g, Firefox) and are therefore ignored. This can be very useful for addressing CSS bugs in older versions of Internet Explorer without having any impact on other browsers.

The syntax is shown below.

Syntax

<!--[if IE 7]> HTML Code only shows up on Internet Explorer 7<![endif]-->

As you can see, the beginning if statement starts with the beginning of an HTML comment (<!--) and the endif statement ends with the end of an HTML comment (-->), so all other browsers view the whole contents as a comment and do not render any of the contained code.

The code shown above will only be displayed in Internet Explorer 7, but you can use operators to specify multiple versions that will display a block of code. The operators are shown below:

Conditional Operators

Operator	Description	Example
!	not	<!--[if ! IE 7]>
lt	less than	<!--[if lt IE 7]>
gt	greater than	<!--[if gt IE 7]>
lte	less than or equal	<!--[if lte IE 7]>
gte	greater than or equal	<!--[if gte IE 7]>

1. Double-Margin Bug

The double-margin bug manifests itself in Internet Explorer 6 and earlier when an element has a margin in the same direction in which it floats (e.g, a left margin on an element that floats left). In this case, IE 6 and earlier double the margin as shown in the example below.

<style type="text/css">
#SideBar {
float: left;
margin-left: 50px;
width: 200px;
background-color:green;
}
#MainPage {
float: left;
width: 400px;
background-color:yellow;
}
</style>
<div id="SideBar">
This is the side bar.
</div>
<div id="MainPage">
This is the main page.
</div>

The fix is very strange: you simply set the display property of the offending element (in this case, the sidebar) to "inline". Because all floats are block elements, doing so has no effect on the display in other browsers; however, it does, for some reason, fix the display in Internet Explorer.

The double margin bug is fixed in IE7.

<!--[if IE]>
<style type="text/css">
#SideBar {
display:inline;
}
</style>
<![endif]-->

2. 3-Pixel Gap Bug

Internet Explorer has a weird bug, in which it adds a three-pixel margin between a floating element and the subsequent element. If the subsequent element has a width defined, Internet Explorer pushes the whole element to the right. If no width is defined, Internet Explorer just pushes the content to the right. Examine the code below.

#SideBar {
 float: left;
 margin-left: 50px;
 width: 200px;
 border:1px solid green;
}

#MainPage {
 border:1px dashed red;
}

Notice the tiny amount of added space between the text "This is the main page." and the floating element. Well, that's picky! And really, it doesn't create much of a problem, until you add a width to the subsequent element:
#MainPage {
 border:1px dashed red;
 width:200px;
}
Now the whole element is pushed over to the right.
 
This may not be a problem either, except in the case of a very tight layout. Those extra three pixels could cause the MainPage element to clear down under the float, which would destroy the design.
Luckily, the fix is easy. Simply set the margin-right of the floating div to -3 pixels as shown below:
<!--[if IE]><style type="text/css">#SideBar { display:inline; margin-right:-3px;}</style><![endif]-->