...

View Full Version : IE7 stupid calculation.



Jahren
11-25-2009, 09:07 PM
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:


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

Excavator
11-25-2009, 09:33 PM
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. (http://www.pmob.co.uk/temp/onepxjog.htm)

Have a look at these 50% wide floated elements -
<!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.

abduraooft
11-26-2009, 01:12 AM
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 (http://www.alistapart.com/articles/doctype/) to expect any standard behaviour from IE

abduraooft
11-26-2009, 01:13 AM
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 (http://www.alistapart.com/articles/doctype/) to expect any standard behaviour from IE

Jahren
11-26-2009, 03:57 PM
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

Jahren
12-07-2009, 02:04 PM
bump ?

bcarl314
12-07-2009, 02:16 PM
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.




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:

Jahren
12-07-2009, 06:14 PM
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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum