PDA

View Full Version : Difference in padding between firefox and safari



jcdevelopment
Sep 21st, 2009, 05:22 PM
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
Sep 21st, 2009, 05:50 PM
Start your CSS with:
*{margin:0;padding:0;}
then adjust the way you want.

jcdevelopment
Sep 21st, 2009, 05:53 PM
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
Sep 21st, 2009, 05:57 PM
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
Sep 21st, 2009, 06:28 PM
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
Sep 22nd, 2010, 03:58 PM
Would love to know if a fix for the left/right part was found. I constantly have these differences between safari and firefox.

Janszoon
Mar 1st, 2011, 10:02 PM
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
Mar 1st, 2011, 10:43 PM
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.