IE5.5 and absolute position of a div

[david graham]

Hi
I tried the c.i.w.a.s group with the post below, but they must think it is a
trivial or non-issue type of thing as no one replied. Please, it matters to
me - will this group just take a quick look at what I have illustrated at
the web address below. What I want is reassurance that this behaviour is
well known for IE5.5 and that there is a hack available.
I assume IE5 would behave in a similar fashion - anyone got that browser,
and if there are any IE6 users, could you let me know if it gets it correct
like NN7 and Opera7.1




Hi
I have only got NN7, Opera 7.1 and IE5.5 to test with. Anyway, please
have a look at

http://p0c79.phpwebhosting.com/~p0c79/test100.html

The absolutely positioned red div is correctly positioned at the top left
corner of the blue div in NN7 and Opera7.1, but it is situated at the top
right corner of the purple div in IE5.5

Can anyone explain the difference in behaviour with regards to how IE5.5
handles the absolutely positioed red div.

thanks
david

 

[rf]

http://p0c79.phpwebhosting.com/~p0c79/test100.html

The absolutely positioned red div is correctly positioned at the top left
corner of the blue div in NN7 and Opera7.1, but it is situated at the top
right corner of the purple div in IE5.5

Can anyone explain the difference in behaviour with regards to how IE5.5
handles the absolutely positioed red div.

The same thing happens with IE6 in quirks mode.

It's part of the horrendously bad IE5 box model. IE5 gets very confused
placing things inside other things. Your workaround is to absolutely
position the blue div (why are you relatively positioning it anyway?). You
will then also have to specify width: 100% for that div.

Cheers
Richard.

 

[David Dorward]

position the blue div (why are you relatively positioning it anyway?).

Presumably to establish a local context to position things inside so that a
variable height header can be used.

 

[David Dorward]

http://p0c79.phpwebhosting.com/~p0c79/test100.html

The absolutely positioned red div is correctly positioned at the top left
corner of the blue div in NN7 and Opera7.1, but it is situated at the top
right corner of the purple div in IE5.5

I had a similar problem, I'm not certain, but I _this_ I solved it by not
specifying "left" for the abs pos div. I don't have a copy of MSIE to hand
for testing right now though, so you'll have to try it yourself.

 

[andy johnson]

Hi

I have only got NN7, Opera 7.1 and IE5.5 to test with. Anyway, please
have a look at

http://p0c79.phpwebhosting.com/~p0c79/test100.html

thanks
david

You can use browsercam to look at any web page in a multitude of
browsers, it's great.


-
Andy

"There would be a lot more civility in this world if people
didn't take that as an invitation to walk all over you"
- (Calvin and Hobbes)

 

[rf]

Presumably to establish a local context to position things inside so that a
variable height header can be used.

So why position it at all? Just let it flow after the variable height
header. Oh, yes, if one wants to position something *inside* that div then
it must have a position: other than static (so it becomes a containing
element) but then position: relative; without the top: is in order.

My presumption was that the OP is not really clear on what position:
relative really does. Ping the original david: how are we doing here?

Cheers
Richard.

 

[rf]

I had a similar problem, I'm not certain, but I _this_ I solved it by not
specifying "left" for the abs pos div. I don't have a copy of MSIE to hand
for testing right now though, so you'll have to try it yourself.

I do have IE and yes David your solution works admirably (at least for IE6
in quirks mode).

Makes you wonder what those Redmondians were smoking at the time

Cheers
Richard.

 

[david graham]

that

So why position it at all? Just let it flow after the variable height
header. Oh, yes, if one wants to position something *inside* that div then
it must have a position: other than static (so it becomes a containing
element) but then position: relative; without the top: is in order.

My presumption was that the OP is not really clear on what position:
relative really does. Ping the original david: how are we doing here?

Cheers
Richard.

Hi
Thanks for looking into this for me. I relatively positioned the blue div so
that it would act as a containing block for the absolutely positioned red
div. This is a learning exercise for me. The top:200px bit was simply an
after thought, I wanted to be sure that the absolutely positioned red div
was not just ignoring the left:0 and top:0, it was more obvious to me that
the red div was positioning itself correctly if it had to position itself to
the blue div when the blue div was itself under orders to go 200px down the
screen. I can see now that this was introducing an extra, and unnecessary
complicating factor. When I use these ideas for real, the relative div would
have no top or left, it would be allowed to go with the flow.
I will try out the suggestions from David Dorward now.
many thanks
David

 

[rf]

Hi
Thanks for looking into this for me.

That's why we lurk here

I relatively positioned the blue div so
that it would act as a containing block for the absolutely positioned red
div. This is a learning exercise for me. The top:200px bit was simply an
after thought, I wanted to be sure that the absolutely positioned red div
was not just ignoring the left:0 and top:0, it was more obvious to me that
the red div was positioning itself correctly if it had to position itself to
the blue div when the blue div was itself under orders to go 200px down the
screen. I can see now that this was introducing an extra, and unnecessary
complicating factor.

Er, yes.

When I use these ideas for real, the relative div would
have no top or left, it would be allowed to go with the flow.

That's the way to do it

I will try out the suggestions from David Dorward now.

It's the one that works best, he often gets it right

Cheers
Richard.

 

[rf]

You can use browsercam to look at any web page in a multitude of
browsers, it's great.

At a dollar a go? Hmmm. Testing a page should be hand in hand with writing
it. That is, write a couple of lines, test it. I can see $$$'s. Enterprising
people though.

Ok for final bets test check I suppose.

Cheers
Richard.

 

[David Dorward]

Makes you wonder what those Redmondians were smoking at the time

It was a case of...

Why is it treating "left" as "inside the padding"?
I hate MSIE!
Argh!
What if I remove the left?
Blimin' 'eck!
Why does that work!?
OK, breath deep.
No side effects in other browsers that I can see.
OK OK. Lets let it go live then.

 

[rf]

It was a case of...

Why is it treating "left" as "inside the padding"?
I hate MSIE!
Argh!
What if I remove the left?
Blimin' 'eck!
Why does that work!?

It's like a fire. Poke it with a stick long enough and it'l blaze away for
you.

OK, breath deep.
No side effects in other browsers that I can see.
OK OK. Lets let it go live then.

Good move. You've fixed it, don't try to repair it.

IIRC I've found that position: absolute without top: leaves the offending
element within the flow. One would think that the top: should default to 0.
But then again maybe not, should absence of top: negate position: absolute;
but then again maybe I should re-re-read that bit of the spece, but then
again... er maybe it's time for a quiet rum and cola and some bedtime.

Cheers
Richard.