most common IE css problems

In this article I will try to explain the most common IE css problems. Which most of us have already come across. I just want to share this experience with the people who are not aware of how to resolve IE css problem.

1. Centering a Layout
Lets say we have to arrange element in center, most of web developer has to do while creating a layout.
In IE6 it takes centred element to the left side, we have just “add margin: auto” to the respective element and most of all browsers will work perfect fine except IE6.
sample css code

    #MainContainer{
        border: solid 1px #000;
        background: #777;
        width: 400px;
        height: 160px;
        margin: 30px 0 0 30px;
    }
    #Box{
        background: #95CFEF;
        border: solid 1px #36F;
        width: 300px;
        height: 100px;
        margin: 30px auto;
    }

In order to fix Centering a Layout issue for IE6. We have to add “text-align: center” attribute to “MainContainer” style and ” text-align: left” to the “Box” style.

2. Staircase Effect
This problem is related to li element which we use very frequently in navigation. Example like create the container element, create some links inside. Then float the anchors in the direction he wants. Usually. IE though decides to make it a lot more complicated.

sample css code that aligns “anchor tags / li elemnts ” as a straight line/ sleeping line (childhood keyword 😉 ).

ul {
    list-style: none;
}
ul li a {
    display: block;
    width: 130px;
    height: 30px;
    text-align: center;
    color: #fff;
    float: left;
    background: #95CFEF;
    border: solid 1px #36F;
    margin: 30px 5px;
}

If you look this style it looks perfectly fine in all browsers, in its looks ugly.
In order to fix this issue we have to do apply style for “li” element rather than inner element i.e. anchor tag.
” float: left ” or “display: inline”.

3. Double Margin Bug
Very classing issue for IE, i have worst memory around this issue any ways. Lets say we have one box element with margin “20px” in IE6 it will be visible as a “40px”.
sample css code as follows.

    #box{
        background: #afafaf;
        width: 100px;
        height: 100px;
        float: left;
        margin: 20px 0 0 20px;
        border: solid 1px red;
    }

The fix for this bug is to add “display:inline” in above style and everything works.

4. Can’t define Elements with Small Heights
While creating layout we have to define less height for certain elements, like add height: 1px to the style’s declarations and you should be done. Check the page in IE and you’ll probably do a double take.

    #minHight{
        background: #95CFEF;
        border: solid 1px #36F;
        width: 300px;
        height: 2px;
        margin: 30px 0;
    }

There are two ways we can fix this issue either add “overflow:hidden” property or add “font-size: 0” to existing class definitions.

5. Auto Overflow and Relatively Positioned Items
This bug appears when you set the parent container’s overflow property to auto and place relatively positioned item inside. Relatively positioned item overflows its parent element boundaries and overflows outside.

    
// css style #outer{ background: #afafaf; border: solid 1px red; width: 200px; height: 180px; margin: 20px 0; overflow: auto; } #inner{ background: blue; width: 200px; height: 150px; position: relative; margin: 20px; }

Easiest way to fix this bug is to aee “position” the parent element relatively.

6. Fixing the Broken Box Model
Lets say we have outer container and inner element like “paragraph”. If we apply following style on outer element/box it will look very odd in IE where as layout looks very good in other browsers.

 #box {
   width: 100px;
   border: 2px solid black;
   padding: 10px;
 }

Best way to fix this problem is remove padding from parent and add it to inner element this should fix the problem.

7. Minimum Width and Height
Min width and Height are very important property which we use very frequently such as in footer area. Where we can has more content and footer will auto grow. IE takes “height” property as a “min-height”.

The simple solution could be something like mentioned in following code i.e. IE can’t parse child selectors.

#box {
    min-height: 150px;
    height: 150px;
}
html>body #box {
    height: auto;
}

8. Floated Layout Misbehaving

    
First Div Content
Second Div Content
// style #firstDiv, #secondDiv{ background: #95CFEF; border: solid 1px blue; width: 200px; height: 250px; margin: 20px; padding: 10px; float: left; } #MainContainer{ background: #C2DFEF; border: solid 1px red; width: 400px; margin: 20px; padding: 5px; overflow: auto; }

Out of this code would be first div expands itself to fit the content, ultimately breaks the layout and pushing second element down. Fix to this layout issue is add “overflow: hidden” property but it may create a view to with incomplete data visible to users.

9. No Alpha Transparent PNG Support
Kind of funny thing IE does not support PNG type images until IE7. non-alpha transparent PNG files work fine without any fix in IE 6

Share this nice post: