Closed Bug 229562 Opened 21 years ago Closed 20 years ago

Border on outer div not displaying correctly when inner div has float: left spans.

Categories

(Core :: Layout, defect)

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

Tracking

()

Status:
RESOLVED DUPLICATE of bug 173162

People

(Reporter: lime, Unassigned)

Details

Attachments

(1 file)

Testcase based on above comment
6.20 KB, text/html
Details 
User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.5) Gecko/20031007 Firebird/0.7 StumbleUpon/1.901
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.5) Gecko/20031007 Firebird/0.7 StumbleUpon/1.901

The border should wrap all around the image and the text below it, but it cuts
off at the bottom of the image, where the first span with a float: left property
starts.  This also happens with the background color.

Reproducible: Always

Steps to Reproduce:
1.  Create a div with a border
2.  Put another div inside that
3.  Inside that div, put spans that have the float: left property.
4.  View page, notice that border does not extend all around first div
5.  Remove float left property, view page, notice that now border does extend
all around first div.

Actual Results:  
Page displayed with incorrect border.

Expected Results:  
Wrap border all around the whole div that has the border property.

Page Source:

<html>
<head>
<title>Emily Links</title>
<style type="text/css">
.content {
background-color: #ffffff;
width: 600px;
border: medium solid #84dffc;
}
.category {
float: left;
width: 290px;
height: 100%;
background-color: #ffffff;
}
.title {
font-family: verdana;
font-weight: bold;
color: #6dcd80;
}
a:active {
font-family: verdana;
color: #3993b0;
font-size: 80%;
}
a:link {
font-family: verdana;
color: #3993b0;
font-size: 80%;
}
a:hover {
font-family: verdana;
color: #3993b0;
font-size: 80%;
}
a:visited {
font-family: verdana;
color: #3993b0;
font-size: 80%;
}
</style>
<script language="javascript" type="text/javascript">
function OpenComments (c) {
    window.open(c,
                    'comments',
                    'width=480,height=480,scrollbars=yes,status=yes');
}
</script>
</head>
<body  align="center">
<center>
<div class="content">
<img src="banner.jpg" />

<span class="category">
<div class="title">Books</div>

<a href="http://www.randomhouse.com/modernlibrary/100bestnovels.html">100 Best
Novels</a>
<a href="http://www.new-moon.us/mt/mt-comments.cgi?entry_id=213"
onclick="OpenComments(this.href); return false">[0]</a><br />
<br />
</span>
<span class="category">
<div class="title">Creative</div>
<a href="http://www.adgame-wonderland.de/type/bayeux.php">Create a Historic Tale</a>
<a href="http://www.new-moon.us/mt/mt-comments.cgi?entry_id=205"
onclick="OpenComments(this.href); return false">[0]</a><br />
<br />
</span>
<span class="category">
<div class="title">Factoids</div>

<a href="http://www.melissadata.com/lookups/ZipCityPhone.asp">Zip Code
Information</a>
<a href="http://www.new-moon.us/mt/mt-comments.cgi?entry_id=202"
onclick="OpenComments(this.href); return false">[0]</a><br />
<a
href="http://www.pbs.org/pov/pov2001/thesweetestsound/popularityindex.html">How
Common Is Your Surname?</a>
<a href="http://www.new-moon.us/mt/mt-comments.cgi?entry_id=208"
onclick="OpenComments(this.href); return false">[0]</a><br />
<br />
</span>
<span class="category">
<div class="title">Fitness</div>
<a href="http://wellnessworksinc.com/basicstretch/basicstretches.htm">Basic
Stretches</a>
<a href="http://www.new-moon.us/mt/mt-comments.cgi?entry_id=201"
onclick="OpenComments(this.href); return false">[0]</a><br />

<br />
</span>
<span class="category">
<div class="title">Fun</div>
<a href="http://www.signspotting.com/">SignSpotting</a>
<a href="http://www.new-moon.us/mt/mt-comments.cgi?entry_id=215"
onclick="OpenComments(this.href); return false">[0]</a><br />
<a href="http://www.iamas.ac.jp/~aki98/index.html">Micro Films</a>
<a href="http://www.new-moon.us/mt/mt-comments.cgi?entry_id=197"
onclick="OpenComments(this.href); return false">[0]</a><br />
<a href="http://www.smalltime.com/dictator.html">Guess the Dictator or SitCom
Character</a>
<a href="http://www.new-moon.us/mt/mt-comments.cgi?entry_id=207"
onclick="OpenComments(this.href); return false">[0]</a><br />

