Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Smokes a Lot
    Join Date
    Jul 2003
    Location
    CA, USA
    Posts
    1,594
    Thanks
    5
    Thanked 20 Times in 20 Posts

    Link List Menu Borders

    See the problem here:

    http://www.rateprice.com/combo/pricefinal.asp

    On the top navigation menu, the link to "Pricing" has a class of on, you'll see a 1px piece of border on the bottom right corner of the tab. Not sure why it's there nor can I seem to make it go away. Perhaps it's the bottom border of the next sibling? This appears as such in both IE 7 and Firefox. Any help is appreciated.

    CSS:

    Code:
    #spacer1{
    	height:16px;
    	float:left;
    	width:15px;
    	border-bottom:solid 1px #C60000;
    	border-left:solid 1px #757575;
    }
    #headernav ul{
    	list-style:none;
    	float:left;
    	padding:0px;
    	margin:0px;
    	float:left;
    }
    #headernav ul li{
    	padding:0px;
    	margin:0px;
    	float:left;
    	width:150px;
    }
    #headernav ul li a{
    	color:#32659A;
    	display:block;
    	text-decoration:none;
    	text-align:center;
    	font-size:.8em;
    	border-bottom:solid 1px #C60000;
    	height:100%;
    	width:100%;
    }
    #headernav ul li a:hover{
    	color:#C60000;
    }
    #headernav ul li .on{
    	border:solid 1px #C60000;
    	border-bottom:solid 0px;
    	background-color:#FFFFFF;
    }
    #spacer2{
    	height:16px;
    	width:233px;
    	border-bottom:solid 1px #C60000;
    	float:left;
    	border-right:solid 1px #757575;
    }
    HTML:
    Code:
    <div id="headernav">
    	<div id="spacer1">
    	</div>
    	<ul>
    		<li><a href="#">Home</a></li>
    		<li><a href="#" class="on">Pricing</a></li>
    		<li><a href="#">Broker Info</a></li>
    		<li><a href="#">Broker Menu</a></li>
    		<li><a href="#">Admin</a></li>
    	</ul>
    	<div id="spacer2">
    	</div>
    </div>
    Thanks,

    Basscyst
    Helping to build a bigger box. - Adam Matthews

  • #2
    Smokes a Lot
    Join Date
    Jul 2003
    Location
    CA, USA
    Posts
    1,594
    Thanks
    5
    Thanked 20 Times in 20 Posts
    Ahh, well I fixed it by giving the next sibling of the "on" tab a margin-left of 1px. If there is a more elegant solution I'd still like to hear your ideas.

    Thanks,
    Basscyst
    Helping to build a bigger box. - Adam Matthews

  • #3
    New Coder
    Join Date
    Oct 2007
    Posts
    49
    Thanks
    5
    Thanked 9 Times in 9 Posts
    I see you've been updating the code as I was looking at it.

    If you kill the red line, it seems to work like it should:
    Code:
    internal.css (line 81)
    #headernav ul li a {
    border-bottom:1px solid #C60000;
    display:block;
    font-size:0.8em;
    height:100%;
    text-align:center;
    text-decoration:none;
    width:100%;
    }

  • #4
    Smokes a Lot
    Join Date
    Jul 2003
    Location
    CA, USA
    Posts
    1,594
    Thanks
    5
    Thanked 20 Times in 20 Posts
    Can't kill the red line, it's what gives the look of a selected tab. I don't see any difference in that bit of css either. It's all good though, it's displaying fine with the margin fix.
    Helping to build a bigger box. - Adam Matthews


  •  

    Posting Permissions

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