Closed Bug 299028 Opened 20 years ago Closed 19 years ago

using DHTML with a PRE wrapper an extra LINE FEED is imbedded.

Categories

(Core :: Layout, defect)

Product:
Core
Component:
Layout
Platform:
x86
Windows XP
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

()

Status:
RESOLVED INVALID

People

(Reporter: david, Unassigned)

References

(
URL
)

Details

Attachments

(1 file)

testcase from reporter
1.07 KB, text/html
Details 
User-Agent:       Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1)
Build Identifier: 1.0.4 download june 22 2005

<DIV ID="HB" STYLE="left:0;top:0;width:264;font-
size:24px;color:black"><NOBR>noPRE</NOBR></DIV>
<DIV ID="HB" STYLE="left:46;top:0;width:264;font-
size:24px;color:black"><NOBR><PRE>PRE</PRE></NOBR></DIV>
<DIV ID="R" STYLE="left:0;top:20;width:893;border:1px solid black;clip:rect(0 
893 1 0);"><td width=893 nowrap></td></DIV>

When Wrapped in <PRE></NOPRE> the text appeast 1 line width lower than the top: 
value.  I have change the font size to verify this.

Without the <PRE></PRE> the text appears where expected.

COmplete TEST html that will show this problem
<!-- saved from url=(0022)http://internet.e-mail -->
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=iso-8859-1">
<STYLE TYPE="text/css">
 #R {position:absolute; z-index:10;}
 #HB {font-family:Arial, Helvetica, sans-serif; font-weight:bold; font-
style:normal; color:black; position:absolute; z-index:10;}
 BR.page {page-break-after: always;}
</STYLE>
<SCRIPT LANGUAGE="JavaScript">
if (!window.saveInnerWidth) { 
  window.onresize = resizeIt; 
  window.saveInnerWidth = window.innerWidth; 
  window.saveInnerHeight = window.innerHeight; 
}

function resizeIt() { 
  if (saveInnerWidth != window.innerWidth || saveInnerHeight != 
window.innerHeight ) {
    window.location.reload(true); 
  } 
} 
</SCRIPT>
</HEAD>
<BODY BGCOLOR="FFFFFF">
<NOBR>
<DIV ID="HB" STYLE="left:0;top:0;width:264;font-
size:12px;color:black"><NOBR>noPRE</NOBR></DIV>
<DIV ID="HB" STYLE="left:46;top:0;width:264;font-
size:12px;color:black"><NOBR><PRE>PRE</PRE></NOBR></DIV>
<DIV ID="R" STYLE="left:0;top:12;width:893;border:5px solid black;clip:rect(0 
893 1 0);"><td width=893 nowrap></td></DIV>
</BODY>
</HTML>

















Reproducible: Always

Steps to Reproduce:
1.Run FIREFOX as non-default browser
2.OPEN HTML page
3.compare to IE OPEN of HTML page

Actual Results:  
IE show the text on the same line
FIREFIX shows the text on with what appears to be a LINEFEED

Expected Results:  
NOT inserted the LINEFEED (or LINE-SPACE) 
Place the text at the absolute location + font space

Noticed that the font is different, but this is the same for IE.  

This is not dependant on the order of the CSS statements
This is not dependant on other <DIV> statements

I have stripped out all the code except what seem to be relevant.

FOr us it is fairly critical, as we are presenting FORM style data to the end 
client, NOT a good plan to inflict a browser choice on the client.
Component: General → Layout
Product: Firefox → Core
QA Contact: general → layout
Version: unspecified → Trunk
The layout is correct -- the <pre> has 1em margins by default.  If you don't want the margins, you should set them to 0 in your stylesheet.
Status: UNCONFIRMED → RESOLVED
Closed: 19 years ago
Resolution: --- → INVALID
After doing some experimentation (unless I've missed something important) the 0em margin (and or padding) does not resolve the problem.   In the example given 0em margin in IE for a 12 pt font sits between position 1 and 12 in FF it sits between 13 and 24.   If one takes the fontsize to 28 from 12 and margin =0em IE sits between 1 and 28 and FF sits between 44 and 72.  I added the following additions to the original HTML to demonstrate the deviation.   Note the horozontal lines indicate a 1em at 12pt = 16pt so the lines are 
0*16pt + 12pt = 12pt
1*16pt + 12pt = 28pt
2*16pt + 12pt = 44pt
My first thought was that FF was placing the <PRE> text after font size, but the 28pt test show that this is not the case.   

Thank /drj
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=iso-8859-1">
<STYLE TYPE="text/css">
 #R {position:absolute; z-index:10;}
 #HB {font-family:Arial, Helvetica, sans-serif; font-weight:bold; font-style:normal; color:black; position:absolute; z-index:10; margin: 1em; padding: 0em}
 BR.page {page-break-after: always;}
</STYLE>
<SCRIPT LANGUAGE="JavaScript">
if (!window.saveInnerWidth) { 
  window.onresize = resizeIt; 
  window.saveInnerWidth = window.innerWidth; 
  window.saveInnerHeight = window.innerHeight; 
}

function resizeIt() { 
  if (saveInnerWidth != window.innerWidth || saveInnerHeight != 
window.innerHeight ) {
    window.location.reload(true); 
  } 
} 
</SCRIPT>
</HEAD>
<BODY BGCOLOR="FFFFFF">
<NOBR>
<DIV ID="HB" STYLE="left:0;top:0;width:264;font-size:12px;color:black; margin: 0px 0px 0px 0px"><NOBR>noPRE</NOBR></DIV>
<DIV ID="HB" STYLE="left:66;top:0;width:264;font-size:12pt;color:red;margin: 0em"><NOBR><PRE>PRE0em</PRE></NOBR></DIV>
<DIV ID="HB" STYLE="left:76;top:0;width:264;font-size:12px;color:black;margin 1em"><NOBR><PRE>PRE1em</PRE></NOBR></DIV>
<DIV ID="HB" STYLE="left:86;top:0;width:264;font-size:12px;color:black;margin: 2em"><NOBR><PRE>PRE2em</PRE></NOBR></DIV>
<DIV ID="R" STYLE="left:0;top:12;width:893;border:5px solid black;clip:rect(0 
893 1 0);"><td width=893 nowrap></td></DIV>
<DIV ID="R" STYLE="left:0;top:28;width:893;border:5px solid black;clip:rect(0 
893 1 0);"><td width=893 nowrap></td></DIV>
<DIV ID="R" STYLE="left:0;top:44;width:893;border:5px solid black;clip:rect(0 
893 1 0);"><td width=893 nowrap></td></DIV>
</BODY>
</HTML>
Status: RESOLVED → UNCONFIRMED
Resolution: INVALID → ---
You need to set the margin to 0 on the element that has the margin.  That's the <pre>, not the <div>.
Status: UNCONFIRMED → RESOLVED
Closed: 19 years ago → 19 years ago
Resolution: --- → INVALID
Thanks. The bug is in the bio processor!
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: