ansaurus

Question

Answer 1

A:

IE6 is no good at working out percentages is about the size of the problem:

http://www.positioniseverything.net/explorer/percentages.html

You'll notice that if you slowly resize the window in IE6 and the page reflows, every now and again your 2 divs will magically sit on the same line as you wanted.

I've always found a good reliable workaround to this issue (aside from not using percentages) is to make sure that the total is always 99%. Obviously that can compromise the layout sometimes, but using a conditional-commented IE6 only rule minimises the effect.

Will Prescott 2009-12-18 12:43:03

Answer 2

A:

IE6 is rubbish at percentages when in Standards mode.

The positioniseverything article is probably one of the most unreadable on the Internet, but the simple answer is that there is no simple answer.

Width 99% would solve the problem, but anyone working on a designer layout won't be able to tolerate that kind of error.

My solution is to calculate the percentages yourself, using expressions, in your IE stylesheet.

My test case is this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en-gb">
<head></head>
<body>
    <div style="width:50%;float:left">Left</div>
    <div style="width:50%;float:left">Right</div>
</body>
</html>

which jumps all over the shop when you resize the browser window.

And I can amend it for IE6 like so:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en-gb">
<head></head>
<body>
    <div style="width:expression(this.parentNode.offsetWidth/2);float:left">Left</div>
    <div style="width:expression(this.parentNode.offsetWidth/2);float:left">Right</div>
</body>
</html>

kenneth 2010-02-04 09:54:34

ansaurus

tags:

views:

answers:

Percentage layout not adding up in IE6

related questions