Closed
Bug 400405
Opened 17 years ago
Closed 17 years ago
CSS display error (new with 2.0.0.8) - div with clear:both being displayed over floated divs.
Categories
(Firefox :: General, defect)
Tracking
()
RESOLVED
DUPLICATE
of bug 400406
People
(Reporter: jeffreycham, Unassigned)
References
()
Details
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.8) Gecko/20071008 Firefox/2.0.0.8
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.8) Gecko/20071008 Firefox/2.0.0.8
A previously fine page, which had had no changes made, rendered differently under 2.0.0.8 than 2.0.0.7. For an example, see http://www.mem.com. The footer (supposed to be at the bottom of the page) is being displayed right under the header (at the top), over the content.
The content has been floated, using a few CSS techniques to generate a three-column fully CSS layout. This includes negative right margins and wide borders.
The div around the footer includes clear:both, which should force it below the floated content. Instead, it is being placed over the content.
Reproducible: Always
Steps to Reproduce:
1. Go to a website which uses the affected styles (ex. http://www.mem.com)
Actual Results:
Some controls render oddly.
Expected Results:
Controls render like in 2.0.0.7
We are in the process of fixing this for our site, so it may not be available for viewing (with the bug intact) for long.
Instead, one of my coworkers created a minimal html file which demonstrates the bug.
It is included below, in plaintext.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="ctl00_Head1"><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<style type="text/css">
#header
{
float:left;
clear:both;
}
#contentcontainer
{
clear:both;
}
#contentcontainer.threecolumnequal
{
width:312px;
float:left;
border-left:220px solid #fff;
border-right:220px solid #fff;
}
.threecolumnequal #maincontent
{
float:left;
width:312px;
margin-right:-312px;
}
.threecolumnequal #subcontent1
{
float:left;
width:220px;
margin-left:-220px;
}
.threecolumnequal #subcontent2
{
float:right;
width:220px;
margin-right:-220px;
}
.threecolumnequal #contentcontainer
{
width:752px;
clear:both;
}
.threecolumnequal #contentcontainer p
{
clear:both;
margin:1ex;
padding:0;
}
#footer
{
clear:both;
text-align:center;
padding:18px 0;
width:752px;
}
</style>
</head>
<body>
<div id="header"><h1>heading text</h1></div>
<div id="contentcontainer" class="threecolumnequal">
<div id="maincontent" class="content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla at odio. Curabitur in erat. Fusce ligula. Aliquam lectus mauris, dignissim a, fringilla sit amet, pulvinar eu, leo. Nulla tincidunt nibh ac turpis. Donec ultricies. Suspendisse et elit ornare orci lacinia vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Suspendisse tellus nulla, aliquet vitae, consequat non, adipiscing vel, diam. Nunc et mi at nibh faucibus aliquam. Praesent porttitor volutpat metus. Sed posuere erat eget sapien.</p>
<p>Aenean placerat sollicitudin quam. Aenean pharetra arcu sit amet tellus. Pellentesque eleifend. Aenean accumsan mi nec orci faucibus molestie. Ut molestie. Proin et nisl. Curabitur dignissim, pede vitae venenatis fermentum, tellus diam rutrum nibh, a lobortis ligula neque tempor turpis. Donec semper sodales quam. Curabitur feugiat nisi ut ligula. Donec turpis turpis, condimentum eu, placerat venenatis, pharetra id, tellus. Morbi mollis, mi eu mattis tempor, nisi eros dapibus tortor, vitae ultricies turpis neque ac justo. Vivamus condimentum faucibus ligula. Quisque nisl. Phasellus id elit vulputate est placerat varius.</p>
</div>
<div id="subcontent1" class="content">
<p>Morbi ultricies nunc vel pede. Vestibulum sem libero, mollis in, ornare sit amet, egestas vel, ligula. Curabitur et enim eget purus convallis suscipit. Suspendisse potenti. Ut lacinia dolor eget lacus. Sed eget massa at arcu scelerisque varius. In quis risus. Donec ultricies velit et metus. Nulla rutrum felis sit amet velit. Nullam dolor erat, auctor at, suscipit a, sollicitudin nec, sapien.</p>
<p>Nullam tempor nunc eu arcu. Fusce viverra tellus eget metus. Nunc vel dolor. Nunc porttitor, ligula eu gravida gravida, tellus risus ullamcorper turpis, in ultricies erat tortor vel eros. In in tellus tempus augue interdum euismod. Sed elit ligula, ultrices nec, pulvinar ac, gravida at, mauris. Ut at odio id tortor rutrum egestas. Phasellus eget massa porttitor odio blandit rutrum. Sed malesuada varius diam. Aenean quis sapien in tortor eleifend accumsan. Phasellus et orci at turpis posuere consectetuer.</p>
</div>
<div id="subcontent2" class="content">
<p>Quisque risus turpis, condimentum vitae, placerat vitae, auctor sit amet, ipsum. In euismod lobortis ligula. Etiam quis ante vel mauris accumsan rutrum. Sed eleifend tortor vulputate ipsum. Pellentesque euismod, dolor nec lobortis aliquet, risus nunc mollis leo, non pellentesque nisl lacus ac magna. Donec diam sapien, adipiscing ac, placerat vel, fermentum quis, ligula. Fusce non pede. Curabitur tortor leo, porttitor vitae, ornare sit amet, ornare vitae, justo. Proin leo. Donec quam risus, bibendum non, adipiscing sed, aliquet et, est. Integer nec dui id pede molestie tincidunt. Nunc vehicula odio ac massa iaculis commodo. Mauris nulla. Fusce commodo cursus dolor. Nullam lorem odio, imperdiet non, fermentum ut, rhoncus ut, enim.</p>
</div>
</div>
<div id="footer"><p>Quisque risus turpis, condimentum vitae, placerat vitae, auctor sit amet, ipsum. In euismod lobortis ligula.</p></div>
</body>
</html>
|
||
Comment 2•17 years ago
|
||
That is the same issue as in bug 400406
Status: UNCONFIRMED → RESOLVED
Closed: 17 years ago
Resolution: --- → DUPLICATE
You need to log in
before you can comment on or make changes to this bug.
Description
•