do Windows and Mac rendering text different?

[Derleek]

So i'm doing a fancy menu for my website.  I'm designing on a mac and developing in firefox.  I have yet to do a lot of the basic cross-browser compatibility crap... but i was shocked when i went onto my friends computer (windows machine using firefox) and the menu was offset by a couple pixels...

 

This baffled me!!

 

My only thoughts were that perhaps mac and pc rendered text differently... but i still have no clue whats up here.

 

Can someone who uses windows perhaps tell me if the menu is messed w/ firefox?

 

any ideas of what could be going on here???

 

-thanks

[Derleek]

furthermore... why does the same thing happen in safari... the margin's appear to be messed up for no reason.

 

this just confuses me i've never had any problems using css in safari

 

are there any hacks to get some css to only effect safari?

[Floydian]

Unfortunately, Mac and Windows does render fonts differently.

 

The problem isn't just isolated to different operating systems. Viewing the same text in firefox (windows) and ie 7 shows that those two browsers render fonts differently, even on the same os, using the same font files.

 

And because of that, the precise measurement of the size of the letters in the font will be different. The way to get around these problems is to make sure that your fonts aren't determining the size of your menu.

 

If you are using the text + left/right padding to determine the size of a menu item, you're going to see different widths in different browsers/os's.

 

You'll need to set an overall width for the menu item instead, and allow a bit of space for the differing font rendering sizes.

[Derleek]

yea... thats what i figured.  Thats unfortunate

 

Approximately how much extra space should I have for a text box w/ 9px font size?  Any one know how much variation there is between different browsers/OS's?

[Derleek]

ok so i'm having a little trouble adjusting the size of text boxes for my menu.

 

Here is the html code.

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

 

I used to have this css code which used the padding and font height to determine the height of the box:

#menu_container li
{
        border: 1px solid #E2E2E2;
padding-top: 2px;
font-size:9px;
}

 

I tried replacing the padding-top:2px with just a 'height: 20px' or something and there was no change in the height of the box.  I guess i figured all i would need to do is adjust the 'height' value for #menu_container li but it doesn't seem to have any effect.

 

What should i use?

 

I've tried '#menu li', '#menu ul li' and '#menu' with a random assortment of other values and what not...

 

any idea's?

[Derleek]

ok so i figured out when i have the <ul> set to "display:inline" it doesn't allow me to adjust the height of the individual elements... is there anyway to get a <ul> to be displayed horizontally w/o using "display:inline"?

[Floydian]

I can think of a couple things to try.

 

display: inline-block;

 

Which is pretty nifty, since it's inline, but acts like a block.

 

padding-top: and padding-bottom: which is of course going to be affected by text rendering size.

 

Placing a block element inside the ul and setting it's height

 

line-height: sometimes will help out

 

and of course, the last resort, but always forces height, is using a 1 px wide transparent image.

 

Hope one of those gets ya

[Derleek]

i'll try inline-block... inline-table worked. to center it vertically i used the whole line-height thing...

 

Thanks!