Comments on: Let’s All Get Inline (In a Block, In a Block)

By: Paul OB

Paul OB — Thu, 28 May 2009 22:08:17 +0000

Hi Dinesh thanks for your comments.

Were you asking another question there or have I misunderstood

By: dinesh

dinesh — Thu, 28 May 2009 07:11:05 +0000

Thanks for this clear and understanding inline-block.

I need a good example using haslayout trigger.

for example
zoom:1

By: Paul OB

Paul OB — Tue, 26 May 2009 16:03:41 +0000

@John, The demo does already have a full doctype (http://www.pmob.co.uk/search-this/inline-block-example2.htm).

I would always advise to use a full doctype anyway or all versions of IE revert to quirks mode and then all bets are off.:)

All my articles assume that valid code and full doctypes (with uri) are in effect.

Thanks for mentioning it anyway in case it wasn’t clear.

By: John Middlemas

John Middlemas — Tue, 26 May 2009 09:44:18 +0000

If you are using IE8 with your code then you need to use a !DOCTYPE declaration. Without that it will not display correctly at all. Firefox does not have this problem and displays correctly in both quirks mode and standards mode.

If you don’t want to have a !DOCTYPE declaration then altering your code to the following does the trick:-

By: Paul OB

Paul OB — Thu, 26 Mar 2009 22:24:44 +0000

Thanks for your comments, I have edited the article to take your comments into account

By: BrightBold

BrightBold — Thu, 26 Mar 2009 18:09:45 +0000

This is a great article – you lay everything out very clearly.

After the line: “…we must specify it in a separate rule so we don’t cancel out the display:inline effect,” you should reverse the order of the two rules in the CSS example. That made me think the “display:inline” rule needed to come first, and I couldn’t figure out why my code wasn’t working until I read the comments and saw I had it reversed.

(And yes, I know it’s better to have that rule in the IE conditional stylesheet, but I didn’t put it there because I thought that rule needed to load first!)

Thanks for this clear and thorough explanation.

By: Articles You May Have Missed in 2008, But Shouldn’t Have

Articles You May Have Missed in 2008, But Shouldn’t Have — Fri, 02 Jan 2009 16:04:21 +0000

[...] Let’s All Get Inline (In a Block, In a Block) [...]

By: Kravvitz

Kravvitz — Wed, 05 Nov 2008 20:00:16 +0000

I wasn’t aware that hasLayout had different triggers on inline and block level elements, but with a little testing in IE6 and IE7 with the IE Dev Toolbar, Paul seems to be right (as usual ).

Thanks for explaining this, Paul. I’ll be sure to add a link to this page on each of the two demo pages on my site that demonstrate this technique.

By the way, I have a new blog on my site.

By: konteyner

konteyner — Thu, 11 Sep 2008 14:05:17 +0000

i see why it should behave differently. to inline elements will make them behave like block-inline elemented.

By: Paul OB

Paul OB — Wed, 10 Sep 2008 11:29:23 +0000

@dir _ What are you not sure about?

A haslayout trigger will only apply to the element if the element understands the property being applied.

For example “height” and width” are haslayout triggers but for inline elements height and width don’t apply so they will not trigger “haslayout” on inline elements.

Applying haslayout to a block elements will not make it behave like an inline-block. Applying haslayout to inline elements will make them behave like inline-block elements.

Therefore “haslayout” does affect inline and block elements in a different manner.

By: dir

dir — Mon, 08 Sep 2008 12:44:22 +0000

that haslayout behaves differently on block vs inline elements (i am not sure about)

By: kabin

kabin — Fri, 05 Sep 2008 18:13:39 +0000

the conflict of using the same display property.

By: Paul OB

Paul OB — Sun, 31 Aug 2008 10:47:36 +0000

@John: The display:inline rule must follow the display:inline-block rule and must be in a separate rule or it doesn’t work properly due to the conflict of using the same display property. Although it partially works in reverse the effect is not the same.

Setting display-inline and using zoom as a haslayout trigger is a much simpler method as all styles can remain in the same block because there are no conflicts between the properties.

By: Golgotha

Golgotha — Sat, 30 Aug 2008 14:46:55 +0000

Thanks Paul, that clears things up.

By: dougwig

dougwig — Sat, 30 Aug 2008 03:32:58 +0000

Nice!

I look forward to applying this technique to vertically center a string of inline elements —images, spans, inputs, labels, etc within a “line-box”.

Would be nice to give the floats a rest!