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 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    7
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Horizontal Navigation Bar (Sliver at the end)

    I can't seem to get rid of this sliver at the end of my horizontal navigation bar. here is a picture of the problem and my coding. Appreciate the help.


    http://imageshack.us/photo/my-images/705/sliver.png/

    Code:
    <!DOCTYPE HTML>
    <html>
    
    <head>
    	<script type="text/javascript" src="js/jquery.js"></script>
    	<link href="css/basic.css" rel="stylesheet" type="text/css">
    
    </head>
    
    <body>
    
    <div id="outterwrapper">	
    		<div id="top">
    		
    		</div>	
    	<div id="wrapper">
    
    		<div id="topnav">
    			<ul id="navbar">
                	<li class="first"><a href="#">Home</a></li>
                    <li><a href="#">About Us</a></li>
                    <li><a href="#">Apply Now</a></li>
                    <li><a href="#">Client Tools</a></li>
                    <li><a href="#">Types of Mortgages</a></li>
                    <li><a href="#">Educational</a></li>
                    <li><a href="#">Fannie Mae HomePath</a></li>
                    <li><a href="#">Testimonials</a></li>
                    <li><a href="#">Contact Us</a></li>
    			</ul>
    		</div>
    	
    		<div id="leftnav">
    				
    		</div>
    			
            <div id="content">
                
            </div>
                
            <div id="rightside">
                
            </div>
    	
    		<div id="footer">
    		
    		</div>
            
       </div>
    </div>
    
    </body>
    </html>
    Code:
    body				{  background-color: #3B424A; background-image:url(../images/background_1.jpg); background-repeat: repeat-x; }
    
    #outterwrapper		{  width:940px; padding:2px; margin:0 auto; }	
    
    #top	 			{  background:url(../images/backtop.png); width:916px; height:11px; margin:0 auto; }
    
    #wrapper 			{  width:916px; height:2195px; margin:0 auto; background-color:#FFF; background:url(../images/backmid.png); }
    
    #banner 			{  background-repeat:no-repeat; margin-left:12px; width: 343px; height: 195px; background-image:url(../images/headerback_1.jpg);  display:inline; float:left;}
    
    #heading			{  overflow: hidden;font-family: Garamond, Times, serif; font-size: 24px; color:#ffffff; width: 300px; height: 88px; margin: 0 auto; padding-top:68px; text-align: center; text-transform: uppercase; }
    
    #banner2			{  float: right ;width: 548px; height: 196px; margin-right: 11px; padding-top:-266; display:inline; background-image:url(../images/bg_d96a.png); background-repeat: no-repeat; background-position: top right; }
    
    #topnav				{ }
    
    #navbar				{  list-style:none; overflow:hidden; background-color:#b60002; width:891px; clear:both; margin:0 auto; padding:0;  }
    #navbar li			{	float:left; border-right: solid 1px #ca0002; height: 35px; padding:0; }
    #navbar li a:link, #navbar li a:visited {	text-decoration:none; display:block; height:35px; color: #FFF; line-height:35px; padding: 0 12px 0 12px; border-right: solid 1px #990000; font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; margin:0 auto; overflow:hidden;}
    #navbar li a:hover	{ background: #990000; color: #fff; }
    #navbar li.first 	{ border-left: solid 1px #ca0002; margin:0 auto; }

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Try
    Code:
    <li class="last"><a href="#">Contact Us</a></li>
    Code:
    #navbar li.last{	
    border-right: none;
    }
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    7
    Thanks
    3
    Thanked 0 Times in 0 Posts
    that didn't seem to work. It only removes the light color bar at the end of the "contact" button. The sliver is still there

  • #4
    Regular Coder
    Join Date
    Dec 2010
    Posts
    424
    Thanks
    22
    Thanked 56 Times in 56 Posts
    try
    Code:
    <li class="last"><a href="#" class="last">Contact Us</a></li>
    Code:
    #navbar li a.last { border-right:none; }
    in your css both the LI and the A tag both have a border right.
    let me know if that fixes it

  • #5
    Regular Coder
    Join Date
    Dec 2010
    Posts
    424
    Thanks
    22
    Thanked 56 Times in 56 Posts
    as well as the other css that jjf83 put

    Code:
    #navbar li.last{	
    border-right: none;
    }

  • #6
    New Coder
    Join Date
    Mar 2012
    Location
    Tulsa, OK
    Posts
    31
    Thanks
    0
    Thanked 3 Times in 3 Posts
    Remove the background from the "navbar" container... and add it to the items instead. Hope that helps.

    Code:
    #navbar {
    	list-style:none;
    	overflow:hidden;
    	width:891px;
    	clear:both;
    	margin:0 auto;
    	padding:0;
    }
    
    #navbar li {	
    	background-color:#b60002;
    	float:left;
    	border-right: solid 1px #ca0002;
    	height: 35px;
    	padding:0;
    }

  • Users who have thanked telekovar for this post:

    jjf83 (03-06-2012)


  •  

    Posting Permissions

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