Grow your CSS skills. Land your dream job.

inline_block problem in ie

  • # May 16, 2009 at 4:09 am

    Hi everyone , i am having a problem with displaying <li> elements inline-block its ok in firefox but not in ie…

    below is the code

    html


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Welcome to the abode of Kanichukulangara Devi::::</title>
    <link href="style/oldenGold.css" rel="stylesheet" type="text/css" media="all" >
    </head>
    <body>
    <div id="wrapper">
    <div id="head_text">Welcome to the abode of Kanichukulangara Devi</div>
    <ul id="top_nav">
    <li>Home</li>
    <li>Contact Us</li>
    </ul>
    </div>
    </body>
    </body>
    </html>


    css


    * {margin:0; padding:0;}
    ul#top_nav
    {
    float:right;
    margin-top:10px;
    }
    ul#top_nav li
    {
    list-style:none;
    display:inline-block;

    }
    div#head_text
    {
    font-weight:bold;
    font-size:1em;
    float:left;
    margin-top:15px;
    padding-left:10px;
    }

    div#wrapper
    {
    margin:0 auto;
    width:980px;
    height:615px;
    border-style:solid;

    }

    body {
    font-family: Verdana, Geneva, Arial, helvetica, sans-serif;
    background-image:url(../images/background/width_main_back.png);
    background-repeat:repeat-x;

    }


    live example : http://www.kanichukulangaradevitemple.com/

    Please help

    Thanks
    Nidhin

    # May 16, 2009 at 4:18 am

    Try floating your list items left.
    And if you are going to post big blocks of code then please use the code tags, that’s what they are there for.

    # May 16, 2009 at 4:23 am

    thank you so much it helped….

    sorry for the long code…next time will use ‘code’

    Nidhin

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".