Member Avatar for AlvinMedia

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) }
Screen_shot_2011-08-24_at_4.02_.41_PM_.png 12.54 KB
Edited by Ezzaral because: Added code tags. Please use them to format any code that you post.
  • 2 Contributors
  • 1 Reply
  • 92 Views
  • 2 Weeks Discussion Span
  • Latest Post Latest Post by Felixius
Member Avatar for Felixius

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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.