The Appearance of li is distorted in IE8 while in mozilla firefox it is correct

Question

Following is the piece of CSS

#innerHeaders 
{
    background-color: #026062;
    height: 33px;
    left: 269px;
    position: relative;
    top: 17px;
    width: 755px;
}

ul li
{
    display:inline-block;
    color:#FFF;
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size:14px;
    font-weight:bold;
    text-align:center;
    vertical-align:middle; 
}

ul li a
{
    text-decoration:none;
    color:#FFF;
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size:14px;
    font-weight:bold;
    text-align:center;
    vertical-align:middle;
    position:absolute;
    top: 7px;
    left:45.5px;
}

ul li a:hover
{
    text-decoration:underline;  
}

.topBtns
{
    background-image:url(../images/topBtnsBg.png);
    width:128px;
    height:33px;
}

Following is the HTML code

<div id="innerHeaders">
    <ul>
        <li id="homeBtn" class="topBtns"><a href="index.html">Home</a></li>
        <li id="aboutBtn" class="topBtns"><a href="#" onClick="aboutData();">About</a></li>
        <li id="feedBackBtn" class="topBtns"><a href="xyz@abc.com">Feedback</a></li>
    </ul>
</div>

The above li is displayed as the Home About and Feedback button inline in the Firefox browser but in IE8 the Home About and Feedback overlap each other.

following are the respective screenshots Firefox

My guess is that IE8 is in quirks mode due to lack of a doctype. See http://stackoverflow.com/questions/9110646/ie8-display-inline-block-not-working — Matt Browne, Jun 04 '13 at 04:49
I had seen this earlier and tried but the same was of no help. Can you please elaborate on how to use as even this doesn't work! — Chandni, Jun 04 '13 at 06:00
You just put it at the very top of the page, before the opening `` tag. ` ` works just as well (that's the doctype for HTML 5). But there are other things besides lack of a doctype that can trigger quirks mode. See [this answer](http://stackoverflow.com/a/627124/560114) for how to check if a browser is in quirks mode. — Matt Browne, Jun 04 '13 at 14:03

score 2 · Answer 1 · answered Jun 04 '13 at 06:05

In "li" I have just added float (*float:left;), so that it shows correctly in ie7. And under "ul li a" you have to remove "position:absolute;" and just add line height (line-height:34px;). Hope it show correctly in all browser as you want.

ul li
   {
    display:inline-block;
    *float:left;
    color:#FFF;
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size:14px;
    font-weight:bold;
    text-align:center;
    vertical-align:middle;
   }

    ul li a
    {
    text-decoration:none;
    color:#FFF;
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size:14px;
    font-weight:bold;
    text-align:center;
    vertical-align:middle;
    /*position:absolute;*/
    top: 7px;
    left:45.5px;
    line-height:34px;
    }

score 0 · Answer 2 · answered Jun 04 '13 at 05:03

0

Your CSS is not right. Often time the issue with IE is that your parent elements do not have layout. This is known as an haslayout issue. You can read about this more in this article: http://reference.sitepoint.com/css/haslayout

Try defining the heights and widths of all the parent elements. Also the absolute values could be causing a problem. Maybe you could explain more about what you are trying to accomplish.

answered Jun 04 '13 at 05:03

Renee Rose-Perry

222
3
8

As far as I remember `hasLayout` was a problem in IE 6, much less so in IE 7 and disappeared afterwards. – Joey Jun 04 '13 at 05:54

score 0 · Answer 3 · answered Jun 04 '13 at 05:41

There is some error in your css file which have made correct. jsFiddle url also here.

ul li
       {
        display:inline-block;
        *float:left;
        color:#FFF;
        font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
        font-size:14px;
        font-weight:bold;
        text-align:center;
        vertical-align:middle;
       }

        ul li a
        {
        text-decoration:none;
        color:#FFF;
        font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
        font-size:14px;
        font-weight:bold;
        text-align:center;
        vertical-align:middle;
        /*position:absolute;*/
        top: 7px;
        left:45.5px;
        }

A short description/explanation of the changes would probably be helpful. This is just a code dump which makes it quite hard to see where the problem was originally. — Joey, Jun 04 '13 at 05:58
The position: absolute has been commented in ul li a and float: left is added in ul li but this doesn't work — Chandni, Jun 04 '13 at 06:03

The Appearance of li is distorted in IE8 while in mozilla firefox it is correct

3 Answers3