homepage Welcome to WebmasterWorld Guest from 23.20.149.27
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Pubcon Website
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

    
display inline-block
didn't know they worked like that.
appi2




msg:3685814
 7:46 am on Jun 28, 2008 (gmt 0)

Not realy a question more of a 'so thats how they work'.
It's not realy easy to understand from the CSS specs [w3.org]

inline-block
A block box, which itself is flowed as a single inline box, similar to a replaced element. The inside of an inline-block is formatted as a block box, and the box itself is formatted as an inline box.

Clear as mud!

Example


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS 2.1 Inline Blocks</title>
<style type="text/css">
* {margin:0; padding:0;}
body{font-size:100%; width:980px; font-family:Arial, Helvetica, sans-serif; margin-left:1em;}

#inlineBlockTest div {display:inline-block; width:190px;height:150px; background:tan;}
</style>
</head>

<body>

<h1>CSS display : inline-block</h1>

<p>Notice gaps between box's. Margin or padding does not get rid of them.</p>
<p>Looks like the position is determined by the baseline? of the last line of the content.</p>
<p>The last box has no content.</p>

<!--Start inline-blocks-->
<div id="inlineBlockTest">
<div><p>The inline-block property aligns with the last line of the contents baseline. (p)</p></div>
<div><p>just text (p)</p></div>
<div><h2>Block3 (H2)</h2></div>
<div><h2>Block4 Aligns with bottom of this line (H2)</h2></div>
<div></div>
</div>
<!--End inline-blocks-->

<h3>Looks same in:</h3>
<ul>
<li>FF 3</li>
<li>OP 9.5</li>
<li>S 3.1</li>
</ul>
<p>Note: Konqueror 3.59 and 4 show the box's all at same Y position ( as if they were float:left; ).
</body>
</html>



 

Xapti




msg:3686185
 1:38 am on Jun 29, 2008 (gmt 0)

Uhh... what's the point of your example, you didn't explain the purpose.
I also assume you want help in how it works?
I never really delt with it much yet since it hasn't been supported too well yet, (but it's very close) but I understand the basic premise of it. W3C is pretty common for explaining things in a complicated manner, but it does explain things so they are TOO hard to understand when you think about it, and know what certain terms mean...

Inline-block just means you got an element that displays like an image (inline, replaced element), but in the inside it is like a block element, because it can contain multiple liines and such. It's sort of like a floated div, without having to hug one of the sides (among other attributes) of it's container.

appi2




msg:3686497
 7:56 pm on Jun 29, 2008 (gmt 0)

Uhh... what's the point of your example, you didn't explain the purpose.

Can't say I fully understand the purpose anyway, a quick quote from the quirksmode site is it's supposed to be used for inline elements that you want to apply a width to.
Which again doesn't really answer all questions.
And even your 2nd paragraph makes me go eh what where?

I actually didn't know, it did what it does in the example above. Every time I've played with it before, it just happened that the content was on one line only (images, single line links). So it displayed like float:left

So what would I want to use inline-block for?
I'll think of something eventually ;)

What's everyone else going to use it for?

Should also point out konqueror 4.01 does display correctly.

swa66




msg:3686674
 5:09 am on Jun 30, 2008 (gmt 0)

SuzyUK did a post a while back on how to make display:inline-block work cross browser (IE needs magic (as usual)), for older FF implementations they need some -moz values in additions to some trickery):
[webmasterworld.com...]

The neat thing is centering. text-align:center and then display:inline-block the children and you can have neat centering going on for e.g. a photo album's thumbnails ...

appi2




msg:3686740
 9:22 am on Jun 30, 2008 (gmt 0)

hmm so vertical-align is the bit of magic that makes this useful.
Ok so what am I doing wrong here (FF2 fails, even IE6 does it right!)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS Inline block</title>
<style type="text/css">
span {
display: -moz-inline-box; /* For FF<3 */
-moz-box-orient: vertical; /* For FF<3 */
display:inline-block;
width:4em;
/*Try Setting height FF2 still only shows first line*/
/*height:5em;*/
margin-left:0.5em;
background:tan;
}
#ex1 span {vertical-align:top }

#ex2 span {vertical-align:middle;}

#ex3 span {vertical-align:baseline}

</style>
<!--[if lt IE 8]>
<style type="text/css" media="screen">
span {display: inline;}
</style>
<![endif]-->
</head>

<body>
<p id="ex1">It's makes lots more sense<span>You can do stuff like this.</span> now with vertical alignment</p>
<p id="ex2">It's makes lots more sense<span>You can do stuff like this.</span> now with vertical alignment</p>
<p id="ex3">It's makes lots more sense<span>You can do stuff like this.</span> now with vertical alignment</p>
</body>
</html>


Xapti




msg:3687231
 10:22 pm on Jun 30, 2008 (gmt 0)

I'm not sure how older version of firefox work with what you wrote, but I would think that the display:-moz-inline-box is getting replaced with display:inline-block since it's the most recent item... I'm just guessing, since maybe it ignores the display:inline-block if an older version encounters -moz-inline-box...

appi2




msg:3687491
 7:48 am on Jul 1, 2008 (gmt 0)

From what I understand it's actually -moz-box-orient: that property effects any children of the tag that it's applied to. So in suzy's examples there are children but in that example above, there are no children of the span for it to be applied to.

SuzyUK




msg:3687568
 9:44 am on Jul 1, 2008 (gmt 0)

appi2, think that's it too

-moz-inline-box is not a true equivalent of inline-block it was just a moz CSS extension/property that does something very similar. The fact that you either need an internal div with width or the -moz-box-orient property to "shore it up" to suit speaks for itself.

usually inside a "box", think moz's XUL use case - there would invariably be other elements, e.g. an image, a caption, icons.. etc

So in using this you have to be aware that you still have to work within certain limitations until FF3 is the de-facto.

Your case sample shows the clearer reason why the CSS inline-block display property is different from The Moz CSS Extension - in CSS we very well might simply need a display suggestion for an internal span, i.e. we don't want to break a paragraph if CSS were turned off, so rightly you're formatting the <span> directly

for moz, though even in this simple case you're going to need a double wrapper, and using box-orient you still don't need a width (which is the step up from the 2005 post ;)), and you can still do it so the paragraph doesn't break with CSS off, simply use another inline element

e.g.
<p id="ex1">It's makes lots more sense<span><em>You can do stuff like this.</em></span> now with vertical alignment</p>

then make the em {display: block;} via CSS, inside the moz-box will make it work again, and keeps the HTML valid..

Xapti providing the rules are given in the order of the cascade e.g.

  1. display: -moz-inline-box; /* For FF<3 */
  2. -moz-box-orient: vertical; /* For FF<3 */
  3. display:inline-block;

then <FF3 will use display property(#1) as it will not recognize inline-block(#3).
FF3 will recognize inline-block and will use #3 to overrule #1,
then because #2 only applies to a moz-box FF3 will not use it either.

that's the theory anyway ;)

-Suzy

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved