#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2010
    Posts
    6
    Rep Power
    0

    Can't get the padding right on this menu


    The padding isn't correct in IE or Firefox. It looks fine on a mac, but it's not rendering right on PC.

    strategicguru.com/secure-enterprise

    The menu should fill up the gray bar all the way to the right. What is conflicting here?
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    There's no conflict. It's just a difference of the exact font and font rendering engine used to display it.

    What I would recommend is using "display:table-cell" instead of floating the list-items and reducing the left and right padding on ".art-menu a .t". You would need to float them for IE7 though since it doesn't support "display:table-cell".

    Code:
    .art-menu, .art-menu ul {
        border: 0 none;
        display: block;
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
    .art-menu li {
        background: none repeat transparent;
        border: 0 none;
        display: table-cell;
        margin: 0;
        padding: 0;
        position: relative;
        z-index: 5;
    }
    *:first-child+html .art-menu li {float:left} /* for IE7 */
    * html .art-menu li {float:left} /* for IE6 */
    ul.art-menu {
        display: table;
        position: relative;
        width: 100%;
    }
    
    .art-menu a {
        cursor: pointer;
        display: block;
        height: 29px;
        margin-left: 1px;
        margin-right: 1px;
        overflow: hidden;
        position: relative;
        text-decoration: none;
    }
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo threadwatch logo seochat tools logo