CSS Navigation Bar Problems

Discussion in 'CSS' started by mstocker, Jul 15, 2008.

0
  1. #1
    Hey guys/girls/everyone

    I am trying to write a CSS rollover navigation bar, but I am having a few problems with the way it is presented.

    There is a small gap in between the buttons in IE 7, but there is none in FF3 and Flock. I dont want that gap there, is there a way to remove it.

    Here is a link to a graphical representation to my problem:
    http://graphics.xenonsoft.co.uk/images/problem.GIF

    Here is my CSS code:
    
    <style type="text/css">
    #navlist1
    {
		margin-bottom:0px;
        font-family:Arial;
        font-size:.8em;
        font-weight:bold;
        list-style:none;
    }
    
    #navlist1 a
    {
        display:block;
        width:159px;
        color:#fff;
        text-decoration:none;
        background:url("btn_duo_top.png");
        padding-left:75px;
        padding-right:0px;
        padding-top:5px;
        padding-bottom:5px;
        background-repeat:no-repeat;
    }
    
    #navlist1 a:hover
    { 
    background-position:0 -28px;
    color: #1e5ebd;
    }
    
        #navlist2
    {
    	margin-top:0px;
        font-family:Arial;
        font-size:.8em;
        font-weight:bold;
        list-style:none;
    }
    
    #navlist2 a
    {
        display:block;
        width:159px;
        color:#fff;
        text-decoration:none;
        background:url("btn_duo_top-middle.png");
        padding-left:75px;
        padding-right:0px;
        padding-top:3px;
        padding-bottom:3px;
        background-repeat:no-repeat;
    }
    
    #navlist2 a:hover
    { 
    background-position:0 -26px;
    color: #1e5ebd;
    }

    </style>
</head>


<body>

<ul id="navlist1">
    <li><a href="#">Home Page</a></li>
</ul>
<ul id="navlist2">
    <li><a href="#">Latest Videos</a></li>
</ul>
    HTML:
    Any help would be greatly appreciated!

    Thanks,

    Matt
     
    mstocker, Jul 15, 2008 IP
  2. yankzilla

    yankzilla Peon

    Messages:
    159
    Likes Received:
    9
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Try changing it to this:
    <ul>
    <li id="navlist1"><a href="#">Home Page</a></li>
    <li id="navlist2"><a href="#">Latest Videos</a></li>
</ul>
    Code (markup):
    Without the images to test it, I cannot view it to make sure that it did in fact take the line out. But there should be no reason to add a separate UL for each link. Just have one UL total, and one LI for each link.
     
    yankzilla, Jul 15, 2008 IP
  3. mstocker

    mstocker Peon

    Messages:
    20
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Thanks for the advice, but I tried that and it still comes up the same in IE :(
    I agree with the advice you gave me (one ul total etc)

    I tried setting all the margins to 0 but it still doesnt work.

    Anything else I can try?

    EDIT: I have got an image of what i want it to generally look like:
    [​IMG]
     
    mstocker, Jul 15, 2008 IP
  4. yankzilla

    yankzilla Peon

    Messages:
    159
    Likes Received:
    9
    Best Answers:
    0
    Trophy Points:
    0
    #4
    try taking out the spaces. IE: 
    <li id="navlist1"><a href="#">Home Page</a></li><li id="navlist2"><a href="#">Latest Videos</a></li>
    Code (markup):
     
    yankzilla, Jul 15, 2008 IP
  5. mstocker

    mstocker Peon

    Messages:
    20
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Hmmm, i tried that but it still comes up with the spacing within IE. Thanks again though yankzilla!
     
    mstocker, Jul 15, 2008 IP