Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    May 2012
    Posts
    17
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Question in output width of four dynamic <li> of same class is not same

    i had created four dynamics li which are sharing same class. But in the output the width of all the li is not same.You can simply try it in your browser.

    why is this happening?how to correct it? thanks in advance

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    
    <style>
    body{
    margin:0;
    padding:0;
    }
    
    .div-nav{
    width:100%;	
    background-color:#CC3399;
    overflow:hidden;
    
    padding:0;
    }
    
    .ul-nav{
    list-style:none;
    margin:0;
    padding:0;	
    width:100%;
    }
    
    .ul-nav li.space{
    background-color:black;
    width:0.2%;
    height:40px;
    margin-right:20px;
    margin-left:20px;
    float:left;	
    padding:0;
    }
    
    </style>
    </head>
    <body>
    <div class="div-nav">
    <ul class="ul-nav">
    
    <li class="space"></li>
    <li class="space"></li>
    <li class="space"></li>
    <li class="space"></li>
    
    </ul>
    </div>
    
    </body>
    </html>

  • #2
    Regular Coder Candygirl's Avatar
    Join Date
    Apr 2008
    Location
    Switzerland
    Posts
    184
    Thanks
    3
    Thanked 56 Times in 56 Posts
    Hello,

    This happens because you use the unit percent in your width.

    For exemple, on a 1400px width screen, 0.2% represents 2.8px. As it's not an integer most of the browsers will use 3px and 2px in order to respect the width. If you have a look in IE6 or 7 you will see that all your li are same width because those old browsers are always making a mathematical rounding starting 0.5 with no respect to make sure that 50% + 50% will not get wider or thiner then the total width.
    "Imagination was given to man to compensate for what he is not;
    a sense of humour to console him for what he is."
    -Francis Bacon


  •  

    Tags for this Thread

    Posting Permissions

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