By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
464,492 Members | 929 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 464,492 IT Pros & Developers. It's quick & easy.

position:absolute in a relative container bug

P: 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.

Expand|Select|Wrap|Line Numbers
  1. <style>
  2. body {
  3. margin: 0px 60px 0px 60px;
  4. color: #000000;
  5. font-size: 11 px;
  6. font-family: arial ;
  7. line-height:12px;
  8. text-align:justify
  9. }
  10.  
  11. td {
  12. font-size: 11px;
  13. font-family: arial ;
  14. line-height:12px;
  15. color:#000000;
  16. font-size:11px;
  17. text-align:justify;}
  18. </style>
Expand|Select|Wrap|Line Numbers
  1. <div align=center>
  2. <TABLE WIDTH=845 BORDER=0 CELLPADDING=0 CELLSPACING=0>
  3. <TR>
  4. <TD style="position:relative" COLSPAN=17 background="images/st.jpg" WIDTH=845 HEIGHT=224 valign=top>
  5. <div align=right><br>Join the Mailing List</font><br>
  6. <input size="17" name="" type="text" value="">
  7. <input
  8. type="submit" name="hop 11"
  9. value="Submit"></div>
  10. <br><bR></div>
  11.  
  12. </TD>
  13. <TD>
  14. <IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=224 ALT=""></TD>
  15. </TR>
  16. <TR>
  17. <TD style="position:relative" COLSPAN=2 ROWSPAN=6 background="images/_02.jpg" WIDTH=191>
  18. <div style="position:absolute;width:100px;left:60px;top:-20px;z-index:1">
  19. <img src="images/r.jpg"><br><br>
  20. <img src="images/e.jpg"><bR><br>
  21. <img src="images/e.jpg"><br><br>
  22. <img src="images/n.jpg" height=90 width=76>
  23. <TD COLSPAN=6>
  24. <IMG SRC="images/_03.jpg" WIDTH=201 HEIGHT=18 ALT=""></TD>
  25. <TD ROWSPAN=3>
  26. <a href="sez/prop.htm" target=iframe><IMG SRC="images/_04.jpg" WIDTH=53 HEIGHT=51 ALT="" border=0></A></TD>
  27. <TD COLSPAN=6 ROWSPAN=2>
  28. <IMG SRC="images/_03-06.jpg" WIDTH=218 HEIGHT=21 ALT=""></TD>
  29. <TD COLSPAN=2 ROWSPAN=6 background="images/_06.jpg" WIDTH=182 HEIGHT=324></TD>
  30. <TD>
  31. <IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=18 ALT=""></TD>
  32. </TR>
  33. <TR>
  34.  
  35. <td COLSPAN=1 ROWSPAN=2 background="images/bio_jpg">
  36. <div id="bio"><a href=sez/bio.htm target=iframe></A><DIV></td>
  37. <TD COLSPAN=2 ROWSPAN=2>
  38. <div id="tour"><a href=sez/_tour.htm target=iframe></A><DIV></TD>
  39. <TD COLSPAN=3 ROWSPAN=2>
  40. <div id="merc"><a href=sez/m.htm target=iframe></A><DIV></TD>
  41. <TD>
  42. <IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=3 ALT=""></TD>
  43. </TR>
  44. <TR>
  45. <TD COLSPAN=3>
  46. <div id="live"><a href=sez/ix.htm target=iframe></A><DIV></TD>
  47. <TD COLSPAN=2>
  48. <div id="christ"><a href=family.htm target=iframe></A><DIV></TD>
  49. <TD ROWSPAN=2>
  50. <div id="art"><a href=t.htm target=iframe></A><DIV></TD>
  51. <TD>
  52. <IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=30 ALT=""></TD>
  53. </TR>
  54. <TR>
  55. <TD COLSPAN=2 ROWSPAN=2>
  56. <IMG SRC="images/_13.jpg" WIDTH=74 HEIGHT=31 ALT=""></TD>
  57. <TD COLSPAN=2 ROWSPAN=2>
  58. <div id="links"><a href=sez/_links.htm target=iframe></A><DIV></TD>
  59. <TD ROWSPAN=2>
  60. <div id="contact"><a href=sez/contact.htm target=iframe></A><DIV></TD>
  61. <TD COLSPAN=3 ROWSPAN=2>
  62. <div id="guestbook"><a href="http://108574.netguestbook.com/
  63. <!--http://www.ultraguest.com/view/1155828420-->" target=iframe></A><DIV></TD>
  64. <TD COLSPAN=3 ROWSPAN=2>
  65. <div id="s"><a href=sez/st.htm target=iframe></A><DIV></TD>
  66. <TD ROWSPAN=2>
  67. <IMG SRC="images/_03-19.jpg" WIDTH=43 HEIGHT=31 ALT=""></TD>
  68. <TD>
  69. <IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=1 ALT=""></TD>
  70. </TR>
  71. <TR>
  72. <TD>
  73. <IMG SRC="images/_03-20.jpg" WIDTH=51 HEIGHT=30 ALT=""></TD>
  74. <TD>
  75. <IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=30 ALT=""></TD>
  76. </TR>
  77. <TR>
  78. <TD COLSPAN=13><IFRAME HEIGHT="242" WIDTH="472" SRC="sez/.htm" NAME="iframe" NORESIZE FRAMEBORDER="0" MARGINHEIGHT="0" MARGINWIDTH="0"></IFRAME>
  79. <!---IMG SRC="images/rt_20.jpg" WIDTH=472 HEIGHT=242 ALT=""---></TD>
  80. <TD>
  81. <IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=242 ALT=""></TD>
  82. </TR>
  83. <TR>
  84. <TD>
  85. <IMG SRC="images/_21.jpg" WIDTH=146 HEIGHT=62 ALT=""></TD>
  86. <TD COLSPAN=5 ROWSPAN=2>
  87. <IMG SRC="images/_22.jpg" WIDTH=173 HEIGHT=63 ALT=""></TD>
  88. <TD COLSPAN=5 ROWSPAN=2>
  89. <a href="man.htm" target=_blank><IMG SRC="images/_.jpg" WIDTH=184 HEIGHT=63 ALT="" border=0></A></TD>
  90. <TD COLSPAN=5 ROWSPAN=2 background="images/_24.jpg" WIDTH=194 HEIGHT=63>
  91. </TD>
  92. <TD background="images/_21-26.jpg" WIDTH=148 HEIGHT=62>
  93. </TD>
  94. <TD>
  95. <IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=62 ALT=""></TD>
  96. </TR>
  97. <TR>
  98. <TD>
  99. <IMG SRC="images/26.jpg" WIDTH=146 HEIGHT=1 ALT=""></TD>
  100. <TD>
  101. <IMG SRC="images/27.jpg" WIDTH=148 HEIGHT=1 ALT=""></TD>
  102. <TD>
  103. <IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=1 ALT=""></TD>
  104. </TR>
  105. <TR>
  106. <TD>
  107. <IMG SRC="images/spacer.gif" WIDTH=146 HEIGHT=1 ALT=""></TD>
  108. <TD>
  109. <IMG SRC="images/spacer.gif" WIDTH=45 HEIGHT=1 ALT=""></TD>
  110. <TD>
  111. <IMG SRC="images/spacer.gif" WIDTH=57 HEIGHT=1 ALT=""></TD>
  112. <TD>
  113. <IMG SRC="images/spacer.gif" WIDTH=17 HEIGHT=1 ALT=""></TD>
  114. <TD>
  115. <IMG SRC="images/spacer.gif" WIDTH=33 HEIGHT=1 ALT=""></TD>
  116. <TD>
  117. <IMG SRC="images/spacer.gif" WIDTH=21 HEIGHT=1 ALT=""></TD>
  118. <TD>
  119. <IMG SRC="images/spacer.gif" WIDTH=65 HEIGHT=1 ALT=""></TD>
  120. <TD>
  121. <IMG SRC="images/spacer.gif" WIDTH=8 HEIGHT=1 ALT=""></TD>
  122. <TD>
  123. <IMG SRC="images/spacer.gif" WIDTH=53 HEIGHT=1 ALT=""></TD>
  124. <TD>
  125. <IMG SRC="images/spacer.gif" WIDTH=13 HEIGHT=1 ALT=""></TD>
  126. <TD>
  127. <IMG SRC="images/spacer.gif" WIDTH=45 HEIGHT=1 ALT=""></TD>
  128. <TD>
  129. <IMG SRC="images/spacer.gif" WIDTH=10 HEIGHT=1 ALT=""></TD>
  130. <TD>
  131. <IMG SRC="images/spacer.gif" WIDTH=56 HEIGHT=1 ALT=""></TD>
  132. <TD>
  133. <IMG SRC="images/spacer.gif" WIDTH=43 HEIGHT=1 ALT=""></TD>
  134. <TD>
  135. <IMG SRC="images/spacer.gif" WIDTH=51 HEIGHT=1 ALT=""></TD>
  136. <TD>
  137. <IMG SRC="images/spacer.gif" WIDTH=34 HEIGHT=1 ALT=""></TD>
  138. <TD>
  139. <IMG SRC="images/spacer.gif" WIDTH=148 HEIGHT=1 ALT=""></TD>
  140. <TD></TD>
  141. </TR>
  142. </TABLE>
Sep 6 '06 #1
Share this Question
Share on Google+
19 Replies

P: 62
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.
Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <body>
  3. asdf<br>
  4. asdf<br>
  5. asdf<br>
  6. asdf<br>
  7. <table cellpadding='0' cellspacing='0'><tr><td style='position:relative;'>asdf<div style='position:absolute;left:0%;top:0%;'>qwer</div></td></tr></table>
  8. </body>
  9. </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'...
Dec 6 '06 #2

drhowarddrfine
Expert 5K+
P: 7,435
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.
Dec 6 '06 #3

Splat
P: 5
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.
Jan 5 '07 #4

drhowarddrfine
Expert 5K+
P: 7,435
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.
Jan 6 '07 #5

P: 1
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?
Jan 11 '07 #6

drhowarddrfine
Expert 5K+
P: 7,435
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.
Jan 11 '07 #7

Splat
P: 5
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.
Jan 12 '07 #8

Splat
P: 5
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.
Jan 12 '07 #9

drhowarddrfine
Expert 5K+
P: 7,435
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.
Jan 12 '07 #10

Splat
P: 5
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!).
Jan 13 '07 #11

drhowarddrfine
Expert 5K+
P: 7,435
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.
Jan 14 '07 #12

Splat
P: 5
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).
Jan 14 '07 #13

P: 1
Try to add float:left or display:block to td. Then you should be able to use position:relative.
Jan 26 '07 #14

P: 1
<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.
Sep 12 '08 #15

drhowarddrfine
Expert 5K+
P: 7,435
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.
Sep 13 '08 #16

P: n/a
I know this post is quite old. or may be too old. But it helped me. So thanks to everyone who posted any solution.

Here is my problem + solution:
I had a div as my outer panel. and there were 4 divs, which i placed with absolute positioning. I was implementing something like silverlight drag dock panel, so i needed to place my divs with absolute position only. In all browsers, my 4 inner divs were placed inside the main outer div, I mean my top:0 and left:0 was top left corner of my outer div. But in firefox it was top left corner of my main whole page. [And it was only in firefox, in chrome opera and IE, it was working as i needed].
So after reading a comment
"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."
I just added "display: block;position:relative;" to my outer div. And now in all browsers it is working as required top:0,left:0 is outer div top left corner.
Oct 15 '10 #17

P: n/a
It helped me too..
I was migrating my page from <table> based layout to div/css based one. Now with IE8 supporting display:table it was easy replace <tr> with a div with style display: table-cell; and <td> with another div with display: table-row;.

But I faced the problem in this page in a cell where I have to place two elements, one text anchored to left side, one text box anchored to right. I used position:absolute;right/left=0, but it was not working in Firefox, but working in IE. FInally I saw majik's
Try to add float:left or display:block to td.
response, and it worked.. I removed position:absolute now, works fine in both IE8 and FF
Oct 20 '10 #18

P: 1
Brilliant thanks! This was still relevant for me and your solution worked a treat.


@Saeed Akhtar
Sep 26 '11 #19

P: 1
Thanks
Was worth it to read all until the end
Help me to I also added "display: block;position:relative;" to my outer containter.
Apr 11 '13 #20

Post your reply

Sign in to post your reply or Sign up for a free account.