SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Jun 2008
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Visual issue with nav bar

    Hello,

    Having an issue with my navigation, in IE6 and FF. Both have different issues.

    In IE6 the gap between tabs seems to be filled with the background colour of the tab itself. In FF this isn't a problem.

    Code:
    CSS;
    
    #nav    {list-style:none;border-bottom:5px #304F47 solid;padding-bottom:11px; margin-left:20px; margin-right:20px;font-family: arial, helvetica, sans-serif; font-size:medium;color:#FFFFFF;} 
    
    #nav li {display:inline;padding-bottom:12px;background-color:black; background-image: url("images/tab_left.gif");background-position: left top; background-repeat:no-repeat;}
    
    #nav li a {background-image: url("images/tab_right.gif");padding-bottom:12px; background-repeat:no-repeat;color:#FFFFFF;background-position: right top;padding-left:10px; padding-right:10px;text-decoration:none;} 
    
    HTML
    <ul id="nav">
    <li><a href="#" target="_blank">Main SCS Home</a></li>
    <li><a href="#">Gallery one</a></li>
    <li><a href="#">Gallery two</a></li>
    <li><a href="#">Gallery three</a></li>
    <li><a href="#">Gallery four</a></li>
    </ul>
    In FF this problem with the gap isn't an issue, but it's indenting the tabs from the left. This is more likely a problem with my understanding of padding/margins.

    You'll have to forgive me, I'd post an image to make it easier, but I don't seem to be senior enough!

    Thanks for any help.

  2. #2
    SitePoint Guru
    Join Date
    Jan 2007
    Posts
    967
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    ie use margins differnetly than other browsers.
    Usually I will create an ie stylesheet linked below the regular stylesheet hidden by ie "conditional comments" (try googling and you'll find it). Then I adjust the margins seperatly for ie.


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
  •