CODEWITHSUNDEEP
cssmacoscross-browserhtml
qpingu
qpingu

Reputation: 960

Compatibility problem on Mac browsers

I'm designing a little website (you can see it here), but I'm getting conflicts with something going from Mac based web browsers to PC based browsers. It seems to pop up on all Mac browsers and not on PC browsers. I have tested on Safari and Firefox on the Mac and Firefox/Internet Explorer on PC.

The image on the left is from a PC, the one on the right is from a Mac. As you can see there is a one pixel or so gap being placed under the menu. The menu should be flush with the main content.

https://forums.adobe.com/servlet/JiveServlet/showImage/2-2299788-12861/2up.jpg

Why is it doing this? I have tried everything I can think of without success.

Upvotes: 0

Views: 246

Answers (2)

Boris Zbarsky
Boris Zbarsky

Reputation: 35074

It's pretty simple. You style your <div id="menu"> to be 50px tall. But the height of the <ul> inside it depends on the font metrics, as do the heights of its kids (which have the backgrounds). So depending on the exact fonts used and on the exact font rasterization algorithm the height will vary. At the same time, you add some top margin which is trying to make the boxes there be flush with the box below... but the size of that margin needs to depend on the exact sizing of the text.

You have several options. You could switch to auto height on the menu and stop using floats to lay things out next to each other; use display:inline-block instead. You could switch to auto height on the menu and use a clearfix to make sure that the menu is tall enough to contain the floats. You can explicitly set more heights and line-heights to make sure that things will add up no matter what the font is (but this will break terribly for some users; your 50px height just won't work for a user who's using a 60px font because they don't see very well).

Upvotes: 1

ullmark
ullmark

Reputation: 2479

Try setting the line-height of the list in the menu to 16px.

#menu ul {
line-height: 16px;
}

Upvotes: 1

Related Questions