15 annoying Internet Explorer 6 bugs + simple solutions

March 26th, 2010

15 Internet Explorer 6 bugs, and how to deal with them in your web designIf you’re a web designer, IE6 probably makes you cringe. What’s worse than having to waste countless hours resolving IE6 bugs? – The advice of other fed up designers – “Just stop supporting IE.” It’s just not that simple my friend. Even today, 1 out of every 10 internet users have IE6. Check out the statistics.

 

 

 

To some web designers, 1 out of 10 people is a small loss. But to a business, it’s a deal breaker. Let’s say that an IE6 user stumbles across your non-IE6-compatible website. The website is broken and looks like an earthquake hit. Sure you’re an expert web designer and your site rocks in Firefox or Chrome, but to an IE6 user, you’re an amateur and your website looks like crap. What’s this IE user thinking? – that there are millions of functional websites out there and yours didn’t make the cut. You just lost a client. Yes it’s unfortunate, but IE6 support matters to businesses, clients, and web designers.

The point is, if you choose not to support IE6…this post isn’t for you. For those who are looking for some IE6 solutions…..read on.

Common (and annoying) IE6 Bugs + Solutions:

  1. IE6 Bug: No support for PNG transparency

     

    Standard browsers:
    PNG transparency in standard browsers
    Internet Explorer 6:
    PNG transparency in IE6

    PNG stands for Portable Network Graphic, and it is the latest fad in Web Design. Why? Because images saved as PNGs are crispy clear. Best of all, PNGs support multiple levels of transparency (allowing soft shadows) whereas GIFs allow only one level of transparency. PNGs can be re-saved without degrading quality of an image, another plus for designers. PNGs are supported by every major browser, which is great. But what happens when you use PNGs with transparency across your entire website, and view the site in IE6? Failure.

    The code that results in the IE6 bug:
    <style>
    .container {width:200px; height:230px; border:2px solid black; padding:10px; text-align:justify; background-color:beige}
    img {position:absolute; margin:15px 0 0 10px;}
    </style>

    <div class=”container”>
    <img alt=”puzzle” src=”puzzle.png”/>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    </div>

    As you see above, standard browsers handle the transparency correctly while IE6 ignores the transparency, giving us an unwanted gray background instead.

    Solution 1

    • Create a GIF that will appear in place of the PNG, in IE6 only.
    • In your code, replace the <img/> with a <div>&nbsp;</div>.
    • Using CSS, specify the div’s height and width to be exactly that of your image, and place your image as the div’s background.
    • Use conditional comments to tell IE6 to display the GIF, while all other browsers display the PNG by default.

    The code that corrects the IE6 bug:
    <style>
    .container {width:200px; height:230px; border:2px solid black; padding:10px; text-align:justify; background-color:beige}
    .image {position:absolute; width:226px; height:257px; margin:15px 0 0 10px; background-image:url(puzzle.png); background-repeat:no-repeat}
    </style>

    <!–[if IE 6]>
    <style type=”text/css”>
    .image {background-image:url(puzzle.gif)}
    </style>
    <![endif]–>

    <div class=”container”>
    <div class=”image”>&nbsp;</div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    </div>

    Want to try it? (Download the puzzle images and the HTML code)

    Standard browsers:
    PNG transparency in standard browsers
    Internet Explorer 6:
    PNG transparency in IE6

    Solution 1 (Conclusion)

    This solution is pretty useful if you’re OK with replacing your fancy PNG image with a less fancy GIF counterpart for IE6 users – especially if your website only has a couple PNGs here and there. If your website uses tons of PNGs, or the appearance of your images is not flexible, then try Solution 2.

    Solution 2

    Use JavaScript to force IE6 to display PNGs with the “IE PNG Fix” method. You can get the script for free, and it’s very easy to use in my opinion. Just follow the directions and download the files provided on the

    TwinHelix website

    TwinHelix IE PNG Fix.

    Solution 2 (Conclusion)
    This solution is useful if your website has too many PNGs since it would become a headache to create multiple alternate images for IE6.

  2. IE6 Bug: CSS :hover doesn’t work with anything other than the <a> tag (links)

     

    hover on a div in IE6

    The :hover pseudo-class allows you to change the style of an element when you mouse over it. The problem is that applying :hover to other elements (such as divs and spans) works in all standard browsers but…. you guessed it….. FAILS in IE6. In order to get :hover to work in IE6, you have to stick to using the <a> tag (aka “anchor”), even when a link is not needed.

    The code that results in the IE6 bug:
    <style>
    div {width:148px; height:140px; background-image:url(stargreen.gif)}
    div:hover {background-image:url(starpink.gif); cursor:pointer}
    </style>

    <div>&nbsp;</div>

    Solution

    Get <a> to behave like a <div> by displaying it as a block item, then style it as you would style your div.

    hover on a div in standard browsers

    The code that corrects the IE6 bug:
    <style>
    a {display:block; width:148px; height:140px; background-image:url(stargreen.gif)}
    a:hover {background-image:url(starpink.gif);}
    </style>

    <a href=”#”>&nbsp;</a>

    Note:
    Even when your intention is not to create a link, you can use the <a> tag to mimic a block element by giving it a block style, allowing you to use the :hover pseudo-class without worrying about IE6. If you don’t want the cursor to change into a hand when people mouseover the image (this happens automatically when using the <a> tag), just apply the following style:

    <style>
    a:hover {cursor:default}
    </style>

  3. IE6 Bug: No support for CSS min-height (minimum height)

     

    Standard browsers:
    min-height in standard browsers
    Internet Explorer 6:
    min-height in IE6

    You want to specify a minimum height for a container (such as the div above), and you want that container to expand automatically if its content exceeds the minimum height. The CSS min-height property allows you to achieve this. Unfortunately, min-height is not supported by IE6.

    The code that results in the IE6 bug:
    <style>
    div {border:1px solid green; padding:10px; color:green; text-align:justify; width:200px; min-height:170px;}
    </style>

    <div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>

    You can see above how standard browsers honor the minimum height we’ve specified even though the text doesn’t fill the entire div. But IE6 ignores the minimum height, causing the div to wrap around the text.

    Solution

    To get IE6 to comply with CSS min-height, we specify CSS height for IE6 using conditional comments. Due to an IE6 bug, IE6 treats height as if it were min-height. In IE6, if the text in our div exceeds the height we specify, the div will automatically expand. We now can use this bug to our advantage to make IE6 comply.

    Standard browsers:
    min-height in standard browsers
    Internet Explorer 6:
    min-height in IE6

    The code that corrects the IE6 bug:
    <style>
    div {border:1px solid green; padding:10px; color:green; text-align:justify; width:200px; min-height:170px;}
    </style>

    <!–[if IE 6]>
    <style>
    div {height:170px}
    </style>
    <![endif]–>

    <div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>

  4. IE6 Bug: Double margin on floating elements

     

    Standard browsers:
    min-height in standard browsers
    Internet Explorer 6:
    min-height in IE6

    Let’s say you have a small green box floating inside a large gray box (both boxes are divs). In standard browsers, giving the green box a margin wouldn’t be a problem. IE6 somehow doublesa margin applied to floating elements, due to the irritating and well-known IE6 “double-margin bug”.

    The code that results in the IE6 bug:
    <style>
    .outer {width:215px; height:100px; background-color:gray; padding:10px}
    .inner {float:left; height:50px; width:50px; background-color:green;
    margin-left:50px;}
    </style>

    <div class=”outer”>
    <div class=”inner”>&nbsp;</div>
    This is sample text.
    </div>

    As you can see above, our green box’s margin of 50 pixels is perceived as 100 pixels by IE6.

    Solution

    Give the floating element (our green box) a style of display:inline.

    Standard browsers:
    min-height in standard browsers
    Internet Explorer 6:
    min-height in IE6

    The code that corrects the IE6 bug:
    <style>
    .outer {width:215px; height:100px; background-color:gray; padding:10px}
    .inner {float:left; height:50px; width:50px; background-color:green;
    margin-left:50px; display:inline}
    </style>

    <div class=”outer”>
    <div class=”inner”>&nbsp;</div>
    This is sample text.
    </div>

  5. IE6 Bug: Content leaks out of an element despite the use of CSS overflow:auto (this bug may also exist in IE7)

     

    Standard browsers:
    overflow:auto in standard browsers
    Internet Explorer 6:
    overflow:auto in IE6

    The CSS overflow:auto property is used when an element (let’s say a div) has a fixed height, and its content may grow to exceed that height. overflow:auto prevents the div from expanding and causes a scroll bar to appear instead. The problem is, when the height of the content exceeds the height of the container, the content leaks out of the container in IE6.

    The code that results in the IE6 bug:
    <style>
    .outer {width:215px; height:100px; border:1px solid red; overflow:auto}
    .inner {width:100px; height:200px; background-color:purple; margin-left:50px; position:relative}
    </style>

    <div class=”outer”>
    <div class=”inner”>&nbsp;</div>
    </div>

    Solution

    Remove position:relative from the inner div (or)
    Add position:relative to the outer div.

    (In this case, we added position:relative to the outer div.)

    Standard browsers:
    overflow:auto in standard browsers
    Internet Explorer 6:
    overflow:auto in IE6

    The code that corrects the IE6 bug:
    <style>
    .outer {width:215px; height:100px; border:1px solid red; overflow:auto; position:relative}
    .inner {width:100px; height:200px; background-color:purple; margin-left:50px; position:relative}
    </style>

    <div class=”outer”>
    <div class=”inner”>&nbsp;</div>
    </div>

  6. IE6 Bug: Height:100% doesn’t work on a div with absolute positioning

     

    Standard browsers:
    height:100% in standard browsers
    Internet Explorer 6:
    height:100% in IE6

    When an absolute positioned div is assigned a height of 100%, a standard browser displays it correctly. But IE6 of course gets it wrong.

    The code that results in the IE6 bug:
    <style>
    div {width:180px; height:100%; background-color:green; position:absolute}
    </style>

    <div>&nbsp;</div>

    Solution

    In order to make the height of the div work, IE6 needs to be told the height of the parent item. But umm…isn’t the parent item the body? Yes….but it’s IE6…what did you expect? So set the height of the body to be 100%.

    Standard browsers:
    height:100% in standard browsers
    Internet Explorer 6:
    height:100% in IE6

    The code that corrects the IE6 bug:
    <style>
    body {height:100%}
    div {width:180px; height:100%; background-color:green; position:absolute;}
    </style>

    <div>&nbsp;</div>

  7. IE6 Bug: Elements with small heights don’t appear small

     

    Standard browsers:
    small height in standard browsers
    Internet Explorer 6:
    small height in IE6

    For some reason, IE6 doesn’t collapse elements properly when they’re assigned very small heights, such as 2 pixels.

    The code that results in the IE6 bug:
    <style>
    div {height:2px; width:200px; border:1px solid black; background-color:orange;}
    </style>

    <div>&nbsp;</div>

    You can see above that IE6 refuses to collapse the div down to 2 pixels.

    Solution

    This IE6 bug is the result of IE6 not wanting to shrink elements to be smaller than the default font size. So just specify font-size:0 and the problem should be fixed. (OR) set overflow:hidden so that IE6 believes that it is hiding the content of the div (even if there is none).

    In this case, we’ve chosen overflow:hidden.

    Standard browsers:
    small height in standard browsers
    Internet Explorer 6:
    small height in IE6

    The code that corrects the IE6 bug:
    <style>
    div {height:2px; width:200px; border:1px solid black; background-color:orange; overflow:hidden}
    </style>

    <div>&nbsp;</div>

  8. IE6 Bug: The number “1″ appears in front of every item in an ordered list (this bug may also exist in IE7)

     

    Standard browsers:
    ordered list with li width in standard browsers
    Internet Explorer 6:
    ordered list with li width in IE6

    In standard browsers, your ordered list will have numbers in front of each item, but IE6 (and IE7) display the number 1 in front of each item somehow. How the heck did this happen? It’s due to defining a width for the <li> tag.

    The code that results in the IE6 bug:
    <style>
    li {width:100px}
    </style>

    <ol>
    <li>Milk</li>
    <li>Eggs</li>
    <li>Bread</li>
    <li>Sugar</li>
    </ol>

    Solution

    Assuming you’d like the width to remain, add display:list-item to the <li> tags. (OR) Remove the width from the <li> tags.

    Standard browsers:
    ordered list with li width in standard browsers
    Internet Explorer 6:
    ordered list with li width in IE6

    The code that corrects the IE6 bug:
    <style>
    li {width:100px; display:list-item}
    </style>

    <ol>
    <li>Milk</li>
    <li>Eggs</li>
    <li>Bread</li>
    <li>Sugar</li>
    </ol>

  9. IE6 Bug: Unwanted gap between list items containing block elements (this bug may also exist in IE7)

     

    Standard browsers:
    List with block element in standard browsers
    Internet Explorer 6:
    List with block element in IE6

    If you’ve ever tried your hand at transforming an unordered list into a navigation menu, you’re probably familiar with this bug, commonly known as the IE6 “whitespace bug”. For some reason, IE6 is known to insert space between the list items if the links within them have been set to display:block.

    The code that results in the IE6 bug:
    <style>
    ul, li {padding:0; margin:0;}
    ul {list-style:none;}
    li a {padding:15px; background-color:pink; display:block;}
    </style>

    <ul>
    <li><a href=”#”>List item 1</a></li>
    <li><a href=”#”>List item 2</a></li>
    <li><a href=”#”>List item 3</a></li>
    </ul>

    Solution

    Use conditional comments to specify both display:inline-block and display:blockfor links within the <li> tags. Somehow, this tricks IE into behaving. Target IE versions 7 and below within the conditional comment.

    Standard browsers:
    List with block element in standard browsers
    Internet Explorer 6:
    List with block element in IE6

    The code that corrects the IE6 bug:
    <style>
    ul, li {padding:0; margin:0;}
    ul {list-style:none;}
    li a {padding:15px; background-color:pink; display:block;}
    </style>

    <!–[if lte IE 7]>
    <style>
    li a {display:inline-block}
    li a {display:block}
    </style>
    <![endif]–>

    <ul>
    <li><a href=”#”>List item 1</a></li>
    <li><a href=”#”>List item 2</a></li>
    <li><a href=”#”>List item 3</a></li>
    </ul>

  10. IE6 Bug: Floating elements in a list form a staircase instead of sitting side by side

     

    Standard browsers:
    List with floats in standard browsers
    Internet Explorer 6:
    List with floats in IE6

    When using lists to create navigation menus, you might run into this bug, commonly known as the IE6 “staircase bug”. It’s caused by floating block elements within the list items.

    The code that results in the IE6 bug:
    <style>
    ul {list-style-type:none}
    ul li a {display: block; float: left; padding:10px; background-color:beige;}
    </style>

    <ul>
    <li><a href=”#”>List item 1</a></li>
    <li><a href=”#”>List item 2</a></li>
    <li><a href=”#”>List item 3</a></li>
    </ul>

    Solution

    Instead of floating the links inside the list items, apply the float directly to the list items. This not only corrects the IE6 bug, but it’s also logical, since it gives you more control over the spacing and positioning of each list item.

    The code that corrects the IE6 bug:
    <style>
    ul {list-style-type:none}
    ul li {display:block; float:left}
    ul li a {padding:10px; background-color:beige;}

    </style>

    <ul>
    <li><a href=”#”>List item 1</a></li>
    <li><a href=”#”>List item 2</a></li>
    <li><a href=”#”>List item 3</a></li>
    </ul>

    Standard browsers:
    List with floats in standard browsers
    Internet Explorer 6:
    List with floats in IE6

    Note:
    In the case that your links have to maintain the block and float properties, just add display:inline to the list items in your stylesheet. This will also correct the IE6 bug.

  11. IE6 Bug: Background disappears when list is placed in a floating div with relative positioning

     

    Standard browsers:
    List with floats in standard browsers
    Internet Explorer 6:
    List with floats in IE6

    It seems like IE6 just can’t get lists right. Here is yet another bug involving lists, this one better known as the IE6 “disappearing list background” bug. The bug appears when the following 2 conditions are met:

    • The list items have a background color or background image
    • The list is placed in a floating container that has relative positioning

    The code that results in the IE6 bug:
    <style>
    div {position:relative; float:left}
    ul li {background-color:lightblue; padding:10px; color:navy}
    </style>

    <ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
    </ul>

    Solution

    Add position:relative to the list so that the positioning of the list and its container match.

    The code that corrects the IE6 bug:
    <style>
    div {position:relative; float:left}
    ul {position:relative}
    ul li {background-color:lightblue; padding:10px; color:navy}
    </style>

    <ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
    </ul>

    Standard browsers:
    List with floats in standard browsers
    Internet Explorer 6:
    List with floats in IE6

  12. IE6 Bug: Disappearing bullets in lists with zero margin and padding

     

    Standard browsers:
    List visible bullets in standard browsers
    Internet Explorer 6:
    List with disappearing bullets in IE6

    For some reason, IE6 doesn’t display the bullets in an unordered list if the list has been assigned a width and its margin & padding has been set to zero.

    The code that results in the IE6 bug:
    <style>
    div {width:200px; border:1px solid blue}
    ul {width:100px; margin:0; padding:0;}
    ul li {border: 1px solid red;}
    </style>

    <ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
    </ul>

    Solution

    Add the style list-style-position:inside to the list items, then adjust the margin and padding if you wish… (in this case, we’ve left the margin and padding at zero).

    The code that corrects the IE6 bug:
    <style>
    div {width:200px; border:1px solid blue}
    ul {width:100px; margin:0; padding:0; list-style-position:inside}
    ul li {border: 1px solid red;}
    </style>

    <ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
    </ul>

    Standard browsers:
    List visible bullets in standard browsers
    Internet Explorer 6:
    List with disappearing bullets in IE6

  13. IE6 Bug: Select (dropdown) form overlaps a div with absolute positioning

     

    Standard browsers:
    Select form and div in standard browsers
    Internet Explorer 6:
    Select form and div in IE6

    IE6 somehow gives the select form (dropdown menu) precedence over an absolute positioned div, causing the div to appear behind the menu.

    The code that results in the IE6 bug:
    <style>
    div {position:absolute; width:100px; height:100px; background-color:navy; margin-left:20px; margin-top:-50px}
    form {width:200px}
    </style>

    <!–[if IE 6]>
    <style type=”text/css”>
    div {margin-top:-70px}
    </style>
    <![endif]–>

    <form>
    <select>
    <option>This is Item Number One</option>
    <option>This is Item Number Two</option>
    <option>This is Item Number Three</option>
    </select>
    </form>

    <div></div>

    Solution

    Place an iframe between the div and the select form (using z-index), since iframe has the ability to overlap forms. Set the “src” to something arbitrary so that the iframe doesn’t try to load a page. Set the width and height of the iframe to match the div, then use absolute positioning and margins to place it directly below the div.

    The code that corrects the IE6 bug:
    <style>
    div {position:absolute; width:100px; height:100px; background-color:navy; margin-left:20px; margin-top:-50px; z-index:20}
    iframe {z-index:10; width:98px; height:120px; position:absolute; margin-left:19px; margin-top:-40px; border:1px solid red}
    form {width:200px; z-index:1}
    </style>

    <!–[if IE 6]>
    <style type=”text/css”>
    div {margin-top:-70px}
    </style>
    <![endif]–>

    <iframe src=”#” frameborder=”0″ scrolling=”no”></iframe>

    <form>
    <select>
    <option>This is Item Number One</option>
    <option>This is Item Number Two</option>
    <option>This is Item Number Three</option>
    </select>
    </form>

    <div></div>

    Standard browsers:
    Select form and div in standard browsers
    Internet Explorer 6:
    Select form and div in IE6

    Note:
    For demonstration purposes, the red border was left in the iframe above so that you can see it in action. Notice how the iframe enables the div to now cover the dropdown select form. When using the code above, just remove border:1px solid red from the iframe in the stylesheet, and adjust the height so that it covers the div, and the IE6 bug should be corrected.

  14. IE6 Bug: Centering elements with auto margins doesn’t work

     

    Standard browsers:
    Centering with auto margins in standard browsers
    Internet Explorer 6:
    Centering with auto margins in IE6

    The small purple box is contained in the large orange box above (both are divs). Standard browsers have no problem centering the purple div with the style margin:auto. IE6 does not recognize auto margins in Quirks Mode.

    The code that results in the IE6 bug:
    <style>
    .outer {background-color:orange; width:200px; height:150px;}
    .inner {background-color:purple; width:100px; height:100px; margin:0 auto}
    </style>

    <div class=”outer”>
    <div class=”inner”>&nbsp;</div>
    </div>

    Solution

    Add text-align:center to the orange box in order to center the purple box within, then add text-align:left to the purple box so that its text or content stays aligned to the left.

    The code that corrects the IE6 bug:
    <style>
    .outer {background-color:orange; width:200px; height:150px; text-align:center}
    .inner {background-color:purple; width:100px; height:100px; margin:0 auto; text-align:left}
    </style>

    <div class=”outer”>
    <div class=”inner”>&nbsp;</div>
    </div>

    Standard browsers:
    Centering with auto margins in standard browsers
    Internet Explorer 6:
    Centering with auto margins in IE6

  15. IE6 Bug: Negative margin causes cut-off

     

    Standard browsers:
    Negative margin in standard browsers
    Internet Explorer 6:
    Negative margin in IE6

    Negative margins are supposed to move an element up, not cut off its top. IE6 doesn’t understand negative margins when the parent item has a defined position and the child does not.

    The code that results in the IE6 bug:
    <style>
    .outer {width:220px; height:150px; background-color:blue; margin:100px; position:absolute}
    .inner {width:200px; height:130px; background-color:yellow; text-align:justify; margin-top:-50px;}
    </style>

    <div class=”outer”>
    <div class=”inner”>”Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim…
    </div>
    </div>

    Solution

    Assign position:absolute to the child element

    The code that results in the IE6 bug:
    <style>
    .outer {width:220px; height:150px; background-color:blue; margin:100px; position:absolute}
    .inner {width:200px; height:130px; background-color:yellow; text-align:justify; margin-top:-50px; position:absolute}
    </style>

    <div class=”outer”>
    <div class=”inner”>”Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim…
    </div>
    </div>

    Standard browsers:
    Negative margin in standard browsers
    Internet Explorer 6:
    Negative margin in IE6

