Forum Moderators: not2easy
im making a website for myself and have hit a snag with the navigation. it looks fine in firefox, but internet explorer (as ever) displays it incorrectly.
i want the tabs to be the same width apart and also to fill the width of, and be flush with, the white container. ie just goes crazy with it.
here's the code i have used for the navigation (sorry about the size).
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Pge Title</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<style type="text/css" media="screen">
/* CSS Document */
* {
border: 0;
margin: 0;
padding: 0;
}body {
margin-top: 9px;
background: url(images/back.jpg) top repeat #e0e0e0;
font-family: Trebuchet MS;
font-size: 12px;
color: #333333;
}h1 {
font-size: 22px;
color: #cBf76F;
}p {
margin-top: 14px;
margin-bottom: -2px;}
ul {
margin-top: 15px;
margin-left: 30px;
}#container {
height: 638px;
width: 781px;
margin: auto;
background-color: #fff;
}#textcontainer {
height: 500px;
width: 739px;
margin: auto;
}a:link {color: #0f0;}
a:visited {color: #00f;}
a:hover {color: #f00;}
a:active {color: #000;}
a:visited:hover {color: #669900;}#navigation {
text-align: center;
background-color: #e0e0e0;
}#navigation ul {
height: 25px;
padding-top: 8px;
width: 100%;
margin-top: -1px;
margin-left: -2px;
}#navigation li {
display: inline;
margin-top: 10px;
padding: 5px 30px;
background-color: #699b00;
}#navigation li.current {
background-color: #a2ef00;
color: #699b00;
}#navigation li a {
color: #a2ef00;
text-decoration: none;
font-weight: bold;
}#navigation li a:hover {
color: #FFFFFF;
background-color: #cbf76f;
}
</style></head>
<body>
<div id="container"><img src="images/nlogo.jpg" width="781" height="130" />
<div id="navigation">
<ul>
<li class="current">Home</li>
<li><a href="aboutme.html">About Me</a></li>
<li><a href="#">Website Work</a></li>
<li><a href="#">Graphics Work</a></li>
<li><a href="#">Misc. Work</a></li>
<li><a href="contact.html">Contact Me</a></li>
</ul>
</div>
<div id="textcontainer">
<h2>Welcome blah blah</h2>
<p>some text in here...</p>
<p align="center">©...</p>
</div>
</div>
</body>
</html>
[mod edit]summarised code added
[edited by: SuzyUK at 9:48 pm (utc) on May 26, 2009]
[edit reason] ooops sorry no URLs : see TOS #13 [WebmasterWorld.com] [/edit]
Please post your full css and a summarized version of your html layout. That way we could give you a much better answer.
@CSS_Kid, you're too fast :) - the OP is now amended with the full code
