StylizedWeb is a blog about web trends and tutorials, KnowHow community forum designed and maintained by Dejan Cancarevic who also runs Serbian IT job board at itPoslovi.info

Sadly it doesn’t work with Firefox 3 (Beta 4)

@YGW

As you said, replacing the and tags some semantic meaning is lost. The replaced tags degrade worse and are less accessible (specially strong vs h2), so it should be seriously considered.

If you don’t want to sacrifice the page meaning, use a behavioral specification (yeah, javascript :P) to link the whole li and achieve any hover effect through the “:hover”:

<ul>
<li>
<h2><a href=”somehwere”>Some headline</a></h2>
<p>Some text…&lt/p>
</li>
</ul>

Notice the missing . It think it should be specified throught CSS’s background-image property (it has no meaning!).

Thanks

Interesting note, here is the another approach on the block hover effect at smileycat

I like this tip

I have been after something like this for a while and so thanks.

@ Ywg
Yes, of course you are right, so let’s respect containment rules and put allowed tags into <a> i will make a correction

@Dejan

Breaking containment rules is an extremly bad habit, even if in cases like that it can be convenient.

I regulary have to fix some co-workers bugs caused by innapropriate tag nesting. In your example browser aren’t too strict, but try to nest a list inside a paragraph and look at the DOM output : your list is rejected from your tag.
There’s no guaranty that upoming versions of browser won’t do the same thing with your code (as this is the correct behaviour), therefore you shouldn’t do that.

A more correct method would be to write your file like that :

<ul>
<li>
<a href=”#”>
<img src=”someimage.gif” border=”0″ />
<strong>Some Headline</strong>
<span>Some text will go here</span>
</a>
</li>
</ul>


li *{
display: block;
}

It may be less specific from a semantic view, but it’s correct and there’s no risk for it to be broked in the future.

@ Laszlo
That’s correct, thanks for the note, I’ve forgotten to mention it in text

@ Country
Yes you are right it can’t pass validation this way, but it works. If you want it that way, you’ll have to make all elements blok and place <a> inside all of them, but then you won’t have hover effect

The :hover pseudo class is ignored in IE 6 for all elements except <a>. (IE7 can apply :hover class to all elements in standards-compliant mode.) A better way to use the :hover for the <li> element, and a little js to emulate :hover in IE6.

Thanks for this tips but it is completely incorrect.
The <a> tag is an inline element and it cannot contain some block elements (like H2, P, DIV, etc.).