problem with font sizes and em

[mayanktalwar1988]

<style>
body
{
background-color:#d9e8e6;
}

div.mainbox
{
position:fixed;
background-color:#ffffff;
border-style:solid;
border-width:1px;
width:60%;
left:20%;
top:15%;
}

div.one
{
font-size:19.2px;
width:75.4%;
float:left;
text-align:jusitfy;
color:#6e3e04;
min-height:100px;
}
div.headingone

{
font-size:16px;
width:75.4%;
float:left;
background-color:#bababa;

}

div.headingtwo
{
font-size:16px;


float:right;
background-color:#bababa;

}

div.second
{
color:#6e3e04;
position:relative;
float:right;
right:12%;
top:2%;
font-size:19.2px;
min-height:100px;

}

div.secondsecond
{


position:relative;
float:right;
color:#6e3e04;
font-size:19.2px;
min-height:100px;
right:50%;
}
div.oneone
{
font-size:1.2px;

width:75.4%;
background-color:#baecab;
float:left;
color:#6e3e04;
text-align:justify;
min-height:100px;
}

a
{
color:#6e3e04;

text-decoration:none;
font-size:16px;

}

div.justforcolor
{
float:right;
width:24.3%;
background-color:#baecab;
}
h1.one
{
position:relative;
left:30%;
}
</style>




<?php
include("mysql_connect.php");
echo"<div class=\"mainbox\">";
//echo "<a href='create_topic.php'>New topic</a>";
echo "<div class=\"headingone\"> <h1 class=\"one\">cccccccc</h1></div>

<div class=\"headingtwo\"><h1>ccccc ccccccccc</h1></div> ";


$sql = mysql_query("SELECT * FROM category ORDER BY cat_id ");
$i=0;
while($row = mysql_fetch_array($sql)) {
$i=$i+1;
$topics = mysql_num_rows(mysql_query("SELECT * FROM topics WHERE cat_id='".$row['cat_id']."'"));
$replies = mysql_num_rows(mysql_query("SELECT * FROM replies WHERE cat_id='".$row['cat_id']."'"));
if($i%2==0)
{
echo "<div class=\"one\"><a href='topic.php?pagenum=1&id=".$row['cat_id']."'>".htmlentities($row['category_topic'])."</a></div>

<div class=\"second\">".$topics."</div>";
}


if($i%2==1)
{
echo "<div class=\"oneone\"><a href='topic.php?pagenum=1&id=".$row['cat_id']."'>".htmlentities($row['category_topic'])."</a></div>
<div class=\"justforcolor\">
<div class=\"secondsecond\">".$topics."</div>
</div>";
}
}

echo"</div>";
mysql_close($con);
?>






my question is that first the div tag with one and oneone class is not following the fontsize which i declare in as css means it only follows the browser but not the css ...suppose if browser is at 16 px then no matter what value you pass in font size it will remain fix at 16 px...althoug the second and secondsecond class follow the css rule and follow the fontsize laid by css in style tags..where is the prob




and second thing supose if i use em then the problem as above exist but another problem suppose the user change the font size in browser then the layout become abrupt what to do to make layout follow as it was suppose to

[jscheuer1]

Ideally all font sizes should be set in percent. Using em's would be comparable, but some browsers do not correctly calculate the cascading effect of nested em values. When you use percent, a 50% font-size for an element inside an element that already has 50% font-size would be 25% of the size outside both elements.

One's layout should be flexible enough to accommodate user preference in font size. You do want the user to be able to read the text, right? What good is it to have a pixel perfect layout that many people cannot read? It can be helpful to set the size (width and/or height) of containers in em's to accomodate varying text size preferences of users. That way - as the text grows and shrinks, the containers they are in will do so as well.

That said, in most modern browsers there is either a zoom utility or the text resizing function itself has been replaced by a zoom utility, so this is less important than it once was. A zoom utility increases or decreases everything proportionally, images, text, etc. - at least the good ones do.

There are no decimal pixels, like where you have 19.2px -in a case like that, the browser will either follow the default (usually 16px, aka 100%, aka 1em), or do its best at rounding (19px, aka 118.75%, aka 1.1875em).