CSS fails to center in Safari - HTML Forums

Flick · 11-12-2009, 10:01 AM

Hi guys, I'm currently building a rather ambitious website with some friends. So far I've got the basic structure to work nicely in firefox, just tried the site in safari and and spry navigation bar isn't displaying correctly. Not only is it not centered, its also a completely different size. The first attachment is what it looks like in safari and the second one is how its meant to look.

This is the CSS I'm using so far -

The CSS for the div that the spry menu is housed in,

Code:

#hoznav {
	background-image:url(/styles/HAS/theme/images/div.gif);
	background-repeat:repeat-x;
	border-color:#D7D3CA;
	border-style:solid none;
	border-width:1px 0 2px;
	height:36px;
	margin:0 auto;
	position:absolute;
	top:185px;
	width:100%;
}

The CSS for the menu

Code:

ul.MenuBarHorizontal
{
	margin: 0 auto;
	padding: 0;
	list-style-type: none;
	font-size: 100%;
	cursor: default;
	max-width:720px;
	min-width:300px;
	width:100%;
}

ul.MenuBarHorizontal li
{
	border:1px solid #D7D3CA;
	cursor:pointer;
	float:left;
	font-size:100%;
	line-height:3em;
	list-style-type:none;
	margin:0;
	padding:0;
	position:relative;
	text-align:center;
	vertical-align:middle;
	width:17%;
}

Pegasus · 11-12-2009, 11:42 AM

What doctype are you using for the page? What are the default setting you have for font size and such for Safari? Either one of those two things can affect the appearance of a page.

Flick · 11-12-2009, 12:05 PM

Code:

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

The default font size is set to 65% (10px)

Pegasus · 11-12-2009, 01:14 PM

Try removing the float: left from the li.