List padding problem

[marcasii]

Hi, I am using a list to diplay a series of links. I have styled a list and have it positioned on the bottom of a div however there seems to be bottom padding on the list items (<li>'s) that I can't get rid of. I want the bottom of the list items (images) on the bottom of the div. The code is:

#topnav {
	position: absolute;
	text-align:right;
	padding: 71px 15px 0 0;
	margin: 0 0 0 198px;
	top:0;
	width:536px; 
	height:28px; 
	z-index:50;
	background-image: url(images/topnavback.gif);
}

#topnav ul {
	list-style-type:none;
	margin:0 0 0 130px;
	padding:0;
}

#topnav ul li{
	display: block;
	margin: 0;
	padding: 0;
	float: left;
	width: auto;
}

Then the HTML:

<div id="topnav">
		<ul>
			<li><a href="default.asp"><img src="images/navh.gif" name="navh" width="55" height="24" border="0" id="navh" /></a></li>		
			<li><a href="about.asp"><img src="images/nava.gif" name="nava" width="69" height="24" border="0" id="nava" /></a></li>
			<li><a href="tech.asp"><img src="images/navt.gif" name="navt" width="124" height="24" border="0" id="navt" /></a></li>
			<li><a href="news.asp"><img src="images/navn.gif" name="navn" width="97" height="24" border="0" id="navn" /></a></li>
			<li><a href="contact.asp"><img src="images/navc.gif" width="58" height="24" border="0" id="navc" /></a></li>
		</ul>
</div>

Any ideas????

 

[BillyRayPreachersSon]

Just a guess, but you should always specify units... And while it may not be necessary for "0" values, it's good practice to do so:

#topnav ul {
    list-style-type:none;
    margin:0px 0px 0px 130px;
    padding:0px;
}

#topnav ul li{
    display: block;
    margin: 0px;
    padding: 0px;
    float: left;
    width: auto;
}

No idea if that will help or not.

Dan

 

[marcasii]

Well... technically 0 is 0 no matter whether it is px, %, ems or whatever. 0 means none at all. Thanks for the suggestion though.

 

[BillyRayPreachersSon]

Did you try the code I gave? As I said, I have no idea if it will work or not, but if you don't try it, you'll never know either.

I'm very well aware of what "0" means, but there a whole lot of other browser quirks that make no sense, so who says that this should either?

Try it, or don't try it. Up to you :/

Dan

 

[marcasii]

I did try it, but to no avail. I do appreciate the suggestion.

 

[BillyRayPreachersSon]

Well - I thought I'd try myself - it didn't make any difference.

However, I did find the solution. If you put everthing from the open "ul" to the closing "ul" on one line - with NO line breaks, it works as expected.

Hope this helps,
Dan

 

[BabyJeffy]

technically 0 is 0 no matter whether it is px, %, ems or whatever. 0 means none at all.

In context, you are talking about how a browser interprets the instruction to set something to "0" not whether it's meaning is the same. Each browser is free to make it's own decisions as to how it handles the instruction - and this is what we call a quirk.

Dan is right when he describes browser quirks as sometimes making "no sense"... as you will find with the most cursory browse through postings in this forum.

Anyway, hope you find a solution that works for you.
Jeff

 

[marcasii]

I have tried placing all elements on one line as you suggested however this didn't seem to fix the problem in my case.

 

[BillyRayPreachersSon]

Strange - it worked for me. Here's what I had:

<div id="topnav">
<ul><li><a href="default.asp"><img src="images/navh.gif" name="navh" width="55" height="24" border="0" id="navh" /></a></li><li><a href="about.asp"><img src="images/nava.gif" name="nava" width="69" height="24" border="0" id="nava" /></a></li><li><a href="tech.asp"><img src="images/navt.gif" name="navt" width="124" height="24" border="0" id="navt" /></a></li><li><a href="news.asp"><img src="images/navn.gif" name="navn" width="97" height="24" border="0" id="navn" /></a></li><li><a href="contact.asp"><img src="images/navc.gif" width="58" height="24" border="0" id="navc" /></a></li></ul>
</div>

Dan