CSS Forum

**RabBell** · 06-28-2006, 05:22 PM

if you look at this page in Firefox

http://www.rbell.net/document1.html

it should look ok, a simple list using some simple CSS to act as a menu

but if you look at it in IE then you'll see that between each menu option there is a thin red line...red because I've coloured the div the menu is in red to highlight the gap....

I've changed the margin and padding on the list, the div, the hyperlinks, the body but I just can't get rid of this 1px margin...

I have a workaround of colouring the div the same as the menu options that way you won't see the gap but this is something I want to find the solution too rather than workaround

any ideas?

**techwench** · 06-28-2006, 06:23 PM

This is what I did that got it to work in IE:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<title>Title</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

	<style type="text/css">
		<!--
		body { margin: 0px; padding: 0px; }
		.menustyling { width: 196px; margin: 0px; padding: 0px; font-family: Arial, Helvetica, sans-serif; }
		#nav { margin: 0px; padding: 0px; }
		#nav li { margin: 0px; padding: 0px; list-style-type: none; }
		#nav li a { display: block; height: 25px; margin: 0px; padding: 7px 0px 0px 3px; font-size: 8pt; font-weight: bold; text-decoration: none; color: #000000; background-color: #A4DFF1; }
		#nav li a:hover { color: #FFFFFF; background-color: #77B8CC; }
		-->
	</style>
</head>
<body>


<div class="menustyling">
	<ul id="nav">
		<li><a href="home.htm">Home</a></li>
		<li><a href="about.htm">About Us</a></li>
		<li><a href="products.htm">Products</a></li>
		<li><a href="services.htm">Services</a></li>
		<li><a href="contact.htm">Contact Us</a></li>
	</ul>
</div>

</body>
</html>

Honestly, I have no idea why moving the font-family to the outter div worked (aside from the fact that IE is a pain in my arse...because it really shouldn't matter)...

**RabBell** · 06-29-2006, 05:36 AM

strange that that should solve it

I figured out a different method to fix it though.
I added the line-height to the #nav li a class and that seemed to work as well

thanks for the help though, it probably is poor practise on my part to have the fonts in that class and not in their own

thanks again