Netscape makes nested floats inline?

R

Ryan Stewart

IE 6.0 displays the following code as expected. Netscape Navigator 7.0
does not. Both get the same result up to a point. "Some other content"
is in a blue box to the left. Everything else is in a red box floated
against the blue box. "foo" clears everything above it and is at the
left border of the red box. The difference is in the three black
boxes. IE properly renders them as taking up about one third of the
red box's width apiece, each floated against the previous one. In
Netscape, however, each box's width is not even enough to contain the
letters within it. This behavior only seems to occur when nesting a
floated element within another floated element. Is this a known bug? A
feature? Is there a workaround?

Code:
<html>
<head><title>A Block</title></head>
<body>
<div style="float: left; width: 15%; border: 1px solid blue;">
<p>Some<br />other<br />content</p>
</div>
<div style="float: left; border: 1px solid red;">
<div style="width: 30%; float: left; border: 1px solid black;">
abcdef
</div>
<div style="width: 30%; float: left; border: 1px solid black;">
zyxwv
</div>
<div style="width: 30%; float: left; border: 1px solid black;">
qwerty
</div>
<p style="clear: left;">foo</p>
</div>
</body>
</html>
 
N

Neil Marshall

Ryan said:
IE 6.0 displays the following code as expected. Netscape Navigator 7.0
does not. Both get the same result up to a point. "Some other content"
is in a blue box to the left. Everything else is in a red box floated
against the blue box. "foo" clears everything above it and is at the
left border of the red box. The difference is in the three black
boxes. IE properly renders them as taking up about one third of the
red box's width apiece, each floated against the previous one. In
Netscape, however, each box's width is not even enough to contain the
letters within it. This behavior only seems to occur when nesting a
floated element within another floated element. Is this a known bug? A
feature? Is there a workaround?
Click to expand...

I looked, but couldn't find anything listed in http://bugzilla.mozilla.org/
As for if it's a feature, you're going to have to read the specs for CSS
on http://www.w3c.org/
 
R

Ryan Stewart

Neil Marshall said:
I looked, but couldn't find anything listed in http://bugzilla.mozilla.org/
As for if it's a feature, you're going to have to read the specs for CSS
on http://www.w3c.org/
Click to expand...

I've read them. According to my understanding, the way IE renders it is the
proper way. Further, if I read it right, floating any element automatically
makes it a block element. The odd thing is that Netscape seems to treat it
as an inline element ("it" being a floated element within a floated
element). The main symptom/problem is that I can't specify a width for these
inner floated elements.
 
T

Toby A Inkster

Ryan said:
The main symptom/problem is that I can't specify a width for these
inner floated elements.
Click to expand...

That is the crux of the matter.

http://www.w3.org/TR/CSS2/visuren.html#floats
| A floated box must have an explicit width (assigned via the 'width'
| property, or its intrinsic width in the case of replaced elements)

By not assigning an explicit width, you are telling the browser to use
'width:auto;' instead. Here is another quote from the CSS2 specs:

http://www.w3.org/TR/CSS2/visudet.html#q8
| If 'left', 'right', 'width', 'margin-left', or 'margin-right' are
| specified as 'auto', their computed value is '0'.

So Mozilla (correctly) reduces the width of the floated elements to
nothing.
 
R

Ryan Stewart

Toby A Inkster said:
That is the crux of the matter.

http://www.w3.org/TR/CSS2/visuren.html#floats
| A floated box must have an explicit width (assigned via the 'width'
| property, or its intrinsic width in the case of replaced elements)

By not assigning an explicit width, you are telling the browser to use
'width:auto;' instead. Here is another quote from the CSS2 specs:

http://www.w3.org/TR/CSS2/visudet.html#q8
| If 'left', 'right', 'width', 'margin-left', or 'margin-right' are
| specified as 'auto', their computed value is '0'.

So Mozilla (correctly) reduces the width of the floated elements to
nothing.
Click to expand...
Yes, but I *do* specify a width (see my original post), and it has no
effect, as if the element were an inline element. But according to section
9.5 of the spec, "Any floated box becomes a block box that is shifted to the
left or right ..." And the rest is about positioning.
 
T

Toby A Inkster

Ryan said:
Yes, but I *do* specify a width (see my original post)
Click to expand...

From your original post:

<div style="float: left; border: 1px solid red;">

So this <div> has zero width. Thus the child <div>s which have 'width:30%'
are 30% of zero.
 
R

Ryan Stewart

Toby A Inkster said:
From your original post:

<div style="float: left; border: 1px solid red;">

So this <div> has zero width. Thus the child <div>s which have 'width:30%'
are 30% of zero.
Click to expand...
Ahhh, I hadn't considered that. Thanks a bunch!
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Having trouble centering contents of td ? 3
Help with Visual Lightbox: Scripts 2
Need help , Having problem with Drag n Drop ? 9
Need help , Having problem with Drag n Drop... 1
I am trying to detect Which image id="" was clicked ? 22
Help with my responsive home page 2
Aligned to the left 3
Why is the e.target not working here? 1

Staff online

Members online

Total: 61 (members: 2, guests: 59)
Robots: 462

Forum statistics

Threads
473,995
Messages
2,570,230
Members
46,816
Latest member
SapanaCarpetStudio

Latest Threads

Top