CSS 2.1 Block inside inline behaviour

Hi,

I can't seem to find a definitive answer for this online anywhere, so
figured this list would be the best place to ask.

I have a simple test case with an inline element containing a block
element. I get different results depending on which browser I use ( no
surprise there ), but I am unsure as to which is the correct behaviour.

<body>
  <div style="border: 1px solid blue; ">
      <span style="background-color: yellow; color: red">
            Inline text
            <div>Block level element</div>
            More inline text
       </span>
  </div>
</body>

When I view this in Firefox 1.0.6, the text "Block level element"
doesn't have a background colour of yellow, but in IE 6 it does. In both
browsers, the text "Block level element" is red though.

Should the properties of the inline element cascade down to the block
level element? Are some properties cascaded differently? I've read
through the relevant portions of CSS 2.1 spec, but couldn't find an
answer. Any help would be appreciated.

Thanks,
Michael.

Michael Gannon Software Developer 
604.602.9928 x225 michael.gannon@blastradius.com 
BLAST RADIUS STRATEGYTECHNOLOGYDESIGN http://www.blastradius.com

Received on Friday, 26 August 2005 02:50:18 UTC