[NickToye]

Hi,

Can anyone help me here, I have created a nav list but to make it fit into the space below the banner I have had to use em and a value of 7.17em for the width. I'm not sure if this is the correct way to go, as it breaks in IE/Win.

Here is my code:

#navWrapper {
	margin: 0 auto;
	padding: 0;
	width: 800px;
	height: 21px;
	}

#nav {
	float: left;
	margin: 0 auto;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	background: #E03A3E;
	
	}
	
#nav li {
	float: left;
	margin: 0;
	padding: 0;
	font-family: "Lucinda Grande", sans-serif;
	font-size: 85%;
	border: 1px solid #000000;
	border-right: none;
	}
	
#nav a {
	float: left;
	display: block;
	margin: 0 0px 0 0;
	padding: 4px 0px;
	width: 7.17em;
	color: #FFFFFF;
	text-decoration: none;
	text-align: center;
	background: #16478A url(img/off_bg.gif) repeat-x top left;
	}
	
#nav a:hover, body#home #t-home a {
	color: #FFFFFF;
	background: #E03940 url(img/on_bg.gif) repeat-x top left;
	}
	
#t-links a { border-right: 1px solid #000000;}
	

Link

Many thanks in advance

[pgo]

Breaks in FF, too, when you up text sizes.

If I were you, I'd define the width of the nav box and each button in pixels - that way the text would scale vertically. The text may break out of the box horizontally, but at least you could get two or three sizes up without it breaking...

[NickToye]

Yeah when I defined it in pixels it didn't fit into the 800px area