div inside anchor - should it work?

anchor encloses div

[cameraman]

My navigation menu is javascript, but that's apparently not SE friendly. I like my javascript menu and don't particularly want to duplicate it elsewhere on the page, so I decided to place an html one and then just use javascript to replace it. In trying to mimic the appearance of the javascript one, I tried this out:
#menu { background: url('bgimage.gif'); width:110px; }
div#menu div { border:thin outset; padding:3px; }
div#menu a:link div { text-decoration:none;color:black; }
div#menu a:visited div { text-decoration:none;color:black; }
div#menu a:hover div { text-decoration:none;color:black;background-color:cyan; }

<div id="menu">
<a href="example.com"><div>Examples</div></a>
</div>

I wanted it that way so that the whole div would change color instead of just the anchor's little box, and of course I couldn't use javascript to do it with an onmouseover because if the agent executes javascript then, well, the other menu will be in place.

My theory was that if an anchor can enclose an image, why not a div, but I really didn't expect it to work.
It does work in FF, but not in IE6. FF is, however, insisting on underlining the text.

As I type this it occurs to me that I can just make the anchor itself bigger and bordered so I'll do that, but I'm still curious. Do you think it's legitimate and IE6 is yet again not playing nice, or did FF just sort of accidentally do what I intended?

[Emperor]

Hi,

I'm not sure what you're trying to accomplish but try something like this:

div.navmenu a {
display: block;
text-decoration: none;
}

div.navmenu a:hover {
background-color: #a32e20;
text-decoration: none;
}

That will change the entire background of the <div>, not just the <a> box. If that's what you want then just add the additional <a> styles.

[puddletown design]

thats right, it would be better to just format the anchor as a block element. if you really had to you could use a span inside the anchor also.

[cameraman]

Thanks for the replies, but like I said in the original post I already figured out that the better way was to apply the styles to the anchor.

So I don't need to know how to fix a problem, all I want to know, for edification, is
<a href="example.com"><div>examples</div></a>

valid or not? Actually put that way I guess it stopped being a CSS question and is now an html/browser question.

[SuzyUK]

Is not valid

<a> is an inline element, and should only contain other inline elements

<div> is a block level element

[mep00]

That will change the entire background of the <div>, not just the <a> box.

That's incorrect; the div's background is unaffected. What's happening is the anchor is expanding to fill the div, so all you see is the anchor and the div's background is blocked. While in this case the difference is mute, if the div had another child besides the one anchor, it would make a significant difference.