SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict
    Join Date
    Aug 2006
    Posts
    375
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Another easy navbar issue...

    I'm presuming, but as usual, there's one thing I don't spot.

    Basically a 1px gap between the banner and the navbar - you can see what I mean by looking at it in Firefox and then in IE(6) :

    link here

    The CSS looks like :

    Code:
    /*Navigation*/
    
    #navcontainer ul
    {
    padding-left: 0;
    margin:0 0 0 0;
    background-color: #FFFF80;
    color: #999;
    float: left;
    width: 100%;
    font-family: arial, helvetica, sans-serif;
    font-size:12px;
    display:inline;
    border-top: 1px solid #FFFF80;
    border-bottom: 1px solid #FFFF80;
    }
    
    #navcontainer ul li { 
    display: inline; 
    }
    
    #navcontainer ul li a
    {
    padding: 0.5em 1em;
    background-color: #FFFF80;
    color: #333;
    text-decoration: none;
    float: left;
    border-top: 0px solid #000000;
    border-left: 1px solid #FFFFFF;
    border-right: 1px solid #FFFFFF;
    border-bottom: 1px solid #FFFF80;
    margin-right:-1px;
    margin-top:-1px;
    margin-bottom:-1px;
    position:relative;
    z-index:1
    }
    #navcontainer ul a#current {z-index:99}
    #navcontainer ul li a:hover {z-index:99}
    #navcontainer ul li a:hover
    {
    background-color: #FFF102;
    color: #000;
    border-top: 0px solid #FFF102;
    border-left: 1px solid #000000;
    border-right: 1px solid #000000;
    border-bottom: 1px solid #000000;
    }
    
    #navcontainer ul li a#current
    {
    background-color: #FFF102;
    color: #000;
    border-top: 0px solid #FFF102;
    border-left: 1px solid #000000;
    border-right: 1px solid #000000;
    border-bottom: 1px solid #000000;
    }
    
    /*Main Body*/
    
    body  {
    color: #333;
    font-family: verdana, arial, helvetica, sans-serif;
    font-size:12px;
    margin: 0 0 0 0;
    background-image:url(background.gif);
    background-repeat:repeat-x;
    }
    I thought it might be my top borders, but they're all set to 0, and the main nav container has all it's margins set to zero too....

    Any ideas?

    Cheers.

  2. #2
    SitePoint Addict
    Join Date
    Aug 2006
    Posts
    375
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    After spending most of the afternoon playing around with just about every permutation I could think of, I finally got to the bottom of it.

    Code:
    <div id="header">
    <img src="collinsbanner.gif" alt="Collins Great Britain Road Atlases 2009"/>
    </div>
    Of course needed to be :

    Code:
    <div id="header"><img src="collinsbanner.gif" alt="Collins Great Britain Road Atlases 2009"/></div>
    So after all that, nothing to do with the CSS after all....

    Puts hair back in.....

  3. #3
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Actually there's no need to do that. Just use this style rule (it also takes care of a Gecko - you know, Firefox & Co. - bug as well).

    Code CSS:
    img {
    	border: 0;
    	vertical-align: bottom;
    }

    The first property deals with Firefox (removes the borders from images when they're inside of links) while the second one deals with IE. Just put it near the top of your stylesheet and forget about it (no need to hack either).


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
  •