View Full Version : float: right fails within a SPAN of display: inline-block
bryndyment
06-29-2003, 10:01 PM
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.
It was apparently suppoted in pre-Mozilla 1.0 days, but it was broken enough to be moved back to a vendor-specific prefix so as not to ruin pages that depend upon it:
http://bugzilla.mozilla.org/show_bug.cgi?id=9458
display: -moz-inline-block;
Opera 7 also supports display: inline-block as far as I've heard, though I haven't tested it personally.
Anyway, what are you asking in your post? A workaround for this bug? Win/IE has a pretty much broken float model which makes it useless when trying to create layouts that work in compliant browsers without a bunch of workarounds. (CSS parser hacks or whatnot to apply IE-specific rules).
Bug or not, you shouldn't put a DIV inside a SPAN. Really, you shouldn't. What you make the span display as with CSS doesn't matter. That HTML is sick. :(
bryndyment
06-30-2003, 12:51 AM
Unless I misunderstand the purpose of CSS2.1's "display: inline-block" property, this is its exact purpose: to allow block-level content to exist within an inline element. Note the name: "inline-block".
Check out this example (http://www.bigtrouble.com/inline_block_1.htm) in Opera7+, or IE6+.
Note how clean the code is: we have multiple columns, each with automatically "shrink-wrapped" widths, centered horizontally. All without the use of float, absolute positioning, "clear=both", etc.
The more I think about this new property value, the more I'm thinking that a lot of current CSS layout "solutions" (involving float, absolute positioning, etc.) are (a) too complex, and (b) hacks (!).
And, if seeing a <div> or <ul> nested in a <span> still makes you squirm, note that, instead of a <span>, you *should* be able to nest these within a <div> that has its display set to "inline-block" (search/replace "span" with "div" on the source code to my link above).
And, if we do change the "span" to "div" in that source file, the code is HTML 4.01 Strict. However, while Opera (IMO, correctly) supports this, IE doesn't.
Originally posted by bryndyment
Unless I misunderstand the purpose of CSS2.1's "display: inline-block" property, this is its exact purpose: to allow block-level content to exist within an inline element. Note the name: "inline-block".
But CSS doesn't allow you to violate a DTD. The HTML and XHTML DTD's disallow the placing of block elements within inline elements because not every user-agent which understands HTML or XHTML needs to also be able to understand CSS.
And what do you have without CSS? I don't see how 'display' or any CSS property can affect the HTML syntax in any way. :confused:
bryndyment
06-30-2003, 01:22 AM
So, the one way to make CSS2.1, HTML 4.01 Strict AND me happy is to do exactly what I'm doing, but with: <div style="display: inline-block;"><ul><li>a</li></ul></div>, and NOT with: <span style="display: inline-block;"><ul><li>a</li></ul></span>.
CSS2.1 is happy, because "inline-block" is part of the approved spec.
HTML4.01 Strict is happy, because (even without style sheets), I'm merely nesting block-level elements within other block-level elements (and if style sheets aren't supported by the user-agent, these "columns" will stack vertically... fine).
Is this a valid argument? Everything validates, and, without style sheets, I still get all my content, but merely lose my columns.
(Thanks for the info so far.)
If you are going for strict it isn't even kosher to put an in-line element directly in BODY so you've better! :o
Originally posted by bryndyment
Is this a valid argument? Everything validates, and, without style sheets, I still get all my content, but merely lose my columns.
Yes. However, even though your argument is fine, I think you're arguing the wrong point. If you remove all the styling information, a document should be navigable and useful. If you used only <span/>'s, then everything would be on one line and very inaccessible to the respective user who has stylesheets disabled, his own in place, or is using an agent which doesn't understand CSS.
By using <div>'s, you are preserving the logical divisions of the page (your columns), and then styling them to present them in a more appealing manner to the full-featured visual agent.
bryndyment
06-30-2003, 02:04 AM
jkd, I don't think I was clear... in my last post, I was stating that the ideal solution was ULs (DIVs, etc.) within other DIVs, not within SPANs. So, I agree with your last paragraph.
meow, note that this first link below validates as HTML 4.01 Strict, so I guess it is kosher? Or is there something that I (or the validator) is misunderstanding?
In summary:
This ULs within DIVs (http://www.bigtrouble.com/inline_block_2.htm) link (a) validates (http://validator.w3.org/check?uri=http%3A%2F%2Fwww.bigtrouble.com%2Finline_block_2.htm), (b) works (as it should) in Opera7, and (c) doesn't "work", but fails gracefully (preserves content divisions) in both IE and NN.
This ULs within SPANs (http://www.bigtrouble.com/inline_block_1.htm) link (a) doesn't validate (http://validator.w3.org/check?uri=http%3A%2F%2Fwww.bigtrouble.com%2Finline_block_1.htm) (as it breaks the DTD, now I understand), (b) works (but probably shouldn't, since it's not valid HTML) in both Opera7 and IE5.5+, and (c) fails gracefully in NN.
bryndyment
06-30-2003, 02:45 AM
Follow-up, re: meow's comments. I now understand that the fact that my first link (above) validates is not contrary to your comment (since it's not using a SPAN immediately under the BODY).
On that note, my second link does not validate for two reasons: (a) SPAN immediately under BODY, and (b) ULs nested in SPANs.
Got it!
bryndyment
07-03-2003, 07:34 AM
FYI, I have posted my experiences with inline-block at:
http://www.bigtrouble.com/inline_block.htm
Thanks to those who helped me out at this forum.
vBulletin® v3.8.2, Copyright ©2000-2012, Jelsoft Enterprises Ltd.