embedding other tags in an anchor tag

[chadmichael]

Hi. I''m having trouble making anchor tags that include other tags. I'm not sure whether my problem is because of some rule about what tags can be inside of an anchor or not. Or it might be my styling. Below I have a list based menu with some styling. The problem is that IE doesn't recognize the entire anchor inclusion as clickable. Any ideas?

<div class="menu" id="leftmenu">  <ul>				<li><a class="menulink" href="HomePage.action"><div class="centeringDiv menuLinkSize">home</div></a></li>				<li><a class="menulink" href="ArtistPage.action"><div class="centeringDiv menuLinkSize">artist</div></a></li>				<li><a class="menulink" href="GalleryMenuPage.action"><div class="centeringDiv menuLinkSize">galleries</div></a></li>				<li><a class="menulink" href="EventPage.action"><div class="centeringDiv menuLinkSize">events</div></a></li>					</ul></div>

style sheet

#leftmenu {background:transparent url(images/artists/1/bg_menu.gif) repeat-y scroll left top;float:left;width:200px;}.menu {text-align:center;}.menu ul {list-style-type:none;margin-top:50px;padding-left:20px;text-align:center;}.menu ul li {margin-left:0pt;padding-left:0pt;vertical-align:middle;}.menulink {background:transparent url(images/artists/1/bg_menu_button.gif) repeat scroll left top;display:block;margin:15px 0px;text-decoration:none;width:160px;}div.menuLinkSize {height:50px;width:160px;}

[aspnetguy]

you cannot put div inside an anchor. Why are you doing this? if you need the anchor to be block then use display:block in your style sheet.

[chadmichael]

you cannot put div inside an anchor. Why are you doing this? if you need the anchor to be block then use display:block in your style sheet.

Thanks. That's kind of obvious. Why does firefox accept this then? Seems like they should reject it as bad structure, if that's what it is.

[justsomeguy]

I tend to agree with Firefox, I would think that anything inside of an anchor should be clickable. It makes sense given the structure. I consider IE to handle that poorly. So I end up styling the anchor tag to give it a fixed width, border, background, padding, margin, etc. The only caveat with embedding things inside an anchor would be nested anchors.

<a href="link1"><div>text text text <a href="link2">where does this go?</a> text text text</div></a>