How do I get rid of the gap left by an relative positioned div in Firefox?
My basic idea is to just a div for highlighting lines.
For IE it works great. However, in FF I am having a problem. Is there a standards way people use to do that same function?
I have to switch the highlight div to relative to make the positioning work in FF, but then there is an extra gap before the first line when a line is highlighted.
I am hoping some CSS/JavaScript expert has a workaround. Also, if there is some normal standards way to do let me know. I will use that.
Here is a code sample:
<!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,containerOfPreTag.offsetWidth, (lineHeight*currentLine), lineHeight);
return 0;
}
function highlightLine(highlighterDiv, left, width, top, height)
{
highlighterDiv.style.display = "block";
if(bFirefox)
highlighterDiv.style.position = "relative";
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;">
<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 st开发者_开发百科yle='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>
Tried to get this working here: http://jsfiddle.net/bemace/Kg2Ag/4/ but it's a mess.
This seems like a much saner approach: (demo'd at http://jsfiddle.net/bemace/DBQFW/)
<ul class="code">
<li>THIS IS PAGE 01. LINE 01.</li>
<li>THIS IS PAGE 01. LINE 02.</li>
<li>THIS IS PAGE 01. LINE 03.</li>
<li>THIS IS PAGE 01. LINE 04.</li>
<li>THIS IS PAGE 01. LINE 05.</li>
<li>THIS IS PAGE 01. LINE 06.</li>
<li>THIS IS PAGE 01. LINE 07.</li>
<li>THIS IS PAGE 01. LINE 08.</li>
<li>THIS IS PAGE 01. LINE 09.</li>
<li>THIS IS PAGE 01. LINE 10.</li>
<li>THIS IS PAGE 01. LINE 11.</li>
<li>THIS IS PAGE 01. LINE 12.</li>
<li>THIS IS PAGE 01. LINE 13.</li>
<li>THIS IS PAGE 01. LINE 14.</li>
<li>THIS IS PAGE 01. LINE 15.</li>
<li>THIS IS PAGE 01. LINE 16.</li>
<li>THIS IS PAGE 01. LINE 17.</li>
<li>THIS IS PAGE 01. LINE 18.</li>
<li>THIS IS PAGE 01. LINE 19.</li>
<li>THIS IS PAGE 01. LINE 20.</li>
<li>THIS IS PAGE 01. LINE 21.</li>
<li>THIS IS PAGE 01. LINE 22.</li>
</ul>
CSS:
ul.code {
border: solid red 1px;
padding: 0px;
margin: 0px;
}
.code li {
font-size: 8pt;
font-family: "courier";
padding-left: 1px;
}
.code li:hover {
background-color: #F7FA81;
}
Do you have to make that work in IE6? Because if not, you can just use :hover pseudo-class and get rid of all the script.
I deleted and replaced your doctype with the same thing and went from 1 validation error to 50. Most of those are 'alt' errors and such but something goofy happened there.
EDIT: The doctype problem may have occured in copy/paste but I still show 56 errors. One of those is your attempt to style the PRE tag, which is invalid.
Make the highlight div's position absolute and then look at the following solution.
How to fix Absolute Positioning In FF?
加载中,请稍侯......
精彩评论