navbar fun

[Dan]

Here is my css:

#nav1{
	width:960px;
	margin: 0 auto;
	margin-bottom:4px;
	margin-top:5px;
	
	background-color:#737373;/*fallback*/
	
	background-image: -moz-linear-gradient(90deg, #737373, #242424 38px);
	background-image: -webkit-linear-gradient(90deg, #737373, #242424 38px);
	background-image: -o-linear-gradient(90deg, #737373, #242424 38px);
	background-image: -ms-linear-gradient(90deg, #737373, #242424 38px);
	background-image: linear-gradient(90deg, #737373, #242424 38px)
}
#nav1 li{display:inline;float:left;position:relative;text-align: center;} /*inline-block is necessary...why idk*/
#nav1 ul{text-align: center; /* this centers all the list items (within the ul) to the middle of the navbar*/}
#nav1 a{
	display:block;	
	padding:10px 20px; /*ads space around list item text*/
	color: #fff; /*defines li text color*/
}
#nav1 a:link{text-decoration: none;}
#nav1 a:hover{
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	
	background:#AAA; /*fallback*/
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#C4C4C4', endColorstr='#696969'); /*IE (might need "-ms-filter" prefix for older ie versions)(filter destroys border radius)*/
	background-image: -moz-linear-gradient(90deg, #c4c4c4, #696969 38px);
	background-image: -webkit-linear-gradient(90deg, #c4c4c4, #696969 38px);
	background-image: -o-linear-gradient(90deg, #c4c4c4, #696969 38px);
	background-image: -ms-linear-gradient(90deg, #c4c4c4, #696969 38px);
	background-image: linear-gradient(90deg, #c4c4c4, #696969 38px)
}
#nav1 li .special{color:orange;}
#nav1 li .special:hover{
	color:white;
	background-color:#f7ef7c;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F7EF7C', endColorstr='#f0b513'); /*IE*/
	background-image: -moz-linear-gradient(90deg, #f7ef7c, #f0b513 38px);
	background-image: -webkit-linear-gradient(90deg, #f7ef7c, #f0b513 38px);
	background-image: -o-linear-gradient(90deg, #f7ef7c, #f0b513 38px);
	background-image: -ms-linear-gradient(90deg, #f7ef7c, #f0b513 38px);
	background-image: linear-gradient(90deg, #f7ef7c, #f0b513 38px)
}

Here is my html:

<nav>
<div id="nav1" class="rounded">
<ul>
<li><a href="/draft/">Home</a></li>
<li><a href="/draft/company_info.php">Company</a></li>
<li><a href="/draft/product.php">Product</a></li>
<li><a class="special" href="/draft/get_started.php">Get Started! </a></li>
<li><a href="/draft/contact.php">Contact Us!</a></li>
</ul>
</div>
</nav>

Works pretty well and I'm proud of it since I did it all from scratch. I would like to make it centered.

I had it centered a while ago but I was using the "inline-block" method and read that it might not be a great idea to use. so I reworked it to what I think is probably a more traditional way. Any help would be appreciated. I might figure it out on my own though.

EDIT: i mean i guess inline-block works if i take out the float:left; but the compatability view in IE makes it into a vertical list when you click it... so I'm assuming IE6-7 won't render it horizontally... ;;

 

[UndeadDragon]

The best way to display images horizontally in a cross browser way would be to use display: block and float: left together. This is what I do.