absolutely positioned elements in relatively positioned ones

Cross browser issues

[naiquevin]

absolutely positioned child element inside a relatively positioned parent is not working in google chrome... while it is perfectly fine in firefox

The view source of Chrome shows all the code but it doesnt display this part

Is there any thing that can be done to fix this problem ?

actually, the child element is in a separate .php file and the <div> tags for the child (absolute) are also in the php file
The parent file carries the <div> tags corresponding to relative position within which the require_once function of php is called

is the problem because of the structure of code or is it the browser ?

Thanks

[andrewmabbott]

Can you proivde a code sample?

Whether the HTML is generated from a separate php file is not relevant - the browser will see only the generated HTML.

[naiquevin]

This is in footer.php file

<div id="footer">


<a href="about.php"> About </a> &nbsp; &nbsp; &nbsp;
<a href="guidelines.php"> Guidelines </a> &nbsp; &nbsp; &nbsp;
<a href="Privacy.php"> Privacy </a> &nbsp; &nbsp; &nbsp;
<a href="contact.php"> Contact </a> &nbsp; &nbsp; &nbsp;

</div>
-----------------------------------------------------------

This is signup page where it is included

<div id="foot_signup">
<?php require_once('footer.php'); ?>
</div>

-----------------------------------------------------------
Here goes the CSS

#footer {

position:absolute;
min-width:600px;
height:100px;
padding: 5px 50px 80px 180px;
border-top:1px solid #fad144;
font-size:13px;
line-height:14px;

}

#foot_signup { position:relative; top:860px; left:0px; }

[SuzyUK]

hmm it indeed looks like a bug, not too sure about the latest expected CSS support in Chrome though.

It's happening as soon as the text goes out of the viewport, e.g. change the top position of the relatively positioned div to some thing less that the window and the text reappears, change it to round about 600px then resize the window to make it appear/disappear.

However, at least from your sample code, do you need the relatively positioned div at all, could you not just Absolutley Position the #footer div 860px from the top? If so that appears to work OK in Chrome

alternatively if you do need the relatively positioned div, does the footer then need to be absolutely positioned? because again just removing the AP from that div while leaving the relative wrapper seems to also work

I had written off Chrome for a while on its initial release as it was known it was not quite ready, but I have now re-installed it, even if I just use it for keeping my mail windows open..

anyone know what the state of play with CSS in Chrome is now?

[naiquevin]

Thanks for replying...
I was initially struggling to figure out a way by which I can position the footer just below user's comments section which doesnt have a fixed height.. As a solution to that problem, I put the user comments section is a table and included the footer.php file in the last row of that table. But that was just one page..
To do it on other pages and still use the footer.php file I included it inside a relative div.. which worked perfectly in Firefox. But it doesnt work in Chrome for some reason (and needless to mention IE6)

Not using relative div on these pages positions the footer right on top.. :(

EDIT>

alternatively if you do need the relatively positioned div, does the footer then need to be absolutely positioned? because again just removing the AP from that div while leaving the relative wrapper seems to also work

yes this worked thanks a lot ...