ansaurus

Question

Answer 1

A:

The problem is caused by there being no doctype. This causes IE to render the HTML in Quirks mode. If you are using IE 8 you can select developer tools from the tools menu and it will say what the document mode is as the top of the developer tools window.

Try this markup instead:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
</head>
<body>
    <div id="container" style="position:relative; width:100px;">
        <div id="content" style="position:relative; margin-right:10px;"></div>
        <div id="rightBar" style="position:absolute; right:0; top:0; bottom:0; width:10px;"></div>
    </div>
</body>
</html>

Also you don't need the px on rightBar's bottom as 0 will anchor it.

moose56 2010-09-08 12:26:25

this is all just this little code

marius 2010-09-08 12:27:29

Answer 2

+1 A:

First off ... you have a width set on rightBar, so the width won't change.

You also have Top and Bottom set to 0 ... I have no idea how that is working.

If you want the height the same, set it to a value.

Martin 2010-09-08 12:31:21

noone said i would like to change the width ... i'd like to change the height of the rightBar. Top and bottom to 0 makes it streched all over the parent container.. it works on FF and CHROME but not on IE... IT isn't possible to set the height to a fixed value because of the content ... If the text in the content div gets big, the rightBar has to expand.... thats the deal

marius 2010-09-08 12:36:22

Mark Schultheiss 2010-09-08 12:46:34

Answer 3

A:

This is an IE6-specific issue. It works fine in IE7, IE8 and IE9.

First bit of advice: Drop support for IE6; it's more hassle than it's worth.

But if you must support IE6, the problem is that IE6 can't work out how tall an element is unless you explicitly specify the height, so it doesn't know what to do with bottom:0. If you add a height style to the outer div, the inner one will suddenly work out where the bottom needs to be.

Adding height:0 will also not cause any probems in IE6 because it actually treats it as a min-height, so it'll resize if needed. Unfortunately, other browsers will treat the height style correctly, so you can't fix it for IE6 without breaking it for other browsers.

If you must make it work in IE6, you'll need to use browser hacks to make the fix invisible to other browsers. Ugly stuff.

Spudley 2010-09-08 12:39:32

thx dude, that's it.. didn't know that i still got IE6 on my pc... anyway ty :-)

marius 2010-09-08 12:44:10

ansaurus

tags:

views:

answers:

CSS Positioning - IE problem

related questions