CSS - Best Way To Make Font-size

People viewing my site at 120 dpi are seeing misaligned text and layout, whereas people viewing the site at 96dpi can see it properly.
I'm using "em" instead of pixels when setting font sizes in CSS.
The site has fixed length and width, do I HAVE to allow it to resize itself?

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

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/

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> 

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?

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?

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

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?

<!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??

Hi

I have applied this style to a drop down. However, the font size only appears at 10px in FF and not IE. Any ideas why?

<option style="font-family: Verdana;
background: #E0EAF8;
font-size: 10px;" value="link">link text</option>

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

How can I randomize text size on a website? Like the ones done with the "tags" found on many wordpress blogs? Nothing too crazy, I just want to display words randomly and have some of the text bigger than others.

I've read several books such as Dan Cederholms, "Web standard solutions" and Eric Meyers on CSS, but I've yet to come across anything that delves into the specifics between declaring font-size attributes of px, %, em. I've always kind of used px for my sites, but I've seen some sites that use percentages and others that use em. What are the best uses for each one? How exactly does the % and em know what size to be?

FYI: I didn't mention 'pt' because I do in fact know the purpose of it for printing web documents.

Feel free to discuss or even post a great link that covers everything.

Thanks!

I've read several books such as Dan Cederholms, "Web standard solutions" and Eric Meyers on CSS, but I've yet to come across anything that delves into the specifics between declaring font-size attributes of px, %, em . I've always kind of used px for my sites, but I've seen some sites that use percentages and others that use em. What are the best uses for each one? How exactly does the % and em know what size to be?

FYI: I didn't mention 'pt' because I do in fact know the purpose of it for printing web documents.

Feel free to discuss or even post a great link that covers everything.

Thanks!

Hi there,

I have a font size problem. Basically, some of the text on the page appears as size 14 verdana, where as the other text appears how i want it.

I want the text to be displayed as 11px tahoma.

This is what i am using:
PHP Code:
 BODY {    
    margin:0px;
    padding:0px;
    font-family: tahoma, verdana, arial;
    font-size: 11px;
    
} 





Also, some text is in a <p> tag. How do i define that?

Many thanks