Grow your CSS skills. Land your dream job.

Website menu displays differently in IE/Firefox

  • # March 26, 2009 at 7:12 am

    Hello,
    Newbie to the site and getting familiar with CSS.
    I have had a lingering problem with the difference between the way IE and Firefox display my website menu.
    First the code:

    Code:
    #modernbricksmenu
    {
    height:20px;
    width:100%;
    background:transparent;
    voice-family:inherit;
    text-align:center;
    padding:0;
    }

    #modernbricksmenu ul
    {
    font:bold 11px Arial;
    list-style:none;
    margin:0;
    padding:0;
    }

    #modernbricksmenu li
    {
    display:inline;
    text-transform:uppercase;
    margin:0 2px 0 0;
    padding:0;
    }

    #modernbricksmenu a
    {
    display:inline-block;
    color:#FFF;
    text-decoration:none;
    letter-spacing:1px;
    background-color:#000;
    border-bottom:1px solid #FFF;
    margin:0 1px 0 0;
    padding:5px 10px;
    }

    #modernbricksmenu a:hover
    {
    background-color:gray;
    }

    #modernbricksmenu #current a
    {
    background-color:#00f;
    border-color:#00f;
    }

    #modernbricksmenuline
    {
    clear:both;
    width:100%;
    height:5px;
    line-height:5px;
    background:#00f;
    padding:0;
    }

    body,td,th,tr
    {
    color:#00f;
    font-size:14pt;
    font-family:verdana, sans-serif;
    }

    body
    {
    background-color:#d4d0c8;
    margin:0;
    padding:12px 30px 4px;
    }

    h1
    {
    font-family:Georgia, “Times New Roman”, Times, serif;
    font-size:28px;
    color:red;
    }

    #topofpage
    {
    margin:0;
    }

    And here are the differences:

    IE-

    [img]http://wkevin.com/img/ie.jpg[/img]

    Firefox-

    [img]http://wkevin.com/img/firefox.jpg[/img]

    Internet explorer seems to handle this better than Firefox for whatever reason. I would like to have the same result with Firefox.
    My site: http://wkevin.com
    Any takers?
    Thanks,
    Kevin

    # March 26, 2009 at 7:50 am

    This works in FF, though I’m not sure what it will do to IE (I’m on a Mac). I just got rid of the white bottom border and adjusted the padding.

    Code:
    #modernbricksmenu a {
    background-color:#000000;
    color:#FFFFFF;
    display:inline-block;
    letter-spacing:1px;
    margin:0 1px 0 0;
    padding:5px 10px 2px;
    text-decoration:none;
    }
    # March 26, 2009 at 8:11 am
    "apostrophe" wrote:
    This works in FF, though I’m not sure what it will do to IE (I’m on a Mac). I just got rid of the white bottom border and adjusted the padding.

    You just made my day Apostrophe!
    It works fine in both IE and Firefox.
    Thanks a million, I guess I came to the right place. :mrgreen:

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".