Conclusion

After reading about all these IE6 bugs, you’re probably wondering, who’s the weirdo still using IE6? Believe it or not, US government officials and thousands of businesses are stuck in IE6 hell. Most of them recognize that IE6 sucks and want to escape the Ice Age by upgrading to a better browser. Then why don’t they? Because some of their intranet systems were built a looooong time ago, and they’re only IE6 compatible. Upgrading to a better browser would cost many businesses thousands of dollars because it would require them to rebuild their entire intranet systems from scratch. So until IE6 dies out completely, the bug fixes above will help you resolve your frustration.



comments...

  1. Daniel15 says:

    Nice post! So many annoying Internet Explorer bugs, you seem to have covered the most common ones. :)

  2. GazB says:

    Good and handy information. I’m still relatively new to the web design world. What other reasons are there for developers to use 2 seperate styles sheets, 1 for each IE6 and IE7. (i.e. if ie6 use this css).
    What are they changing within these style sheets?

  3. The reason we sometimes need to use separate stylesheets for different version of Internet Explorer is because it allows you to target one browser without disrupting the appearance of your website in the other browsers. For instance, if your layout is shifted to the left in IE6 while every other browser displays it correctly, you can add styles to the IE6 stylesheet to shift the layout back over to the right, and no other browser will read this style except IE6. People use different stylesheets for IE 6, 7 and 8 because all 3 versions have different bugs, and often times, you need to target each one individually.

  4. Wendy says:

    I’m having an issue with a form and only in IE(7, I believe).

    I have a container element with no content that houses a div floated left and another div floated right then cleared at the bottom.

    In the right div I have some text then I have a form to follow. For some reason this form pushes the text up and out of the top of the container div causing a line (looks like a collapsed container div with the border making a line).

    For the life of me, I can not figure out the problem. You can view the page here: http://4eversweet.com/contact.html

    and this is the CSS:

    #container {
    width: 946px;
    margin: 33px auto;
    background: #fff url(graphics/containerbg.png) repeat-x;
    background-position: bottom center;
    border: 7px solid #c78aa6;
    }

    #intro {
    width: 270px;
    padding: 20px 0 10px 40px;
    float: left;
    }

    #flash {
    width: 604px;
    border-left: 2px solid #c78aa6;
    float: right;
    text-align: center;
    }

    #flash ul li {
    font-size: 84%;
    text-align: left;
    }

    Please email your response! Thank you!

  5. narendra says:

    It Really nice tricks to handle bugs in ie6 specially..

    Thanks. :) :)

  6. omaima says:

    cool blog :) . you are awesome

    • M says:

      I have div with height:200px and overflow:auto That div contains form having many dropdown list. But when I scroll the div dropdown get dissapear (jerky). This happens only in IE 6. In other browsers it works fine. What to do?

  7. Sushil says:

    This is an nice stuff… :)

    Keep it up and add some more information regarding

    1. Select option margin padding issue in IE6
    2. Select option width in IE6

    and many more…

    Keep updating.

    Best of Luck!
    Raghav

  8. Prabhu says:

    Hi,

    I have a simple select tag with size = 5 options and I am setting the height of this select to 160px. When running in IE 6 browser the select box is displayed with an extra outer bottom border i.e., here I have set background as green and it extends beyond the actual bottom border of the select box. This varies depending upon the height set But this works fine in other browsers like FF and IE 8. Please send your suggestions whether this can be resolved.

    1
    2
    3 4
    5

  9. Prabhu says:

    The code for the above issue

    1
    2
    3
    4
    5

  10. Koshy says:

    Really very nice article, which identifies a number of IE6 issues

  11. Thanks for your website! I really like what you’re doing here.



leave a comment...



Category: All Categories, CSS, Design Stuff, Miscellaneous Follow any responses to this post through the RSS 2.0 feed or trackback from your own site.

Tags: , , , ,