DIV with style"display:inline-block" inside P

[manixrock]

I know from personal experience, the specs and some great posts that DIV's are not allowed inside of P tags. And it's normal to be so, but what about inline-blocks?

I could simply use SPAN or some other inline element which works inside the P, but IE only renders natural blocks as inline-block. Meaning if it's an inline element it will work in Firefox but not IE, if it's a block the other way arround.

So how do I solve this quanundrum?

Either I need an element which is a natural block in IE and is allowed inside a P by the specs, or I'll use DIV instead of P, but I would much rather avoid this.

[edited by: tedster at 5:13 am (utc) on April 9, 2009]

[swa66]

As far as I know, legacy IE versions need to be tripped back to display:inline;
See the conditional comment in [webmasterworld.com...]

[alt131]

Welcome to webmasterworld [webmasterworld.com] manixrock,

Meaning if it's an inline element it will work in Firefox but not IE, if it's a block the other way arround.

Might help to clarify which browser versions are causing the troubles because this is usually the other way around:

• ie6&7 honour inline-block on elements with a default display of inline
  
• ie8 honours inline-block regardless of default display
  
• ff2 does not understand inline-block at all
  
• ff3 honours in-line block regardless of default display
  
• Op(9?)+winSaf honour inline-block regardless of default display
  

The post linked above sets display back to inline for ie to solve an issue for elements with

display:block

as default.

In your scenario it should be possible to use a <span> inside a <p> (or preferably something more semantically correct) unless you need to support ff2.

Also keep in mind the difference between HTML and styling. While elements must be used with respect for their default display for the HTML to validate, that does not prevent styling them with a different display to achieve a desired design.

[manixrock]

Thanks swa66, that's exactly what I was looking for.

ie6&7 honour inline-block on elements with a default display of inline

Yes, my mistake. Thanks for your input.