homepage Welcome to WebmasterWorld Guest from 107.21.163.227
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

    
div inside anchor - should it work?
anchor encloses div
cameraman




msg:3241597
 7:07 am on Feb 3, 2007 (gmt 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?

 

Emperor




msg:3241607
 8:04 am on Feb 3, 2007 (gmt 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.

puddletown design




msg:3241663
 11:08 am on Feb 3, 2007 (gmt 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.

cameraman




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

SuzyUK




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

Is not valid

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

<div> is a block level element

mep00




msg:3241906
 6:47 pm on Feb 3, 2007 (gmt 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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved