2 replies [Last post]
cssgern
cssgern's picture
Offline
newbie
Last seen: 2 years 8 weeks ago
Timezone: GMT+1
Joined: 2006-05-08
Posts: 10
Points: 0

Why is the spacing in the menu items different in IE and FF? FF shows it the way I want it to be, but IE shows extra spacing, even though I have explicitly set margins and padding values.

<style type="text/css">
#sidebar	{
	width: 170px;
	margin: 10px 0px 0 500px;
	padding: 0px 0px 10px 0px;
	color: #530;
	float: none;
	overflow: visible;
	}

ul {
	list-style: none;
	margin: 0px;
	padding: 0px 10px 15px 10px;
	background: #A8A8A8;
	color: #000;
	}

ul li {
	margin: 0px;
	padding: 0px 0px 0px 15px;
	font-size: .9em;
	}

ul li a	{
	display: block;
	text-decoration: none;
	padding: 0px 0px;
	line-height:20px;
	border-bottom: solid gray 1px;
	margin: 0px;
}



ul li a:active {
	color: #c60;
}

ul li a:link, #sideblurbs ul li a:visited	{
	color: #FFF;
}

ul li a:hover {
	color: #FF9900;
	background: #336699;
}	
</style>
</head>

<body>
<div id="sidebar">
		<ul>
			<li><p>page 01</p></li>
			<li><p>page 02</p></li>
			<li><a HREF="page03.htm">page 03</a></li>
			<li><a HREF="page04.htm">page 04</a></li>
			<li><a HREF="page05.htm">page 05</a></li>
		</ul>		
		</div>
</body>
</html>

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 43 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

[Solved] li difference in spacing in IE and FF

You need to give your li a height as well.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

cssgern
cssgern's picture
Offline
newbie
Last seen: 2 years 8 weeks ago
Timezone: GMT+1
Joined: 2006-05-08
Posts: 10
Points: 0

[Solved] li difference in spacing in IE and FF

Yes, that did it. Cheers, Tyssen