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 8 of 8
  1. #1
    Regular Coder
    Join Date
    May 2009
    Posts
    143
    Thanks
    14
    Thanked 1 Time in 1 Post

    IE7 stupid calculation.

    Hi, just wondering.
    Why does 50% of 223pixel = 111px in Firefox
    and 50% of 223pixel = 112px in IE7?

    IE8 shows 111 so I believe its a fixed bug isn't it?

    test case:
    Code:
    <html>
    <body>
    <div style='width:223px;'>
       <div style='width:50%; float:left;'>LEFT</div><div style='width:50%; float:left;'>RIGHT</div>
    </div>
    </body>
    </html>
    Last edited by Jahren; 11-25-2009 at 10:10 PM.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,744
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Since there are no 1/2 pixels, it's up to the browser default to round up or down.
    The question is, how to set that default so all browsers wil round the same.

    Here's a similar problem.

    Have a look at these 50% wide floated elements -
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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 type="text/css">
    html, body {
    	font: 100.1% "Comic Sans MS";
    	background: #FC6;
    }
    * {
    	margin: 0;
    	padding: 0;
    	border: 0;
    	outline: 0;
    }
    #container {
    	width: 1001px;
    	margin: 30px auto;
    	background: #999;
    	overflow: auto;
    	font-size: 0.8em;
    }.floated{
      width: 50%;
      float: left;
    }
    </style>
    </head>
    <body>
        <div id="container">  
                <div class="floated">
                    <p>
                        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                        aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                        sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
                        nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
                        duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                    </p>
                </div>
            <div class="floated">
                <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                    aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                    sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
                    nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
                    duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                </p>
            </div>
        <!--end container--></div>
    </body>
    </html>
    The only solution I know of is to make sure and avoid odd sizes.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Why does 50% of 223pixel = 111px in Firefox
    and 50% of 223pixel = 112px in IE7?

    IE8 shows 111 so I believe its a fixed bug isn't it?
    How do you mesure that, without even a border set to them? Anyway, you need to add a valid DOCTYPE at the top to expect any standard behaviour from IE
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Why does 50% of 223pixel = 111px in Firefox
    and 50% of 223pixel = 112px in IE7?

    IE8 shows 111 so I believe its a fixed bug isn't it?
    How do you mesure that, without even a border set to them? Anyway, you need to add a valid DOCTYPE at the top to expect any standard behaviour from IE
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    Regular Coder
    Join Date
    May 2009
    Posts
    143
    Thanks
    14
    Thanked 1 Time in 1 Post
    I have a strict doctype
    I always work with liquid design,which means, it will fit ANY monitor resolution including odd widths..

    IE8 fixed this issue by going with the flow.
    There's gotta be a standard W3C for this.

    Anyone got a way to keep this from happening besides using fixed widths? :P

    edit : adding 1px paddding-left wont work :S
    Last edited by Jahren; 11-26-2009 at 05:26 PM.

  • #6
    Regular Coder
    Join Date
    May 2009
    Posts
    143
    Thanks
    14
    Thanked 1 Time in 1 Post
    bump ?

  • #7
    Mega-ultimate member
    Join Date
    Jun 2002
    Location
    Winona, MN - The land of 10,000 lakes
    Posts
    1,855
    Thanks
    1
    Thanked 45 Times in 42 Posts
    As much as it pains me to say this, it looks like IE7 is technically correct (at least mathematically).

    50% is always rounded up to the next whole number.

    223 / 2 = 111.5, which should round up to 112.



    Quote Originally Posted by Jahren View Post
    Hi, just wondering.
    Why does 50% of 223pixel = 111px in Firefox
    and 50% of 223pixel = 112px in IE7?

    IE8 shows 111 so I believe its a fixed bug isn't it?

    test case:

  • #8
    Regular Coder
    Join Date
    May 2009
    Posts
    143
    Thanks
    14
    Thanked 1 Time in 1 Post
    I've read a little on the subject meanwhile.
    I feel IE7 is wrong and microsoft knows it since IE8 rounds down

    My personal feelings tell me rounding up in web is a little stupid since it will most likely make your element to overflow the parent's width. I mean the child elements uses more than 100% of the parent's width.

    Firefox does something weird with sub-pixels. some pseudo rounding down to the closest tenth decimal.

    My only temporary fix is to use 99% of width instead of 100%
    so 32% 32% 32% = 96%
    the more elements I need to stack inline, the smaller they will be :S


  •  

    Posting Permissions

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