float: right fails within a SPAN of display: inline-block

Forum Moderators: not2easy

Message Too Old, No Replies

float: right fails within a SPAN of display: inline-block

bryndyment

9:20 pm on Jun 29, 2003 (gmt 0)

Just tracked down this bug in IE5.5+ (other browsers aren't yet supporting CSS2.1's "display: inline-block" property value, so this won't apply).

If you have a DIV with "float: right" nested within a SPAN with "display: inline-block", then the SPAN is not rendered inline. All works fine if the DIV is "float: left", though, so it's obviously a bug.


<html> 
 <head><title>test</title></head> 
 <body> 
 11111 
 <span style="display: inline-block;"> 
  <div style="float: left;">22222</div> 
 </span> 
 33333 
 </body>  
</html>

(Change "left" to "right" to see the bug.)

In other news, I'm really disappointed that NN7 doesn't support "display: inline-block" at all. It's a great mechanism for simplifying many CSS layouts.

RonPK

9:59 pm on Jun 29, 2003 (gmt 0)

Some things I'm thinking of:

1. isn't it 'illegal' to have block level elements within inline elements, i.e. a DIV within a SPAN?

2. display: inline-block is not in CSS 2, which is the latest W3C recommendation on CSS. It gets mentioned in CSS 2.1 and 3, but these are not recommendations, so you can't blaim browser manufacturers for not supporting it...

bryndyment

10:49 pm on Jun 29, 2003 (gmt 0)

If I understand "inline-block" correctly, you are allowed to have block-level boxes within them. I believe that's the actual purpose of this new property value. The SPAN gets displayed inline (as it always does), but the contents of the SPAN are treated as a block. And, blocks can contain blocks.

(Not blaming Netscape... just disappointed that they haven't included support for this CSS2.1 propery yet, since it really is powerful. It's been in IE since 5.5, and I believe Opera supports it as well.)

bryndyment

11:15 pm on Jun 29, 2003 (gmt 0)

FYI, here is an example [bigtrouble.com] of "display: inline-block" being used to create a multi-column layout.

It works in Opera 7, IE5.5+, but not Netscape (again, no blame, just disappointment...).

Notice how clean the code is. We have multiple columns, centered horizontally, "shrink-wrapped" widths, and all done without float or absolute positioning.

RonPK

7:06 am on Jun 30, 2003 (gmt 0)

Notice how clean the code is. We have multiple columns, centered horizontally, "shrink-wrapped" widths, and all done without float or absolute positioning.

Nice!

that's all i've got to say... don't see any easy workaround for the float:right problem

drbrain

4:19 pm on Jun 30, 2003 (gmt 0)

Gecko (NN7's rendering engine) will only implement for CR or TR technical reports. Since CSS2.1 is still a WD, Gecko has not yet implemented them.

I suggest use use 'display: table-cell' in place of inline-block for Gecko browsers.

drbrain

4:20 pm on Jun 30, 2003 (gmt 0)

Oh yes, and this is bugzilla bug 9458.