CSS - Font-size, What Is The Best Unit?

hi, someone using foxfire keeps saying the my font is really really tiny, I have my css file like: Code:

body { background: #FFFFFF;
/* for internet explorer */
scrollbar-face-color: #FFFFFF; scrollbar-highlight-color: #FFFFFF; scrollbar-shadow-color: #FFFFFF; scrollbar-3dlight-color: #494969; scrollbar-arrow-color: #494969; scrollbar-track-color: #FFFFFF; scrollbar-darkshadow-color: #494969; 
margin: 0px; padding: 0px; border: 0px; border-top: 1px solid #8E9397; border-left: 1px solid #8E9397; font-color: #494969; font-family: Verdana,Arial,Helvetica; font-size: 8pt; text-align: left; }

a:link,a:active,a:visited { color: #494969; text-decoration: none }
a:hover { text-decoration: underline; color: #494969; position: relative; top: -1px; left: -1px; }
hr { background: transparent; color: #494969; height: 1px; border-width: 0px; }
fieldset { margin: 0; padding: 1px; border: 1px solid #494969; }
legend { margin: 0; padding: 7px; color: #494969; background: transparent; font-weight: bold; }
img { border: 0px; }
table { background: transparent; }
tr { background: transparent; }
td { background: transparent; color: #494969; font-family: Verdana,Arial,Helvetica; font-size: 70%; }
input, textarea, select { color: #494969; font: normal 11px Verdana, Arial, Helvetica, sans-serif; background: transparent; border: 1px solid #494969; border-style: inset; text-align: center; text-indent: 2px; }

form { margin: 0px; padding: 0px; }

any idea on whats wrong? and I would of changed the % to an actual value but I wanted to make it so people can control the size of the font to lager or smaller


here is a preview with that css file in use : http://www.dbznetwork.net/

Well, the title might be a little oversimplified, but I guess it caught your attention

In the past, I always set my font sizes using px. I know that this is not the appropriate standard (since it doesn't allow a user to re-size the font on their end), but I usually did it because it was easiest and most predictable.

Now, I finally want to make the step towards more accessibility and I would like to learn a little bit more about using em's appropriately.

Does anyone have any good advise on how to get started with the following questions: How/where do I set the initial font-size, from which I can use em's? What are the dangers of using em's instead of px? Where could this change impact my usual styling? Are there any good resources/tutorials about this?
Any help/suggestions/ideas are appreciated...

Hello,

I have something has follows:

<div>
...
<table>
...
</table>

</div>

My document font size is 1em.

My div font size is 1.4em.

What should be the font-size in my table to get back to the 1em of the document?

Thanks,
Miguel

built a drop down using array...
i did it this way so if they omit another item in page, the county they selected will reappear..but how do i change the font size of the county names in the array....they appear in such small print???? had posted in php forum, but someone suggested posting here...

PHP Code:
<table width="100%">
                         <? if( ($msgcounty == "e") && (isset($_POST['submit'])) )  {?>
                            <tr>
                            <td><font face="Arial, Helvetica, sans-serif" size="2" color="#ff0000"><b>County:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</b></font>
                        <? } 
                          else 
                          { ?> 
                            <tr>
                            <td><font face="Arial, Helvetica, sans-serif" size="2" color="#000000"><b>County:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</b></font>
                            
                            <? }  ?>
<?    $county = array (1 => 'county',
'Adams County',
'Allen County',
'Wells County',
'White County',
'Whitley');

      foreach ($county as $key => $value)
          { 
if ($countyselecter==$value) {
$optionselected = "selected";
}else{ 
$optionselected = "";
}

$selectcnty.= "<option value=\"$value\" ".$optionselected."> $value</option>\n";}


?><select name="countyselecter"> 
       <? echo $selectcnty;  ?>     

       </select>

</td>
</tr>
</table> 

What is the best way to make compatble text size between browser?

I have a div with a width of 300px, I pasted some text in it, it appears identical with firefox, chrome and safari (the letters are the exact same place), but when it comes to IE 8 (probably 6/7 too), the text is not displayed at the same place.

I need to shrink the fonts for the following classes on blogspot:
post-body
date-header

but for some reason it refuses to shrink below 100% or 1em

Even in firebug, adding properties to element.style, the font refuses to shrink below 100%. Even when i switch off all inherited values for font values it refuses. It does however grow to any size larger than 100%.

Other elements' fonts do shrink to any value, it is only these (and possibly others) that do not shrink.

blogspot in question is http://secretfarts.blogspot.com

Any ideas?

Hello all. THis is my first post here .
I use em to define font-size at my site.

At main css file...
body { font-size: 76%; }
tr, p, div, td, div { font-size: 1em; }

at secondary css file...
div#content_area .contentpaneopen {
font-size: 1.1em ;
line-height: 1.3em;
}

The problem is that the text (content_area) displays correctly on firefox and Opera and wrong on IE. I need em because i use a auto font resize javascript file.I am trying to find what is wrong for days...!

please check at this link...

I am sorry about the greek encoding
Thank you

Is there any way to limit how large a font can become in firefox and internet explorer?

Hi

I'm using a css file for the layout of my website. But I'd like to define the default font size but I can't! I mean the size of the font that's under no special style. I think it's something like:

Code:

.body
{ font-size: 10px; }

Or similar (instead of 10px, small)... anybody knows exactly hoy can I do it?

I have set up a test for several basic CSS-layouts, like 3-column layout, frame-like layout/behaviour etc. and I noticed some strange behaviour in IE.

Here is a number of layouts that I have created:
http://www.duwgati.nl/csstest

In layout samples 1 - 4 the fonts show up smaller than in the samples 5 -7, even though the font-size declaration is identical in all 7 samples. This only happens in IE, in Mozilla/Firefox, the fontsizes are correct in all 7 samples.

Anybody got a clue why this is happening?

I have a style.css file included on all pages
i want to sent default font and size, for all the text where i haven't already set something

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
div.print {
font-family: Arial, Helvetica, sans-serif;
font-size: 2pt;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
color: #FF3300;
letter-spacing: normal;
word-spacing: normal;
}

div.regular{
font-family: "Times New Roman", Times, serif;
font-size: larger;
font-style: normal;
line-height: normal;
font-weight: bold;
font-variant: normal;
text-transform: none;
color:#006600;
letter-spacing: normal;
word-spacing: normal;
text-decoration: underline;
}
-->
</style>

<script language="JavaScript">
function printerFriendly()
{
document.getElementById('div1').className = 'print';
}
</script>

</head>

<body>
<p><a href="javascriptrinterFriendly()">click here to change font</a></p>
<div id="div1" class="regular">
<table id="tab1" width="100%" border="0" cellspacing="1" cellpadding="1">

<tr>
<td>bla</td>
<td>kla</td>
<td>sal</td>
<td>kdef</td>
</tr>
<tr>
<td>iuwhdfqower</td>
<td>ouresgopu</td>
<td>uihwdrfpu</td>
<td>uiwrhgfpuieroi</td>
</tr>
<tr>
<td>oiiudefpuiwerv</td>
<td>iufdgpiuwqerpoi</td>
<td>iuergpuergipou</td>
<td>&nbsp;</td>
</tr>
</table>
<p class="print">&nbsp;</p>
</div>
</body>
</html>

why is the font size not changing nor the color??
only the font changes when th link is clicked??

ok so basically my MAIN browser is Opera which I use it 99% of the time.
Now when I try viewing my site in Internet Explorer, font size looks SMALLER than the one I see in Opera.

Of course the solution would be simple - bump up the font size but then the font looks TOO BIG in Opera.


how to equalize these font sizes in both browsers?


also, is this the correct usage for setting font size?

Code:

body,td,th {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
}
a:link {
	color: #000000;
	text-decoration: none;
}
a:visited {
	color: #000000;
	text-decoration: none;
}
a:active {
	color: #000000;
	text-decoration: none;
}
a {
	font-size: 12px;
}

EDIT:

this message I wrote right now, looks EXACTLY the same in both browsers. Fonts match up perfectly.
what did the admin do for font property?