Difference in padding between firefox and safari

[jcdevelopment]

I have tried looking around for any solutions to this problem with my menu. Safari seems to add more padding and wraps the menu while FF does not. Is there some way around this?

I am sorry all i have is code, I am working in Zend and using local host as my server.



#nav {
width: 800px;
height: 40px;
margin: 0 auto;
background-image: url(/gfx/nav/nav_bar.jpg);
background-repeat: repeat;
}

#nav ul {
background-image: url(/gfx/nav/nav_bar.jpg);
background-repeat: repeat;
}

#nav li {
float: left;
display: inline;
list-style-type: none;
padding: 20px 7px 0 8px;
background-image: url(/gfx/nav/side_nav.jpg);
background-repeat: no-repeat;
background-position: left bottom;
}

#nav li:first-child {
padding: 20px 7px 0 8px;
background-image: url(/gfx/nav/blank.jpg);
background-repeat: no-repeat;
background-position: left bottom;
}

#nav li a {
font-size: 10px;
color: #343434;
text-decoration:none;
}

#nav li a:hover {
font-size: 10px;
color: #d69408;
text-decoration:none;
}






<div id="nav">
<ul>
<li><a href="">Our Associates</a></li>
<li><a href="">DPM Premiere Listings</a></li>
<li><a href="">Open Houses</a></li>
<li><a href="">Dave Perry-Miller Company</a></li>
<li><a href="">Marketing Your Home</a></li>
<li><a href="">Buying Your Home</a></li>
<li><a href="">Neighborhood Links</a></li>
<li><a href="">Contact Us</a></li>
</ul>
</div>

[Fisher]

Start your CSS with:
*{margin:0;padding:0;}
then adjust the way you want.

[jcdevelopment]

Start your CSS with:
*{margin:0;padding:0;}
then adjust the way you want.

I do that religiously, but for some reason things seam to be different even with margins and padding's set to 0.
Thanks though.

[Fisher]

Kind of figured since you're a senior coder that you would. Thought you just forgot once.

I don't have Safari, so I can't compare to Firefox. Looks the same in IE6 too.



EDIT: Found a couple of posts mentioning padding problems in Safari. The fix appeared to be adding a line-height attribute. Maybe give this a try.

[jcdevelopment]

Kind of figured since you're a senior coder that you would. Thought you just forgot once.

I don't have Safari, so I can't compare to Firefox. Looks the same in IE6 too.



EDIT: Found a couple of posts mentioning padding problems in Safari. The fix appeared to be adding a line-height attribute. Maybe give this a try.

Looks like that helped vertically... but the whole left and right issue is still there. It seems to wrap in Safari but looks good in FF. I am at a loss..

[lbkilgore]

Would love to know if a fix for the left/right part was found. I constantly have these differences between safari and firefox.

[Janszoon]

I'm running into a similar problem too. Anyone have any thoughts on how to resolve it? Any responses would be greatly appreciated? Thanks!

[Janszoon]

I actually figured out what the issue was for the problem I was having. It had something to do with the positioning of the div to the left of the one I was having trouble with. In Firefox, div A was pushing div B to the right, while in Safari div B was sitting on top of div A. But if I defined div A's positioning as absolute, suddenly everything was behaving the same in both browsers. I'm not sure if this is a really obvious solution or if I did a good job describing it but hopefully this may help someone else who runs into a similar problem.