Welcome to the MacNN Forums.

Diggory Laycock · Feb 23, 2004, 08:15 AM

http://monkeyfood.com/design/liststylecss/

Safari doesn't give the list items the vertical padding they should have - or is my css bad? Firefox Renders it properly and IE mostly does.

The HTML and CSS validate against the W3 validator.

here's the code to the page:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    			"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<title>List Styles</title>
		<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
		<link rel="StyleSheet" href="styles.css" type="text/css" media="all"/>	
	</head>
	<body>

	<ul class="navParaClass"> <li><a href="listDocument.php">Documents</a></li> <li><a href="listThirdParties.php">3rd Parties</a></li></ul>

	<p>
	
.navParaClass
	{
	background: #eee;
	color: white;
	
	font-family: "Gill Sans" , georgia, serif;
	
	border: 1px dotted #333;
	padding: 3px;
	
	}
	</p>
	
	<p>	
.navParaClass li
	{
	display: inline;
	
	color: inherit;
	background: white;
	padding: 2em;

	border: 1px dotted black;
		
	margin-right: 1em;
	}

</p>
	
	</body>
</html>

Chris O'Brien · 08:52 AM

I think the problem is the <a>'s. It may well be a bug but watch what happens if you type something after the <a> tag. I think Safari can't calculate proper heights if the element it's trying to apply the style rule is empty (although it does have childNodes that aren't textNodes...)

Yeah, so type something after the second <a> like

Code:
<ul class="navParaClass"> <li><a href="listDocument.php">Documents</a></li> <li><a href="listThirdParties.php">3rd Parties</a>hi</li></ul>

and see what happens. I suppose putting &nbsp; after the links would work, but it's not really a good fix.

However, adding an extra sttyle rule does seem to work:

Code:

.navParaClass a
	{
			
	color: inherit;
	background: white;
	padding: 2em 0em 2em 0em;
			
	margin-right: 1em;
	display: inline;
			
	}

I dunno - play around with it and see what happens. I haven't studied the CSS spec in full detail so I don't know how this should be handled, but it does look like a bug, I suppose...

Diggory Laycock · Feb 23, 2004, 08:46 AM

Cool - Thanks for the explanation. I'll play around a bit more.