Font Size Too Large When Viewed with Ubuntu Operating System

I have my main menu's font size set to 12px. I've set it in pixels because I don't want people to be able to resize it in their browser settings. Although the font size looks fine in most browser/OS configurations, in a few of them (namely those which include the Ubuntu OS), it looks too large, pushing one of the buttons beneath the rest. What can I do about this? And should I even bother fixing a Ubuntu bug?

#ddcolortabs{
margin-left: 4px;
padding: 0;
width: 100%;
background: transparent;
voice-family: "\"}\"";
voice-family: inherit;
padding-left: 5px;
}

#ddcolortabs ul{
font: bold 12px Arial, Verdana, sans-serif;
margin:0;
padding:0;
list-style:none;
}

#ddcolortabs li{
display:inline;
margin:0 2px 0 0;
padding:0;
text-transform:uppercase;
}


#ddcolortabs a{
float:left;
color: white;
background: #678b3f url(media/color_tabs_left.gif) no-repeat left top;
margin:0 2px 0 0;
padding:0 0 1px 3px;
text-decoration:none;
letter-spacing: 1px;
}

#ddcolortabs a span{
float:left;
display:block;
background: transparent url(media/color_tabs_right.gif) no-repeat right top;
padding:4px 9px 2px 6px;
}

#ddcolortabs a span{
float:none;
}


#ddcolortabs a:hover{
background-color: #8cb85c;
}

#ddcolortabs a:hover span{
background-color: #8cb85c;
}

#ddcolortabs #current a, #ddcolortabs #current span{ /*currently selected tab*/
background-color: #8cb85c;
}

Code (markup):

XHTML

<div id="ddcolortabs">
<ul>
<li style="margin-left: 1px"><a href="" title=""><span>Home</span></a></li>
<li><a href="" title=""><span>New</span></a></li>
<li id="current"><a href="" title=""><span>Revised</span></a></li>
<li><a href="" title=""><span>Tools</span></a></li>	
<li><a href="" title=""><span>Forums</span></a></li>	
</ul>
</div>

Code (markup):

 

That only works in IE. All modern browsers allow the user to change font sizes.

The font size is only loosely related to the OS. Windows, Mac, and the various Linuxes come with different sets of font faces. As long as you use one of the "safe" fonts, there's no problem.

The real issue is the browser. Firefox, for example, allows the user to ignore author-set values. Have you checked your configuration(s)?

cheers,

gary

 

Is that why its better to have font sizes as em ? font-size:1em;

??

 

Generally, that is one reason. If you set body's font size to 100%, that defines the base size as the user's preferred size. Then use ems for any elements that might differ from the inherited value.

There are other reasons, but these are the primaries.

cheers,

gary

 

Ah . . . So, if I denote font size in pixels, people with other browsers will still be able to change the font size?

Which font do you recommend? I use helvetica, arial and sans-serif, because I thought that these were web-safe. Am I wrong?

My body's font size is set to 84%. My menu's font size is set to 12px. The problem is with my menu's font size, and the problem only occurs with the Ubuntu operating system. The browser doesn't seem to matter.

Do you think that using em will fix my problem? I'll give it a try . . .

 

This problem's fixed now, guys.

I made a mistake . . . It seems that all of the Ubuntu OS/browser configurations that were giving me the problem were doing so because the browser fonts had been changed.