ie7 Css issue

comer_97 · 28-11-2008 2:43pm #1

I have this page / stylesheet (below). It looks fine in all browsers except ie7. It seems to be something like the whitespace issue but I can't resolve it.

does anyone know how to get over this?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
	<link href="test.css" rel="stylesheet" type="text/css" />
</head>

<body>
<!--Container starts below. Container houses all of the content and has a background set to show the borders from the PSD-->
<div class="container">

<div class="nav_6">
	<ul class="navigation">
		<li><a href="index.html">HOME</a></li>
		<li><a href="news.html">NEWS</a></li>
		<li><a href="articles.html">ARTICLES</a></li>
		<li><a href="gallery.html">GALLERY</a></li>
		<li><a href="links.html">LINKS</a></li>
	</ul>
</div>
</div>

</body>
</html>

and this stylesheet

@charset "UTF-8";

* {
	margin: 0;
	padding: 0;
	border-style: none;
	color: #FFFFFF;
	font-size: 11px;
	font-family: Verdana;
}

body {
	background-color: #000;
}

.container {
	width: 812px;
	height: 770px;
	/*background-image: url(images/containerbg.jpg);*/
	margin: 10px auto 10px auto;
	text-align: center;
	padding: 9px;
	}

.nav_6 {
	width: 822px;
	height: 18px;
        text-align: left;
        padding:3px 0 2px 0px;
}

ul.navigation {
	list-style:none;
	margin:0;
	padding:0;
    width: 100%;
}

ul.navigation li a {
	background-color:#000000;
	color:#FFFFFF;
	text-transform:uppercase;
        text-align: center;
	padding:2px;
        padding-right: 60px;
	border:2px solid white;
	margin:0 5px 0px 0;
	float: left;
	display: block;
}

ul.navigation li a:hover {
	color:#000000;
	background-color:#FFFFFF;
	border:2px solid black;
}

ul.navigation li a {
	font-weight:bold;
	color:#ffffff;
	text-decoration:none;
}

ul.navigation li:hover a {
	color:#000000;
}

stevire · 28-11-2008 3:58pm

Add this to your css:

ul.navigation li{
float:left;
list-style-type:none;
white-space:nowrap;
}

comer_97 · 28-11-2008 4:01pm

you absolute legend, that works perfectly.

thanks a million!

ie7 Css issue

Comments