UL hell

I can not figure out why my menu has a large space on the left and top. Can you?

<html>
<head>
<style type="text/css">
body {
	margin:0;
	padding: 0;
}
#header {
	width: 960px;
	height: 245px;
}
	#header #ht {
		width: 960px;
		height: 150px;
		background-image: url(/images/template/header-top.jpg);
		background-repeat: no-repeat;
	}
	#header #buttons {
		height: 58px;
		margin: 0;
		padding: 0;
	}
	#header #buttons ul {
		list-style: none;
		padding: 0:
		margin: 0;
	}
	#header #buttons li {
		float: left;
	}
	#header #buttons #b1 {
		width: 157px;
		height: 58px;
		background-image: url(/images/template/buttons/home.jpg);
		background-repeat: no-repeat;
	}
	#header #buttons #b2 {
		width: 118px;
		height: 58px;
		background-image: url(/images/template/buttons/register.jpg);
		background-repeat: no-repeat;
	}
	#header #buttons #b3 {
		width: 144px;
		height: 58px;
		background-image: url(/images/template/buttons/login.jpg);
		background-repeat: no-repeat;
	}
	#header #buttons #b4 {
		width: 141px;
		height: 58px;
		background-image: url(/images/template/buttons/post-text.jpg);
		background-repeat: no-repeat;
	}
	#header #buttons #b5 {
		width: 128px;
		height: 58px;
		background-image: url(/images/template/buttons/post-photo.jpg);
		background-repeat: no-repeat;
	}
	#header #buttons #b6 {
		width: 115px;
		height: 58px;
		background-image: url(/images/template/buttons/post-video.jpg);
		background-repeat: no-repeat;
	}
	#header #buttons #b7 {
		width: 150px;
		height: 58px;
		background-image: url(/images/template/buttons/about-us.jpg);
		background-repeat: no-repeat;
	}
	#header #hb {
		width: 960px;
		height: 37px;
		background-image: url(/images/template/header-bottom.png);
		background-repeat: no-repeat;
	}
</style>
</head>
<body>
<div id="header">
	<!-- top image -->
	<div id="ht"></div>
	<!-- navigation -->
	<div id="buttons">
		<ul>
			<li id="b1"><a href="/">Home</a></li>
			<li id="b2"><a href="/register">Register</a></li>
			<li id="b3"><a href="/login">Login</a></li>
			<li id="b4"><a href="/post/text">Post Text</a></li>
			<li id="b5"><a href="/post/photo">Post Photo</a></li>
			<li id="b6"><a href="/post/video">Post Video</a></li>
			<li id="b7"><a href="/about">About Us</a></li>
		</ul>
	</div>
	<!-- bottom image -->
	<div id="hb"></div>
</div>
</body>
</html>

Thank you very much, that was it. Nothing like a fresh pair of eyes. :slight_smile:

The only space I see is this:

#header #ht {
background-image:url(/images/template/header-top.jpg);
background-repeat:no-repeat;
height:150px;
width:960px;
}

plus the default 1em top and bottom margins and the 40px left padding (left margin in older IEs and Operas) on ul. I notice you have failed to enclose your float elements (the list items in the ul). That will cause you endless frustration.

cheers,

gary

Thanks for your reply. I’ve read that article. I’m using Safari 5. I’ve read another one from Sitepoint, I’ve read about overflow:auto. I’ve tried <br /> in every possible configuration. float:left, clear:both, you name it. I’m not having any success. obviously, one simple thing is eluding me and I can’t find it.

I can not figure out why my menu has a large space on the left and top.

Hi,
You closed your UL padding with a colon, it should be a semi-colon.
That is causing it to ignore the margin so you are getting the browser default margin instead.


    #header #buttons ul {
        list-style: none;
        padding: 0[B][COLOR=Red]:[/COLOR][/B]
        margin: 0;
    }

Your welcome. It wasn’t my eyes that found it, it was my editor’s syntax highlighter that colors errors. It was the first thing I noticed when I pasted your code in my editor. :slight_smile: