Search code examples
htmlcssinlineblockhtml-lists

HTML li tag with display:inline is displaying as block in IE7

I have created a navigation bar with a horizontal unordered list. This displays fine in all browsers except in IE7 where the list items seem to be displaying as block elements. Here is the HTML output, including the CSS.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML Strict//EN">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <style>
        BODY
        {
            padding-top: 0px;
            padding-right: 0px;
            padding-bottom: 0px;
            padding-left: 0px;
            margin-top: 0px;
            margin-right: 0px;
            margin-bottom: 0px;
            margin-left: 0px;
        }
        #wrapper
        {
            width: 900px;
            margin-top: 0px;
            margin-right: auto;
            margin-bottom: 0px;
            margin-left: auto;
        }
        #headersection
        {
            top: 0px;
            width: 900px;
            height: 470px;
            position: absolute;
        }
        #headertop
        {
            height: 130px;
        }
        #nav
        {
            height: 70px;
            margin-top: 0px;
            margin-right: 0px;
            margin-bottom: 0px;
            margin-left: 0px;
        }
        BODY
        {
            color: #333333;
            font-family: Tahoma;
            font-size: 0.9em;
        }
        #nav
        {
            width: 600px;
            overflow: hidden;
            padding-top: 0px;
            padding-right: 0px;
            padding-bottom: 0px;
            padding-left: 0px;
            float: right;
            background-image: url("/images/headercastlenav.png");
            background-repeat: no-repeat;
            background-position-x: left;
            background-position-y: top;
        }
        #nav UL
        {
            padding-top: 0px;
            padding-right: 0px;
            padding-bottom: 0px;
            padding-left: 0px;
            margin-top: 0px;
            margin-right: 0px;
            margin-bottom: 0px;
            margin-left: 0px;
        }
        #nav UL LI
        {
            height: 70px;
            float: left;
            display: inline;
        }
        #nav UL LI.selected
        {
            filter: alpha(opacity=80);
            background-color: rgb(0, 51, 102);
        }
        #nav UL LI A
        {
            height: 70px;
            color: #006699;
            line-height: 70px;
            padding-top: 0px;
            padding-right: 10px;
            padding-bottom: 0px;
            padding-left: 10px;
            font-family: Calibri;
            font-size: 13px;
            text-decoration: none;
            float: right;
            display: block;
        }
        #nav UL LI A.selected
        {
            color: #fff;
            filter: alpha(opacity=100);
        }
    </style>
</head>
<body onload="">
    <form id="form1" action="" method="post" _events="[object Object]">
    <div id="wrapper">
        <div id="headersection">
            <div id="headertop">
                <div id="nav">
                    <ul>
                        <li class="selected"><a class="selected" href="/home">home</a> </li>
                        <li><a href="/How-we-help/Our-services">how we help</a> </li>
                        <li><a href="/How-can-you-help/Befriending/Become-a-volunteer-befriender">how can you help</a> </li>
                        <li><a href="/Funders/Our-funders">funders</a> </li>
                        <li><a href="/News-and-Events">news &amp; events</a> </li>
                        <li><a href="/Contact-us">contact us</a> </li>
                        <li><a href="/How-can-you-help/Donating-and-fundraising">donate</a> </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    </form>
</body>
</html>

Any help is really appreciated.

Solution

  • The problem is the float: right; property in the #nav ul li a selector. Remove it and it will work. I tried it in jsFiddle with IE9 in IE7 compatibility.

    UPDATE I commented out the declaration that is causing the issue for the sake of clarity (ie. /* float: left; */. Remove the float:left; declaration and you'll be good to go.

        #nav UL LI A
    {
        height: 70px;
        color: #006699;
        line-height: 70px;
        padding-top: 0px;
        padding-right: 10px;
        padding-bottom: 0px;
        padding-left: 10px;
        font-family: Calibri;
        font-size: 13px;
        text-decoration: none;
        /* float: left; */
        display: block;
    }