Rollover effects inside inline-elements (DIV inside an A)... not allowed!
I want to make a link that is built up of an icon and a text, like so:
The [X] represents a 12x12 pixel image. This is done by giving a DIV a background image, so I can change it when you hover over it. My XHTML code looks like this:
I'm using a DIV so I can set its height and width, and its background image. But when I validate my XHTML, I get this error:
<a href="#"><div id="cancel_icon"></div> Cancel</a>
document type does not allow element "div" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag.
Ok, so I know I can't put a block element inside an inline element, but how else can I get my link?