Previous Message
Next Message

IE issue - DIV's not going full width

Sent by Ingo Chao on 15 May 2005 22:10


Jonathan Duncan schrieb:
> Thank you Ingo, the position:relative at least got the logo and nav
> to align to a different div which makes them closer to being in the
> center.  However I am also trying to get them to stretch out to fill
> the whole page horizontally.  These two div have no width that I can
> see and they are not being limited by anything that I can tell so I
> would think they should expand to fill the screen like they do in
> Firefox.  Any ideas why they do not?
> Jonathan
>

Jonathan, I've tried to isolate a rough approximation of the problem, as
I understand it, but I may be wrong.

http://www.satzansatz.de/cssd/tmp/jonathan.html

Note the slight difference in Op+IE versus FF.

[ for those who still believe in code snippets on css-d:

body { margin: 0 auto; width: 250px; border:5px solid blue; padding:0;
height:500px;}

#p-logo { background-color: red; position: absolute; top: 0; left: 0;
right:0; height: 40px; }

#p-logo a { display: block;width: 100%;   }

<body>
   <div id="p-logo"><a href="#">Logo</a></div>
   </body>
</html>
]

In your example, the parent has the same width as body, not shown in my
test case. The current ancestors of a. p. #p-logo aren't positioned.

I was wrong in my earlier post, sorry.  Op, IE, FF are indeed
positioning with respect to the containing block, and that's <html>, not
<body> (offset top:0 left:0; starts at the same location).

So where is the bug?

AFAIK, the block level link gets 100% from its parent of width auto,
therefore, #p-logo should gain 100% of the width of its containing block.

But Opera8.01 and IE6 share the same bug: the do offset an absolute
positioned element with respect to the containing block, yes, but do
calculate a percentage width with respect to the parent (=body in your
case>.

But what if the parent is not the ancestor?
see http://www.satzansatz.de/cssd/tmp/apboxpercentagewidth.html
That's still CSS1.
________________

IMHO, the bug cannot be fixed without structural changes to your code.

As you can't take the logo out of <body></body> to prevent the
relational bug, you'll have to move the centering for body to another
page wrapper, and take the logo out:

http://www.satzansatz.de/cssd/tmp/jonathanmod.html

[again a snippet
<body>
<centredwrapper>pagecontent...</centredwrapper>
<aplogo></aplogo>
</body>
]

But that will not be fun to do within your complex page.

I would love to hear other opinions concerning your problem on this list.

Ingo

______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Previous Message
Next Message

Message thread:

Possibly related: