StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POHow to fix Absolute Positioning In FF?
text
Body
copied!<p>In IE8 absolute positioning works for being based of the parent. I can't seem to get it to work in FF. This is opposite of the problem people normally complain about.</p> <p>Does anyone have any guess what is wrong?</p> <p>Grae</p> <p>Here is a sample:</p> <pre><code> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <script type="text/javascript" language="JavaScript"> function firstChildC(startNode) { var nextNode = startNode.firstChild; while(nextNode.nodeType != 1) //loop until it is an actual tag, not white space nextNode = nextNode.nextSibling; return nextNode; } var bFirefox = false; if (navigator.userAgent.indexOf("Firefox") != -1) bFirefox = true; function highlightPosition(event) { //gets the td that holds the pre tag, which holds the data var preTag; if(bFirefox) preTag = event.target; else preTag = event.srcElement; var containerOfPreTag = preTag.parentNode; var lineCountTD = firstChildC(containerOfPreTag.parentNode); var numLines = parseInt(lineCountTD.innerHTML); var lineHeight = preTag.offsetHeight/numLines; //find line to highlight var currentLine; if(bFirefox) currentLine = parseInt(event.layerY / lineHeight); else currentLine = parseInt(event.offsetY / lineHeight); //highlight line var highlighterDiv = firstChildC(containerOfPreTag); highlightLine(highlighterDiv,0,preTag.offsetWidth, (lineHeight*currentLine), lineHeight); return 0; } function highlightLine(highlighterDiv, left, width, top, height) { highlighterDiv.style.display = "block"; highlighterDiv.style.left = left+"px"; highlighterDiv.style.width = width+"px"; highlighterDiv.style.top = top+"px"; highlighterDiv.style.height = height+"px"; } </script> </head> <body id="page_body"> <div id="section_content" style="overflow:auto; width:100%;"> <table border="0" cellpadding="0" cellspacing="0" width="100%" style="line-height:1.1em"> <tr> <td style="display:none;"> 22 </td> <td style="width: 0px; vertical-align: top; border: 1px solid red"> <div style='text-align: center; display:block;height: 1.1em; width: 1.1em'> <img style='height: 0.8em; width: 0.8em'/> </div> <div style='text-align: center; display:block;height: 1.1em; width: 1.1em'> <img style='height: 0.8em; width: 0.8em'/> </div> <div style='text-align: center; display:block;height: 1.1em; width: 1.1em'> <img style='height: 0.8em; width: 0.8em'/> </div> <div style='text-align: center; display:block;height: 1.1em; width: 1.1em'> <img style='height: 0.8em; width: 0.8em'/> </div> <div style='text-align: center; display:block;height: 1.1em; width: 1.1em'> <img style='height: 0.8em; width: 0.8em'/> </div> <div style='text-align: center; display:block;height: 1.1em; width: 1.1em'> <img style='height: 0.8em; width: 0.8em'/> </div> <div style='text-align: center; display:block;height: 1.1em; width: 1.1em'> <img style='height: 0.8em; width: 0.8em'/> </div> <div style='text-align: center; display:block;height: 1.1em; width: 1.1em'> <img style='height: 0.8em; width: 0.8em'/> </div> <div style='text-align: center; display:block;height: 1.1em; width: 1.1em'> <img style='height: 0.8em; width: 0.8em'/> </div> <div style='text-align: center; display:block;height: 1.1em; width: 1.1em'> <img style='height: 0.8em; width: 0.8em'/> </div> <div style='text-align: center; display:block;height: 1.1em; width: 1.1em'> <img style='height: 0.8em; width: 0.8em'/> </div> <div style='text-align: center; display:block;height: 1.1em; width: 1.1em'> <img style='height: 0.8em; width: 0.8em'/> </div> <div style='text-align: center; display:block;height: 1.1em; width: 1.1em'> <img style='height: 0.8em; width: 0.8em'/> </div> <div style='text-align: center; display:block;height: 1.1em; width: 1.1em'> <img style='height: 0.8em; width: 0.8em'/> </div> <div style='text-align: center; display:block;height: 1.1em; width: 1.1em'> <img style='height: 0.8em; width: 0.8em'/> </div> <div style='text-align: center; display:block;height: 1.1em; width: 1.1em'> <img style='height: 0.8em; width: 0.8em'/> </div> <div style='text-align: center; display:block;height: 1.1em; width: 1.1em'> <img style='height: 0.8em; width: 0.8em'/> </div> <div style='text-align: center; display:block;height: 1.1em; width: 1.1em'> <img style='height: 0.8em; width: 0.8em'/> </div> <div style='text-align: center; display:block;height: 1.1em; width: 1.1em'> <img style='height: 0.8em; width: 0.8em'/> </div> <div style='text-align: center; display:block;height: 1.1em; width: 1.1em'> <img style='height: 0.8em; width: 0.8em'/> </div> <div style='text-align: center; display:block;height: 1.1em; width: 1.1em'> <img style='height: 0.8em; width: 0.8em'/> </div> <div style='text-align: center; display:block;height: 1.1em; width: 1.1em'> <img style='height: 0.8em; width: 0.8em'/> </div> </td> <td style="font-size:100%;position:relative;"> <div style="height: 1.1em; background-color: #f7fa81; position: absolute; z-index:-1"> </div> <PRE style="margin: 0px; border: 1px solid #ff0000" onmousemove="highlightPosition(event);">THIS IS PAGE 01. LINE 01. THIS IS PAGE 01. LINE 02. THIS IS PAGE 01. LINE 03. THIS IS PAGE 01. LINE 04. THIS IS PAGE 01. LINE 05. THIS IS PAGE 01. LINE 06. THIS IS PAGE 01. LINE 07. THIS IS PAGE 01. LINE 08. THIS IS PAGE 01. LINE 09. THIS IS PAGE 01. LINE 10. THIS IS PAGE 01. LINE 11. THIS IS PAGE 01. LINE 12. THIS IS PAGE 01. LINE 13. THIS IS PAGE 01. LINE 14. THIS IS PAGE 01. LINE 15. THIS IS PAGE 01. LINE 16. THIS IS PAGE 01. LINE 17. THIS IS PAGE 01. LINE 18. THIS IS PAGE 01. LINE 19. THIS IS PAGE 01. LINE 20. THIS IS PAGE 01. LINE 21. THIS IS PAGE 01. LINE 22.</PRE> </td> </tr> </table> </div> </body> </html> </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload