Closed
Bug 471847
Opened 17 years ago
Closed 4 years ago
definition list background behaves differently in IE and Firefox
Categories
(Core :: Layout: Block and Inline, defect)
Tracking
()
RESOLVED
WORKSFORME
People
(Reporter: goss, Unassigned)
Details
Attachments
(2 files)
definition list in IE and Firefox
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-GB; rv:1.9.0.5) Gecko/2008120122 Firefox/3.0.5
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-GB; rv:1.9.0.5) Gecko/2008120122 Firefox/3.0.5
I have set a dl with background set to a colour
both dt and dd are set with different colours.
In IE the dl background continues to the last line of the list
in Firefox the dl background stops after the first line of dt and dd
Try as I might I cannot find any way to resolve this
Help please
Reproducible: Always
Steps to Reproduce:
1. create a simple style sheet or add style to a html document with a definition list with backgrounds - then view it in both browsers
2.
3.
|
Reporter | |
Comment 1•17 years ago
|
||
This is graphic example of problem
|
||
Updated•17 years ago
|
Component: General → Layout: Block and Inline
Product: Firefox → Core
QA Contact: general → layout.block-and-inline
|
|
Reporter | |
Comment 2•17 years ago
|
||
If height is set in the dt style, then both IE and Firefox work the same.
This is OK as a temporary work around, but every time the list is changed, the height has to be recalculated.
|
|
||
Comment 3•17 years ago
|
||
Can you attach an actual html test case to illustrate the issue ?
From the look of your screenshot, you're using the float property on both the <dt> and the <dd>. If that is the case, the rendering of your code in Firefox (and Opera, Safari,...) is correct: technically, the <dl> is empty (floated blocks are removed from the flow) and will not expand to the height of the floated blocks.
You probably have a width set on the <dl>, which triggers 'hasLayout' in IE, and cause it to expand the height of the <dl> no matter what and contrary to the specs.
Google 'containing floats' for more details.
This is almost certainly invalid.
|
|
Reporter | |
Comment 4•17 years ago
|
||
Yes float left was used to get both the dt and the dd on the same line
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<style type="text/css">
dl.showdata {background:#FFFF00 ; margin: 20px ; padding: 20px; display:block;}
dt {background: #00FFFF; padding: 20px; float:left; }
dd {background: #FF0000; padding: 20px; }
</style>
</head>
<body>
<dl class="showdata">
<dt>This is the definition.</dt>
<dd>This is the data</dd>
<dt>This is the definition.</dt>
<dd>This is the data</dd>
<dt>This is the definition.</dt>
<dd>This is the data</dd>
</dl>
</body>
</html>
|
||
Comment 5•17 years ago
|
||
(In reply to comment #3)
> Can you attach an actual html test case to illustrate the issue ?
(In reply to comment #4)
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
> <html>
That's not attaching the testcase, that's just pasting it into a comment, which means extra work for anyone who wants to view it.
Could you attach it using the "Add an attachment" link? (like you did with the screenshot GIF)
|
|
Reporter | |
Comment 6•17 years ago
|
||
sorry - misunderstood the request
But that testcase doesn't show the problem you're talking about.
|
|
Reporter | |
Comment 8•17 years ago
|
||
No it doesn't here - but it did as the screen dump above showed.
Now I am totally confused
|
||
Comment 9•4 years ago
|
||
Closing this as resolved:worksforme since I can't reproduce this on the latest Firefox version using the test case attached by the reporter.
If this issue is still reproducible for you, please do re-open it.
Status: UNCONFIRMED → RESOLVED
Closed: 4 years ago
Resolution: --- → WORKSFORME
You need to log in
before you can comment on or make changes to this bug.
Description
•