<a><p/></a> invalid, but a > span {display:block} valid?

  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13502
  • Loc: Florida

Post 3+ Months Ago

I'm not supposed to place a block-level element within an inline element, but I can set the display of an inline element nested within another inline element to block.

For instance this would be invalid and make browsers go haywire.

Code: [ Select ]
<a><p>Word</p></a>


However this seems to be perfectly fine.

Code: [ Select ]
<style type="text/css">
a > span {display:block;}
</style>
 
<!-- ... -->
 
<a><span>Word</span></a>
  1. <style type="text/css">
  2. a > span {display:block;}
  3. </style>
  4.  
  5. <!-- ... -->
  6.  
  7. <a><span>Word</span></a>


Why is that ?
What am I missing ?
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • spork
  • Brewmaster
  • Silver Member
  • User avatar
  • Posts: 6241
  • Loc: Seattle, WA

Post 3+ Months Ago

<p> is a block element, while <span> and <a> are inline elements. Inline elements can be nested within each other and within block elements, but block elements cannot be nested within inline elements.

edit: Didn't see the part about displaying the span as a block. Strange.
  • graphixboy
  • Control + Z
  • Mastermind
  • User avatar
  • Posts: 1828
  • Loc: In the Great White North

Post 3+ Months Ago

I don't think the issue is really that its a block level element. Its more that browsers use block level elements to determine what is layout from what is content. Browsers have a hard time understanding where the boundaries of click able objects extend in the stacking order if the content of an anchor isn't inline (IE not layout). I assume this is a throwback from the early days when people didn't make links with anything other than text. Sort of the same way IE6 doesn't understand li:hover.

Coincidently this might be a safety mechanism as well since your browser would have a really hard time with something like
Code: [ Select ]
<a href="#">
<div id="myDropDownMenu">
     <a href="#">Some Link</a>
     <a href="#">Some Link</a>
     <a href="#">Some Link</a>
</div>
</a>
  1. <a href="#">
  2. <div id="myDropDownMenu">
  3.      <a href="#">Some Link</a>
  4.      <a href="#">Some Link</a>
  5.      <a href="#">Some Link</a>
  6. </div>
  7. </a>

In a case like that I'm pretty sure most browsers would freakout and who knows which element would receive a click

my gut tells me that its allowing the block declaration in the CSS since a browser inherently knows what to do with an <a> without relying on the css for more information outside of styling the content. The CSS thing is a really nice workaround for when you need a large block of content to be clickable though.

Post Information

  • Total Posts in this topic: 3 posts
  • Users browsing this forum: No registered users and 77 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.