0

I created a horizontal navigation using css. It uses background images for an off state and hover state. The tabs get cut off when the text is to short. Can someone help figure out how to fix the cut tabs?

Here is my code

@charset "UTF-8";
/* CSS Document */

/*body {
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 13px;
color: #00136c;
}*/

#nav{  
  width:100%;  
  height:100%;  
  background: url(images/topnav_nohover.png) no-repeat left top;
  } 

#nav {
	width: 100%;
	height: 100%;
	float: left;
	margin: 0 0 3em 0;
	padding: 0;
	list-style: none;
	background: url(images/topnav_hover.png) no-repeat left top;
	border-bottom: 2px solid #00136c; 
	border-top: none; 
	}
	
#nav li {
	float: left;
	width: 95px;
	height: 40px;
}
	
#nav li a {
	display: block;
	padding: 5px 15px;
	text-decoration: none;
	font-weight: none;
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 13px;
	text-align: center;
	border-right: 1px solid #fff;
	border-bottom: none;
	background:url(images/topnav_nohover.png) no-repeat left top;
	padding-bottom:none;
	}
	
#nav li a:hover {
	border-bottom:none;
	border-left:0px;
	border-right:0px;
	border-top:0px;
	color:#fff;
	display:block;
	font-family:Arial, Helvetica, Sans-Serif;
	font-size:13px;
	padding: 5px 15px;
	text-decoration:none;
	background-image:url(images/topnav_hover.png);
	}
	
	/*div:hover { background:url(/images/stuff.gif) }

Edited by Ezzaral: Added code tags. Please use them to format any code that you post.

Attachments Screen_shot_2011-08-24_at_4.02_.41_PM_.png 12.54 KB
2
Contributors
1
Reply
2
Views
5 Years
Discussion Span
Last Post by Felixius
0

Hi AlvinMedia,

I am not 100% sure, and am shooting from the hip here...

You say if the text is too short it gets cut off.

um... you have a block displayed for your a tags then you have padding to fit around the text... hmmm...

if you give your a tag some fixed widths and heights... say the same as the li tag... and possibly remove the padding... it might give the background image space to be shown. Again, not 100% sure here...

Hope it works!

Felixius

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.