position:absolute in a relative container bug | Newbie | | Join Date: Sep 2006
Posts: 3
| |
hello , I have an issue positionating some pics I want to anchor to an existing table cell but I cant just place regular position on the cell because the background is fixed height and the set of pics is bigger then fixed space. SO I put them in a position:absolute div and I gave a position:relative to the container td.
This seems to work in IE but in Firefox position is relative to the browser window, not the cell. I need a compatible solution to anchor this vertical set of pics relatively to a specific area of the layout not the general browser window sigh...
Here is the complete html code (the bold code is for what I'm referring to) and also some of the css style coding, just in case. - <style>
-
body {
-
margin: 0px 60px 0px 60px;
-
color: #000000;
-
font-size: 11 px;
-
font-family: arial ;
-
line-height:12px;
-
text-align:justify
-
}
-
-
td {
-
font-size: 11px;
-
font-family: arial ;
-
line-height:12px;
-
color:#000000;
-
font-size:11px;
-
text-align:justify;}
-
</style>
| | Newbie | | Join Date: Dec 2006
Posts: 14
| | | re: position:absolute in a relative container bug
Quote:
Originally Posted by derelicten hello , I have an issue positionating some pics I want to anchor to an existing table cell but I cant just place regular position on the cell because the background is fixed height and the set of pics is bigger then fixed space. SO I put them in a position:absolute div and I gave a position:relative to the container td.
This seems to work in IE but in Firefox position is relative to the browser window, not the cell. I need a compatible solution to anchor this vertical set of pics relatively to a specific area of the layout not the general browser window sigh...
... I too have the same bug. I tried on a simpler code and it worked in IE but not in firefox. - <html>
-
<body>
-
asdf<br>
-
asdf<br>
-
asdf<br>
-
asdf<br>
-
<table cellpadding='0' cellspacing='0'><tr><td style='position:relative;'>asdf<div style='position:absolute;left:0%;top:0%;'>qwer</div></td></tr></table>
-
</body>
-
</html>
According to http://www.w3.org/TR/2006/WD-CSS21-2...-block-details
,
4. If the element has 'position: absolute', the containing block is established by the nearest ancestor with a 'position' of 'absolute', 'relative' or 'fixed'...
|  | Expert | | Join Date: Sep 2006
Posts: 5,566
| | | re: position:absolute in a relative container bug
I am extremely busy right now so I apologize for not being able to look at the code in depth. The problem is probably IE. IE expands containers to contain floated and absolutely positioned elements. This is incorrect behavior. But to get modern browsers to do what you want, try adding overflow:auto; to the containing element and see if that fixes it.
I'll try and look into this again later.
|  | Newbie | | Join Date: Jan 2007 Location: Callisto
Posts: 5
| | | re: position:absolute in a relative container bug
Quote:
Originally Posted by drhowarddrfine I am extremely busy right now so I apologize for not being able to look at the code in depth. The problem is probably IE. IE expands containers to contain floated and absolutely positioned elements. This is incorrect behavior. But to get modern browsers to do what you want, try adding overflow:auto; to the containing element and see if that fixes it.
I'll try and look into this again later. I have similar code which Safari & IE have no trouble with - it seems to be FireFox out of line. In mine, a table with relative position contains a table with absolute postion; if you apply "top: 0px" to the latter, FireFox takes this - wrongly - to mean the top of the browser window, not the top of the containing element.
| | Expert | | Join Date: Sep 2006
Posts: 5,566
| | | re: position:absolute in a relative container bug
Firefox does not take it wrong but the definition from the W3C is this:
The effect of 'position:relative' on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption elements is undefined.
I think this may be because tables are not to be used for layout and positioning is a layout attribute.
| | Newbie | | Join Date: Jan 2007
Posts: 1
| | | re: position:absolute in a relative container bug
Quote:
Originally Posted by Splat I have similar code which Safari & IE have no trouble with - it seems to be FireFox out of line. In mine, a table with relative position contains a table with absolute postion; if you apply "top: 0px" to the latter, FireFox takes this - wrongly - to mean the top of the browser window, not the top of the containing element. I have also hit this bug with firefox 2.0. An absolute div within a relative div gets the correct left but top is from the top of page? Do you know of any workaround?
| | Expert | | Join Date: Sep 2006
Posts: 5,566
| | | re: position:absolute in a relative container bug
Again, this is NOT a bug. This is correct behavior. If any other browser (that is, IE) does it differently, it is due to a bug in IE. Firefox is performing correctly.
Absolutely positioned elements are removed from the document flow. They position themselves relative to their parent. If a containing div is positioned relative, then the contained absolutely positioned div will position itself within that parent. HOWEVER, because the absolutely positioned element is removed from the flow, the parent div will collapse because, as far as it is concerned, it does not contain anything.
If the containing div is not positioned, then the absolutely positioned div will use the next level up parent which could be the body, in your case.
| | Newbie | | Join Date: Jan 2007 Location: Callisto
Posts: 5
| | | re: position:absolute in a relative container bug
Quote:
Originally Posted by drhowarddrfine Again, this is NOT a bug. This is correct behavior. If any other browser (that is, IE) does it differently, it is due to a bug in IE. Firefox is performing correctly.
Absolutely positioned elements are removed from the document flow. They position themselves relative to their parent. If a containing div is positioned relative, then the contained absolutely positioned div will position itself within that parent. HOWEVER, because the absolutely positioned element is removed from the flow, the parent div will collapse because, as far as it is concerned, it does not contain anything.
If the containing div is not positioned, then the absolutely positioned div will use the next level up parent which could be the body, in your case. Many thanks. Firefox may be strictly correct, but what is needed is a workaround that all browsers will accept.
The brief from my client is to position the 'Content' table (their term) in the centre of the browser window, which I have done by making a 100% w/h table with one cell set to align centre/middle. Therefore the position of the 'Content' table is undetermined by CSS.
'Content' table is set to position relative. It contains a 'Blurb' table set to position absolute.
This works (as it happens) in all browsers apart from FF, & (of course) as long as I don't try to position 'Blurb' relative to 'Content', all is well in FF too.
But what if I needed to position it (e.g.) 150 pixels from top? I did in fact try this using divs instead of tables, but this wouldn't work in IE. Since my client insists on tables I may need to have a viable method at some time in the future, & as others seem to have similar problems it might be of more than academic interest to find a fix.
| | Newbie | | Join Date: Jan 2007 Location: Callisto
Posts: 5
| | | re: position:absolute in a relative container bug
Quote:
Originally Posted by Splat Many thanks. Firefox may be strictly correct, but what is needed is a workaround that all browsers will accept.
The brief from my client is to position the 'Content' table (their term) in the centre of the browser window, which I have done by making a 100% w/h table with one cell set to align centre/middle. Therefore the position of the 'Content' table is undetermined by CSS.
'Content' table is set to position relative. It contains a 'Blurb' table set to position absolute.
This works (as it happens) in all browsers apart from FF, & (of course) as long as I don't try to position 'Blurb' relative to 'Content', all is well in FF too.
But what if I needed to position it (e.g.) 150 pixels from top? I did in fact try this using divs instead of tables, but this wouldn't work in IE. Since my client insists on tables I may need to have a viable method at some time in the future, & as others seem to have similar problems it might be of more than academic interest to find a fix. Quick clarification: a surrounding table contains the 'Content' table (position relative) which contains the 'Blurb' table (position absolute). The question is how to position 'Blurb' in relation to 'Content', since "top=however many pixels" is not dependable.
| | Expert | | Join Date: Sep 2006
Posts: 5,566
| | | re: position:absolute in a relative container bug
Well, there is IE and there is everyone else. It is always better to code to standards compliance than to IE because you can always adjust for IE but you can't adjust invalid code for everyone else. The problem you mention is not just Firefox but all modern browsers.
I don't recall if the table issue is still true in IE7 which brings up another point. IE7 has made a half-hearted attempt to be more standards compliant so it now performs closer to Firefox and other modern browsers but less like IE6. So now there are further 'hacks' that must be made to bring IE6 and IE7 into line.
I can't give more examples and help right now because I reformatted my computer to swap with my wife and I don't have my dev tools or other browsers available to test in. Hope to have it all back by tonight.
This is why we should never use tables for layout. You said you couldn't get divs to work in IE but there are known ways to hack IE.
| | Newbie | | Join Date: Jan 2007 Location: Callisto
Posts: 5
| | | re: position:absolute in a relative container bug
Quote:
Originally Posted by drhowarddrfine Well, there is IE and there is everyone else. It is always better to code to standards compliance than to IE because you can always adjust for IE but you can't adjust invalid code for everyone else. The problem you mention is not just Firefox but all modern browsers.
I don't recall if the table issue is still true in IE7 which brings up another point. IE7 has made a half-hearted attempt to be more standards compliant so it now performs closer to Firefox and other modern browsers but less like IE6. So now there are further 'hacks' that must be made to bring IE6 and IE7 into line.
I can't give more examples and help right now because I reformatted my computer to swap with my wife and I don't have my dev tools or other browsers available to test in. Hope to have it all back by tonight.
This is why we should never use tables for layout. You said you couldn't get divs to work in IE but there are known ways to hack IE. Actually, it is just FF (I use Safari by default & of course test in many others), but that doesn't really matter. My client is adamant r.e. tables, but if they were not I would avoid this trouble by using a method such as this:
http://www.w3.org/Style/Examples/007/center.html
...hopefully that may help others with similar troubles, but it would still be nice to have a workaround (esp. since tables are probably about to make a spectacular come-back!).
| | Expert | | Join Date: Sep 2006
Posts: 5,566
| | | re: position:absolute in a relative container bug
Maybe you can leave this link on their desktop "by accident".
Always remember this: Firefox and Opera are the two most standards compliant browsers in the world right now. Microsoft has "stated" they want to be more standards compliant (as IEs market share is slowly dwindling). Those who designed with IE6 in mind are now screwed when IE7 came out because it is more like Firefox and Opera.
The whole point of that is, design for standards in a better standards compliant browser and your code will more likely work everywhere with fewer tweaks for bad browsers, ie, Internet Explorer.
...and never, ever use tables for layout.
| | Newbie | | Join Date: Jan 2007 Location: Callisto
Posts: 5
| | | re: position:absolute in a relative container bug
Quote:
Originally Posted by drhowarddrfine Maybe you can leave this link on their desktop "by accident".
Always remember this: Firefox and Opera are the two most standards compliant browsers in the world right now. Microsoft has "stated" they want to be more standards compliant (as IEs market share is slowly dwindling). Those who designed with IE6 in mind are now screwed when IE7 came out because it is more like Firefox and Opera.
The whole point of that is, design for standards in a better standards compliant browser and your code will more likely work everywhere with fewer tweaks for bad browsers, ie, Internet Explorer.
...and never, ever use tables for layout. You seem to think I prefer IE... nothing could be further from the truth! I am also keen to force compliance upon recalcitrant companies, but sometimes one has to respect one's clients' wishes - & if they want to be able to 're-use' their website design for email use (or at any rate, believe that they could do so if they wished), then in the light of recent developments you can understand their concern.
So if by any chance you should happen to think of a workaround for tables, please LMK... in the meantime, I am trying to convince them that they need two solutions, not one. Which is no less than the truth, albeit inconvenient (especially when they got the idea from other people seemingly doing what they want done for themselves).
| | Newbie | | Join Date: Jan 2007
Posts: 1
| | | re: position:absolute in a relative container bug
Try to add float:left or display:block to td. Then you should be able to use position:relative.
| | Newbie | | Join Date: Sep 2008
Posts: 1
| | | re: position:absolute in a relative container bug
Quote:
<TD style="position:relative" COLSPAN=2 ROWSPAN=6 background="images/_02.jpg" WIDTH=191> <div style="position:absolute;width:100px;left:60px;top :-20px;z-index:1"> <img src="images/r.jpg"><br><br> <img src="images/e.jpg"><bR><br> <img src="images/e.jpg"><br><br> <img src="images/n.jpg" height=90 width=76>
imo you should make one main table, put the table into the div's make the div relative and the rest u want to position make absolute for example:
<div style="position:relative; the rest of style"><centre><table style="your style"><tr><td><img style="position: absolute; the rest of style" bla bla></td></tr></table></center> and the rest of your page</div>
try this.
| | Expert | | Join Date: Sep 2006
Posts: 5,566
| | | re: position:absolute in a relative container bug
Quote:
Originally Posted by ixpack imo you should make one main table, put the table into the div's make the div relative and the rest u want to position make absolute for example:
<div style="position:relative; the rest of style"><centre><table style="your style"><tr><td><img style="position: absolute; the rest of style" bla bla></td></tr></table></center> and the rest of your page</div>
try this. Not only is your solution antiquated, it's on a post from almost 2 years ago. Never use tables for layout.
|  |
| | |  /bytes/about
We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights.
Get the best answers to your questions from over 226,419 network members.
|
