Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie

ie7 Css issue

Options
  • 28-11-2008 3:43pm
    #1
    comer_97
    Closed Accounts Posts: 522 ✭✭✭


    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;
}


Comments

  • Options
    #2
    stevire
    Registered Users Posts: 1,512 ✭✭✭stevire


    Add this to your css:
    ul.navigation li{
float:left;
list-style-type:none;
white-space:nowrap;
}


  • Options
    #3
    comer_97
    Closed Accounts Posts: 522 ✭✭✭comer_97


    you absolute legend, that works perfectly.

    thanks a million!


Advertisement