1 reply [Last post]
daffy_dowden
Offline
Regular
Northumberland, England
Last seen: 13 years 32 weeks ago
Northumberland, England
Joined: 2004-06-30
Posts: 28
Points: 0

Could any kind individual tell me where the fault lies in this code?

It displays exactely how i want in dreamweaver but not correctly in IE (as always seems to be the case)

The nav bar at the top displays in IE as having a large gap between the first button and the edge of the containing div's. Also the text for the buttons isn't displayed as intended, is this due to the order in which i've specified the properties of the divs?? (like the Love/Hate thing for links)

Here's the code:
CSS Sheet:

html, body{ 
 margin:0; 
 padding:0; 
 text-align:center; 
} 
div#container {
	height: auto;
	width: 600px;
	position: relative;
	top: auto;
	background-color: #FFFFFF;
	display: block;
	border: 1px solid #CCCCCC;
	text-align: left;
}
div#header {
	background-color: #999999;
	display: block;
	margin: 0px;
	padding: 0px;
	width: auto;
	position: relative;
	top: 0px;
	height: 120px;
}
div#navBar {
	display: block;
	height: 20px;
}
div#navBar ul {
	display: inline;
	list-style-type: none;
	vertical-align: middle;
}
div#navBar ul li {
	display: inline;
	border-top: 1px none #FFFFFF;
	border-right: 1px solid #FFFFFF;
	border-bottom: 1px none #FFFFFF;
	border-left: 1px none #FFFFFF;
	padding: 0px;
}
div#navBar ul li a:link {
	text-decoration: none;
	color: #000000;
	background-color: #CCCCCC;
	padding: 5px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
}
div#navBar ul li a:visited {
	text-decoration: none;
	background-color: #CCCCCC;
}
div#navBar ul li a:hover {
	text-decoration: underline;
	background-color: #999999;
}
div#navBar ul li a:active {
	text-decoration: none;
}

Thought i'd show it all and be thorough, just in case
and finally the html
<body>
<div id="container">
	<div id="header"><img src="" width="600" height="100" alt="SiteName.com"><br>
		<div id="navBar">
			<ul>
				<li><a href="#.aspx">Home</a></li>
				<li><a href="#.aspx">Product type 1</a></li>
				<li><a href="#.aspx">Product type 2</a></li>
				<li><a href="#.aspx">Product type 3</a></li>
				<li><a href="#.aspx">Contact Us</a></li>
			</ul>
  		</div>
  </div>
  <div id="content"> ...etc

Thanks in Advance to all who reply.

Daf.

co2
co2's picture
Offline
Leader
UK
Last seen: 13 years 41 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

Strange gaps and akward Font properties

Not quite sure how you want it to look, but have you tried adding:

margin: 0;
padding: 0;

to your div#navBar ul rule?

The next sentence is true. The previous sentence is false. Discuss...