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

    Join Date
    Mar 2004
    Posts
    278
    Rep Power
    15

    Question Suckerfish box model: IE vs. FF


    I built a custom Suckerfish CSS dropdown nav, with a portion of the code for which is below:

    Code:
    #nav {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
    color: #67670f;
    text-align: left;
    }
    
    ul {
    padding: 0;
    margin: 0;
    list-style: none;
    }
    
    li.navsep {
    float: left;
    width: 2px;
    }
    
    li.home {
    float: left;
    position: relative;
    width: 61px;
    }
    
    li.home img {
    border: 0;
    }
    
    li.ourproducts {
    float: left;
    position: relative;
    width: 132px;
    z-index: 500;
    }
    
    li.ourproducts img {
    border: 0;
    }
    
    li.ourproducts ul {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 132px;
    background-color: #fff;
    }
    
    li.ourproducts ul a, li.ourproducts ul a:visited {
    display: block;
    padding: 3px 0 3px 3px;
    margin: 0;
    color: #67670f;
    text-decoration: none;
    width: 129px;
    }
    
    li.ourproducts ul a:hover {
    display: block;
    background-color: #e4e2db;
    color: #67670f;
    text-decoration: none;
    }
    The focus is on the li.ourproducts a, li.ourproducts a:visited declaration.

    In IE6, the background on :hover is 3 pixels shy of covering the whole list item. I know this must have something to do with the padding. FF however, renders it fine.

    I figured that IE6 would handle the box model fine. When I make the width 132px however for li.ourproducts a, li.ourproducts a:visited, in IE6 it's fine and in FF it's 3 pixels farther than it should be (135px).

    Can anyone hint at what the problem might be? I can't seem to get the declaration so both see it fine.

    -B
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2004
    Posts
    278
    Rep Power
    15
    Helps if I use a doctype.

    D'oh.

    -B

IMN logo majestic logo threadwatch logo seochat tools logo