Overflow Auto and Absolute Positioning Problem (IE7)

[booeyOH]

Hello,
I am having a rather frustrating problem. It seems that absolute positioning in IE7 is getting messed up if the element is inside a div container with overflow:auto.

For example look at the following:

<center>
<div id="centerdiv" style="overflow:auto;width:50%;border: 1px solid #000000;">

<div id="insidediv" style="position:absolute;background:green;left:0;top:0;">Container has overflow:auto</div>
&nbsp;
</div>


<center>
<div id="centerdiv" style="width:50%;border: 1px solid #000000;">

<div id="insidediv" style="position:absolute;background:green;left:0;top:0;">Container does not have overflow:auto</div>
&nbsp;
</div>
</center>

Any ideas?

 

[BabyJeffy]

Suggest you try putting position:relative on the enclosing div. Just a thought. Also, does the second example work properly when you add in overflow: none (instead of just not defining it in the style)?

Cheers,
Jeff


[tt]Jeff's Page [!]@[/!] Code Couch

http://www.codecouch.com/jeff/blog/

http://www.coedit.co.uk/

[/tt]

Make sure your web page and css validates properly against the doctype you have chosen - before you attempt to debug a problem!

FAQ216-6094

 

[booeyOH]

Ok, here is the code for the first idea:

[CODE STARTS]

<div id="centerdiv" style="overflow:auto;width:50%;border: 1px solid #000000;position:relative;">

<div id="insidediv" style="position:absolute;background:green;left:0;top:0;">Container has overflow:auto</div>
&nbsp;
</div>


<div id="centerdiv2" style="width:50%;border: 1px solid #000000;">

<div id="insidediv2" style="position:absolute;background:green;left:0;top:0;">Container does not have overflow:auto</div>
&nbsp;
</div>

[CODE ENDS]

It didn't make a difference

And here is the code for the second idea:

[CODE STARTS]
<div id="centerdiv" style="overflow:auto;width:50%;border: 1px solid #000000;position:relative;">

<div id="insidediv" style="position:absolute;background:green;left:0;top:0;">Container has overflow:auto</div>
&nbsp;
</div>


<div id="centerdiv2" style="width:50%;border: 1px solid #000000;overflow:none;">

<div id="insidediv2" style="position:absolute;background:green;left:0;top:0;">Container does not have overflow:auto</div>
&nbsp;
</div>

[CODE ENDS]

It didn't make a change either ((((((

Thanks for the ideas, got any more?

Bryan

 

[Vragabond]

I apologize if I haven't created these pages and tested it out, but I would require some more information. The best option would be if you created an online example of your problem. But here's a few questions to help us help you:

1. What doctype are you using?
2. What is the problem you're experiencing?
3. Do you know that all the content (that is not taken out of the normal document flow) in your containing div is [ignore]/nbsp;[/ignore]. This could cause some problems.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]

 

[booeyOH]

1) This is an HTML document.
2) In FF, regardless of the overflow:auto property being in there, it treats the inner div as a "true" absolute div, positioning it at 0,0 of the window. In IE7, it treats the inner div as absolute RELATIVE to the conatiner div, but ONLY IF it has overflow:auto in it. If you take out the overflow:auto, it treats it as FF does.
3) I don't understand.

Thanks
Bryan

 

[Vragabond]

1. Please post your complete code. HTML documents can have a lot of different doctypes or no doctype at all.
2. What do you mean by saying "true" absolute div? Absolute positioning is relative to the first positioned parent, or if that is not present, to the view port.
3. Absolute positioned elements are taken out of document flow, so they do not interact with other elements. Many times this causes people to experience problems that are actually there by design.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]

 

[booeyOH]

Ok,
I am ignorant of a lot of things about CSS and the correct way to do HTML, so please forgive me.

1) That is my complete code. Just for testing. If it is incorrect, what should it look like?
2) It seems like this contradicts your point #3. If an absolute positioned element is taken out of the document flow, how is it relative to the first positioned parent?
3) Could you possibly put the code into a file, open it in Firefox and open it in IE? This might show you better the problem I am having.

Please feel free to treat me like a beginner, while I am not, there is still a lot I don't know, or may be doing wrong.

Thanks,
Bryan

 

[BillyRayPreachersSon]

That is my complete code

Then expect unpredictable results. You have no opening or closing HTML, HEAD, or BODY tags. You also have no DOCTYPE.

I suggest reading up on DOCTYPEs (Google is your friend), choosing one that suits you, and implementing it. Them, make sure you have proper markup in place, which clearly you do not if that is your complete code as you suggest. Here's a basic shell:

<!doctype html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
</head>

<body>
</body>
</html>

Without that, I'm surprised you see anything at all, as the browser wouldn't know what was what.

It seems like this contradicts your point #3. If an absolute positioned element is taken out of the document flow, how is it relative to the first positioned parent?

No contradiction - you've misunderstood. Just because somethinig has been removed from the normal flow of the document, does not mean it cannot be positioned.

Hope this helps,
Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[booeyOH]

Ok,
So that changed it it a bit. So if this is my complete code:

<!doctype html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="

http://www.w3.org/1999/xhtml">

<head>
</head>

<div id="centerdiv" style="overflow:auto;width:50%;border: 1px solid #000000;position:relative;">

<div id="insidediv" style="position:absolute;background:green;left:0;top:0;">Container has overflow:auto</div>
&nbsp;
</div>


<div id="centerdiv2" style="width:50%;border: 1px solid #000000;overflow:none;">

<div id="insidediv2" style="position:absolute;background:green;left:0;top:0;">Container does not have overflow:auto</div>
&nbsp;
</div>

<body>
</body>
</html>


It renders the same in both Firefox and IE7. So my new question is:

1) Why does it work that "insidediv2" is positioned relative to the entire page, while "insidediv1" is positioned relative to it's parent.

Can you recommend a good book to re-learn a lot of css and HTML stuff. I stopped learning HTML 10 years ago, so I am sure ther is a lot more than doctype that I don't know.

Thanks.

 

[BillyRayPreachersSon]

You need to put your content INSIDE the body tags. Perhaps reading a beginner's guide to HTML would be a better bet, as you will continue to struggle if you have no idea about the basics!

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[BillyRayPreachersSon]

I can recommend the O'Reilly series of books... the HTML / CSS one is quite good.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[booeyOH]

It's a good thing I want the answer, otherwise I might be offended

My mistake, I put it inside the body tags, but it didn't change anything, so my previous post still applies.

Bryan

 

[booeyOH]

So is there anyway to override this functionality and make any particular element be positioned aboslutely inside the entire window (even if it inside another positioned element)????

Thanks,
Bryan

 

[BabyJeffy]

No, you can't do this.

An element, positioned absolutely, has it's top and left based on it's nearest parent element with position relative (or the body of the page).

You could put all your elements at the body level of the document (I have seen this kind of solution in place before and it does work - but goes against a lot of conventions).

Cheers,
Jeff


[tt]Jeff's Page [!]@[/!] Code Couch

http://www.codecouch.com/jeff/blog/

http://www.coedit.co.uk/

[/tt]

Make sure your web page and css validates properly against the doctype you have chosen - before you attempt to debug a problem!

FAQ216-6094

 

[BillyRayPreachersSon]

You could give it a negative top and/or left margin if you knew the exact amount you needed to move it by.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]