Results 1 to 2 of 2

Thread: problem with font sizes and em

  1. #1
    Join Date
    Sep 2009
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default problem with font sizes and em

    Code:
    <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

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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).
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •