TR Forums

Here's my blog. Notice the two images on the right side of the banner, that change opacity as you mouse over them.
http://ritchan.dasaku.net

http://validator.w3.org/check?uri=http% ... aku.net%2F
W3C says <div> inside <a> is illegal. The rest of the errors are easily fixed... but I like to have my theme compliant, at least. How do I achieve the same thing in a compliant way?

Switch the <div> and <a> around?

Flying Fox wrote:

Switch the <div> and <a> around?

++
This won't actually effect anything, but will bring you closer to standards compliance. Unless, you want the whole block to be clickable, in which case, take what you've specified for the div in terms of margins, borders and padding, and specify it for a.

Additionally, marking things up appropriately in the first place reduces how much fixing you have to do later. (e.g.: &amp; instead of &.)

I've been doing a little more looking into your source, and you didn't specify the language either:

OK so I switched the div and a around. Now they're unclickable (there's no link). I haven't specified any margins, borders or padding for the div class, but I have specified its width and height. I apply that to <a>. Boom, the unclickable image disappears.

Is there another way of doing this? EDIT: fixed by setting display:block. I found that works sometimes for disappearing elements.

1. Take the styling you applied in your stylesheet, and move it from the div to the anchor tag.
2. Remove the background-image from the style.
3. Add an img tag within the anchor, and set the src pointed to the original background image.
4. Style new img tag as needed, borders etc...

Verify functionality, revalidate with w3.

Note, this is based on the original markup when you first posted.