2 replies to this topic

[Ray (asp769)]

Hello all,

I am a bit baffled by this problem and have stumped others with it. I am using an unordered list to display some images for a masthead and the main nav. The image below is a screen shot of the spacing problems (highlighted due to light colors). I have also included the code below that I'm using to create everything. I have tested it in IE and Firefox with the same problem and have tried every option to clear the margin & padding. Any help or feedback would be very much appreciated.



CSS:

* {
	margin: 0;
	padding: 0;
}

body {
	font: 62.5%/1.6em Arial, Helvetica, sans-serif;
	text-align: center;
	background: #043464;
	color: #000;
}

img {
	border: none;
}

#wrapper {
	margin: 0 auto;
	text-align: left;
	width: 800px;
	background: #FFF;
}

#mastHeadLeft {
	float: left;
	width: 48px;
}

#logo {
	float: left;
}

#logo li {
	list-style-type: none;
}

#mastHeadText {
	float: left;
}

#mainNav {
	clear: both;
	width: 800px;
}

#mainNav li {
	float: left;
	list-style-type: none;
}

#mainNav li a:link, #mainNav li a:active, #mainNav li a:visited {
	display: block;
	width: 111px;
	height: 21px;
	text-align: center;
	background: #FFF url(../images/nav_bg.jpg) no-repeat;
	padding: 4px 0 0 0;
	color: #043464;
	font-weight: bold;
	text-decoration: none;
	font-size: 1.3em;
}

#mainNav li a:hover {
	color: #FFF;
	background: #043464;
}

HTML:

<div id="wrapper">
  <div id="mastHeadLeft"><img src="images/banner_left.jpg" alt="" width="48" height="114" /></div>
  <div id="logo">
	<ul>
	  <li><img src="images/logo_top.jpg" alt="" width="110" height="19" /></li>
	  <li><a href="index.html"><img src="images/logo.jpg" alt="| RH | Home" width="110" height="76" /></a></li>
	  <li><img src="images/logo_bottom.jpg" alt="" width="110" height="19" /></li>
	</ul>
  </div>
  <div id="mastHeadText"><img src="images/banner_text.jpg" alt="" width="198" height="114" /></div>
  <div id="mastHeadRight"><img src="images/banner_right.jpg" alt="" width="444" height="114" /></div>
  <div id="mainNav">
	<ul>
	  <li><img src="images/nav_bar_left.jpg" alt="" width="114" height="25" /></li>
	  <li><a href="#">Who Am I?</a></li>
	  <li><img src="images/nav_spacer.jpg" alt="" width="4" height="25" /></li>
	  <li><a href="#">Portfolio</a></li>
	  <li><img src="images/nav_spacer.jpg" alt="" width="4" height="25" /></li>
	  <li><a href="#">For Hire</a></li>
	  <li><img src="images/nav_spacer.jpg" alt="" width="4" height="25" /></li>
	  <li><a href="#">Resume</a></li>
	  <li><img src="images/nav_spacer.jpg" alt="" width="4" height="25" /></li>
	  <li><a href="#">Contact Me</a></li>
	  <li><img src="images/nav_bar_right.jpg" alt="" width="115" height="25" /></li>
	</ul>
  </div>
  <div id="content">Main Content...</div>
  <div id="footer">Copyright © 2006 | RH | RayHauck.com</div>
</div>

[Adαm]

Try defining the ID in the <ul> tag.

[Ray (asp769)]

tried that, doesn't want to work.