Safari margin problem...

[Derleek]

Ok, so i'm making a site, and i'm making a menu that needs very precise margins and what not.

 

It looks fine in firefox, but in safari the menu is shifted up by about 1px... i've never experienced this problem in safari before so i'm at a loss... i've tried the following safari hack but firefox renders the menu box one px too low. (example)

 

Safari hack:

#menu_container ul
{
margin-top: -9px;
}

#menu_container ul
{
# //safari hack
margin-top:-10px;
}

 

here is the html for the menu:

<div id="menu_container">
			<div id="menu_corner"></div>
			<ul id="menu">
				<li class="do">We Do</li>
				<li class="done">We've Done</li>
				<li class="got">We've Got</li>
				<li class="listen">We Listen</li>
			</ul>
		</div>

CSS for menu:

#menu_container ul
{

margin-left:230px;
margin-top:-9px;
}

#menu li
{
list-style-type: none;
display: inline-table;
background-color: white;
border: 1px solid #E2E2E2;
padding-right: 5px;
padding-left: 3px;
height: 15px;
font-size:9px;
color: gray;
line-height: 15px;
}

#menu_container
{
position: absolute;
width: 500px;
margin-top: -9px;
left: 50%;
margin-left:-250px;
}

 

I'm honestly at a loss on this one... can anyone explain whats going on here?  Or perhaps propose a way to write a line of CSS that only affects safari? I can give you more detailed code if need be...

 

thanks,

Derleek

[Floydian]

A lot of times, these things are caused by elements around the problem area. I'd bet that putting just the markup and css you have on a page by itself, would cause your markup to display correctly.