UL hell

HTML & CSS
1

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>
2

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

3

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

4

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.

5

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

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: