Welcome to WebmasterWorld Guest from 23.22.220.37

Forum Moderators: not2easy

Message Too Old, No Replies

div inside anchor - should it work?

anchor encloses div

     
7:07 am on Feb 3, 2007 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member

joined:Jan 16, 2007
posts:914
votes: 0


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?

8:04 am on Feb 3, 2007 (gmt 0)

Junior Member

10+ Year Member

joined:Oct 4, 2004
posts:136
votes: 0


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.

11:08 am on Feb 3, 2007 (gmt 0)

New User

5+ Year Member

joined:Jan 25, 2007
posts:5
votes: 0


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.
6:42 pm on Feb 3, 2007 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member

joined:Jan 16, 2007
posts:914
votes: 0


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.

6:45 pm on Feb 3, 2007 (gmt 0)

Senior Member

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Oct 1, 2002
posts:5199
votes: 0


Is not valid

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

<div> is a block level element

6:47 pm on Feb 3, 2007 (gmt 0)

Full Member

10+ Year Member

joined:Dec 25, 2003
posts: 269
votes: 0


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.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members