<a href="http://www.physlink.com/Fun/EinsteinCards/Index.cfm">Einstein E-Cards</a>
<a href="http://www.new-moon.us/mt/mt-comments.cgi?entry_id=214"
onclick="OpenComments(this.href); return false">[0]</a><br />
<br />
</span>
<span class="category">
<div class="title">Games</div>
<a href="http://www.lemonadegame.com/">Lemonade Game</a>
<a href="http://www.new-moon.us/mt/mt-comments.cgi?entry_id=198"
onclick="OpenComments(this.href); return false">[0]</a><br />
<a href="http://www.tripletsandus.com/80s/80s_games/arcade.htm">80s Arcade Games</a>
<a href="http://www.new-moon.us/mt/mt-comments.cgi?entry_id=206"
onclick="OpenComments(this.href); return false">[0]</a><br />

<br />
</span>
<span class="category">
<div class="title">Geeky</div>
<a href="http://www.ubergeek.tv/">Ubergeek</a>
<a href="http://www.new-moon.us/mt/mt-comments.cgi?entry_id=219"
onclick="OpenComments(this.href); return false">[0]</a><br />
<a href="http://memepool.com/Subject/Computing/">Memepool Computing</a>
<a href="http://www.new-moon.us/mt/mt-comments.cgi?entry_id=220"
onclick="OpenComments(this.href); return false">[0]</a><br />
<br />
</span>
<span class="category">
<div class="title">Music</div>

<a href="http://www.allsands.com/Music/Reviews/alternativemusi_cn_gn.htm">Ten
albums that define alternative music</a>
<a href="http://www.new-moon.us/mt/mt-comments.cgi?entry_id=199"
onclick="OpenComments(this.href); return false">[0]</a><br />
<a href="http://www.scoutsongs.com/categories/">Scouting Songs</a>
<a href="http://www.new-moon.us/mt/mt-comments.cgi?entry_id=217"
onclick="OpenComments(this.href); return false">[0]</a><br />
<a href="http://www.musicemissions.com/">Music Emissions</a>
<a href="http://www.new-moon.us/mt/mt-comments.cgi?entry_id=200"
onclick="OpenComments(this.href); return false">[0]</a><br />
<br />
</span>
<span class="category">
<div class="title">Parodies</div>

<a href="http://www.brains4zombies.com/">Brains</a>
<a href="http://www.new-moon.us/mt/mt-comments.cgi?entry_id=216"
onclick="OpenComments(this.href); return false">[0]</a><br />
<br />
</span>
<span class="category">
<div class="title">Philosophy</div>
<a href="http://www.i-cynic.com/">The Cynic's Sanctuary</a>
<a href="http://www.new-moon.us/mt/mt-comments.cgi?entry_id=212"
onclick="OpenComments(this.href); return false">[0]</a><br />
<br />
</span>
<span class="category">
<div class="title">Recipes</div>

<a
href="http://starchefs.com/features/passover/mensch_chef/html/recipe_03.shtml">Latkes</a>
<a href="http://www.new-moon.us/mt/mt-comments.cgi?entry_id=204"
onclick="OpenComments(this.href); return false">[0]</a><br />
<br />
</span>
<span class="category">
<div class="title">Science</div>
<a
href="http://www.micro.magnet.fsu.edu/primer/java/scienceopticsu/powersof10/">Powers
of Ten in the Universe</a>
<a href="http://www.new-moon.us/mt/mt-comments.cgi?entry_id=203"
onclick="OpenComments(this.href); return false">[0]</a><br />
<br />
</span>
<span class="category">
<div class="title">Writing</div>

<a href="http://www.oneword.com/">One Word</a>
<a href="http://www.new-moon.us/mt/mt-comments.cgi?entry_id=218"
onclick="OpenComments(this.href); return false">[0]</a><br />
<br />
</span>

</div>
</center>
</body>
</html>
A testcase based on the above comment.	I haven't looked to see if this bug is
valid or not; I have just cut/pasted correctly into a testcase.
Layout looks OK to me; same basic problem as bug 173162 .
URL: http://emilystarr.com/links
->layout
Assignee: firefox → nobody
Status: UNCONFIRMED → NEW
Component: General → Layout
Ever confirmed: true
Product: Firefox → Browser
QA Contact: core.layout
Version: unspecified → Trunk
Richard is right, and this is invalid. The floats should not affect the size of
the parent div, and they have a non-opaque background which paints over the border.

*** This bug has been marked as a duplicate of 173162 ***
Status: NEW → RESOLVED
Closed: 20 years ago
Resolution: --- → DUPLICATE
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: