SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Sep 2004
    Location
    NYC
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question CSS list background image in Firefox not IE

    Ok anyone who can help me with this problem would be a HUGE help, I've been trying to fix it for hours now and haven't gotten anywhere. I've got an unorded list as a vertical navigation element, with a background image for the ul. Everything displays fine with the list, until I tried to add a background image for the "hover" state. It is perfectly centered in IE but gets pushed to the left in Firefox. This seems to occur after i specify the width of the link element. (as the width of the background image) because without specifying a width the links display perfectly in the center in all browsers, however you can only see some of the background image. I've looked in the forums and didn't see anything. The link is http://www.ericberg.net and the CSS is here:

    body {
    background: #9cf;
    font: small/1.4 "Lucida Grande", "Trebuchet MS", "Bitstream Vera Sans", Verdana, Helvetica, sans-serif;
    text-align: center;
    color: #393;
    letter-spacing: 1px;
    margin: 0;
    padding: 0;
    border: 0;
    }
    #box {
    width: 640px;
    margin: 0 auto;
    padding: 10px 0 0 0;
    text-align: left;
    }
    html>#box {
    width: 640px;
    }
    #head {
    background: url(i/hed.gif) no-repeat center top;
    margin: 0;
    padding: 6px 0 0 0;
    }
    #head h1 {
    margin: 10px 0 0 25px;
    padding: 0;
    height: 53px;
    text-align:left;
    }
    #nav {
    float: right;
    display: block;
    padding: 23px 50px 0 0;
    width: auto;
    text-align: center;
    }
    html>#nav {
    }
    #nav ul {
    text-align: center;
    background: transparent url(i/nv1.gif);
    margin: 0;
    display: block;
    padding: 19px 0 0 2px;
    list-style-type: none;
    line-height: 2em;
    letter-spacing: 2px;
    border: 0;
    height: 131px;
    width: 119px;
    voice-family: "\"}\"";
    voice-family: inherit;
    width: 117px;
    }
    #nav ul li {
    margin: 0;
    padding: 0;
    display: block;
    }
    #nav ul li a {
    margin: 0;
    padding: 0;
    text-decoration: none;
    text-align: center;
    color: #900;
    width: 79px; /*remove this width and links center in all browsers, with it links get pushed left in Firefox only*/
    height: 26px;
    display: block;
    }
    #nav ul li a:hover {
    background-image: url(i/hv2.gif);
    }
    #nav .active {
    background-image: url(i/hv2.gif);
    }
    #main {
    background: url(i/mid.gif) center top repeat-y;
    margin: 0;
    padding: 0;
    min-height: 260px;
    }
    .content {
    text-align: left;
    width: 400px;
    padding: 20px 0 0 0;
    margin: 0 0 0 30px;
    }
    .content p {
    text-indent: 20px;
    margin: 0;
    padding: 0;
    }
    #foot {
    background: transparent url(i/botsi.gif) no-repeat center top;
    margin: 0px 0 0 0;
    padding: 0;
    height: 225px;
    vertical-align: bottom;
    display: block;
    }
    #foot p {
    text-align: left;
    margin: 0;
    padding: 196px 0 0 25px;
    color: #FFF;
    font-size: 10px;
    }

    thanks

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Just set the position of the background image and you won't need a width in the anchor.
    Code:
    #nav ul li a {
    margin: 0;
    padding: 0;
    text-decoration: none;
    text-align: center;
    color: #900;
    height: 26px;
    display: block;
    }
    #nav ul li a:hover {
    background: url(http://www.ericberg.net/i/hv2.gif) no-repeat 50% 0;
    }
    #nav .active {
    background: url(http://www.ericberg.net/i/hv2.gif) no-repeat 50% 0;
    }
    Paul

  3. #3
    SitePoint Member
    Join Date
    Sep 2004
    Location
    NYC
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    solution solved

    Thanks for your help, that fixed it right up!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •