CSS problem...

riddlermarc · 4 May 2006 at 16:44

I've not really done a lot of pure CSS stuff before, I'm more a heavy coder than a designer. I'm working on a personal project and wanted to do the whole CSS/no tables thing but I can't get the navigation to work on the following page: http://www.riddlermarc.co.uk/test/index.html (stylesheet - http://www.riddlermarc.co.uk/test/styles/styles.css)

In Firefox it is fine, but in IE the navbar sections don't fit 100% together, there is a small gap between each one :confused:

The code section in question is:

Code:

	<div id="contentleft">
	<ul id="navlist">
	<li><a href="one.php" title="One">One</a></li>
	<li><a href="two.php" title="Two">Two</a></li>
	<li><a href="three.php" title="Three">Three</a></li>
	<li><a href="four.php" title="Four">Four</a></li>
	<li><a href="five.php" title="Five">Five</a></li></ul>
	</div>

.. and the corresponding styles:

Code:

body {
	text-align:center;
	}

#frame {
	width:710px;
	margin-right:auto;
	margin-left:auto;
	margin-top:10px;
	padding:0px;
	text-align:left;
	background: #516D91
	}
	
#contentleft {
	width:120px;
	float:left;
	background:#516D91;
	}
	
#contentleft ul {
	margin: 0;
	padding:0;
	list-style-type: none;
	font-family: Arial, Helvetica, sans-serif;
	}
	
#contentleft a {
	display: block;
	padding: 3px;
	background-color: #036;
	}
	
#contentleft a:link, #navlist a:visited {
	color: #EEE;
	text-decoration: none;
	}
	
#contentleft a:hover {
	background-color: #369;
	color: #fff;
	}

#contentcenter {
	width:590px;
	padding:0px;
	float:left;
	background:#DEDEDE;
	}
#contentheader {
	background:#516D91
	}

This is just a proof-of-concept page, the nav will look totally different but I don't want to work on that until I get the spacing problem fixed

Any ideas, please? Screengrab:

iCraig · 4 May 2006 at 16:53

Code:

li {
  margin: 0px;
  padding: 0px;
}

?

riddlermarc · 5 May 2006 at 09:21

iCraig said:
Code:

li { margin: 0px; padding: 0px; }

?

Nope, still doesn't work I'm afraid but interestingly if I remove the " font-family: Arial, Helvetica, sans-serif;" from #contentleft ul then it works.. it's only when I start messing with fonts/sizes that it b0rks :confused:

iCraig · 5 May 2006 at 10:03

Something is pushing it out.

Put this at the top of your CSS.

Code:

* {
  padding: 0px;
  margin: 0px;
}

This will tell any element that you haven't manually given a margin or padding, to drop to zero. This will help you squash any mystery sizing out. As some elements have default padding, <ul> for example.

riddlermarc · 5 May 2006 at 11:31

Odd, I tried what you suggested but to no avail.. then I removed the font settings from #contentleft ul and put them in the body style and it's fine. It means the #contentleft is inheriting the font styling, as is the rest of the page so I'm going to have to explicitly set the font settings for all other elements.

A kludge, but it works!