Which Is The Correct Behaviour?

[EvilMonkeySlayer]

Ok, this is a slight oddity. I've already resolved it, i'm just curious whether the behaviour in Firefox & IE is correct or whether the behaviour in Chrome & Safari is correct.I have a bit of code like this:

<a href=#><div class="searchbox">Search result</div></a>

The CSS for the above is:

.searchbox {width: 290px;height: 50px;float: left;padding: 5px;font-family: Arial, Helvetica, sans-serif;background-color: #FFFFFF;color: #000000;text-decoration: none;}

What happens in Firefox & IE is that the text in the div has no decoration like an underline because it is clearly stated in .searchbox as having no text decoration. However, in Chrome and Safari it is underlined. (curiously in Chrome/Safari it is correctly picking up the font colour i've assigned to the div rather than applying the generic blue link colour)I easily resolved this by creating a .searchboxa class and simply sticking "text-decoration: none;" in there and adding it to the <a> tag. (<a class="searchboxa" href=#><div class="searchbox">Search result</div></a>)So, I'm really curious.. which behaviour is correct? Firefox/IE or Chrome/Safari?

[chibineku]

Hm...I don't think it's normal to wrap a block level element like a div in anchor tags. Why not use a span or just style the anchor to look like whatever you want it to look like? Or put the anchor tags around the content of the div?

[EvilMonkeySlayer]

Hm...I don't think it's normal to wrap a block level element like a div in anchor tags. Why not use a span or just style the anchor to look like whatever you want it to look like? Or put the anchor tags around the content of the div?

Well, at the moment i've got it so the entire div when hovered (.searchbox:hover) the div changes colour. The thing I want is to be able to click anywhere in the div and it takes me to my link.I'll post a screenshot of what i'm doing shortly. (at the moment just experimenting)

[chibineku]

Well, if it works and it's cross browser compatible, then run with it I guess - does it validate?

[thescientist]

doesn't the # need to be in " 's?

[EvilMonkeySlayer]

Well, if it works and it's cross browser compatible, then run with it I guess - does it validate?

Hmm...

Line 87, Column 58: document type does not allow element "div" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag

Nope, that's using XHTML 1.0. Bit of a bugger that.I need it so that the entire div leads to a link and that it can change colour on hover. (plus showing the link mouse cursor is pretty important too to indicate that it's a link)

doesn't the # need to be in " 's?

I'm not too worried about that stuff at the moment, i'm mostly experimenting. My plan is once i'm happy with what i've got to turn it into part of a search box that dynamically fetches search results as you type from a db. I'm just playing with ideas for how the search results would look at the moment. Like having a fancy shadowed box listing the results below the search text field. (like how on result 2 it shows a mini-image which is intended to be say a product preview or something.. when mouseover on the image it shows a higher larger quality version from some js i've got sorted but not yet added)I suppose with a simple bit of JS I could make the div an onclick event and also change the cursor too. Much simpler to use an <a> tag though.

[dsonesuk]

you don't need divs! inside an anchor, which as mentioned is not valid. just make anchors into a block element.searchbox {width: 290px;}.searchbox a{display: block;height: 50px;width:100%;padding: 5px;font-family: Arial, Helvetica, sans-serif;background-color: #FFF;color: #000000;text-decoration: none;}.searchbox a:hover{background-color: #CCC;}<div class="searchbox"><a href="#">Search result</a></div>edit: would help if i added display: block; now done.

[EvilMonkeySlayer]

you don't need divs! inside an anchor, which as mentioned is not valid. just make anchors into a block element.searchbox {width: 290px;}.searchbox a{display: block;height: 50px;width:100%;padding: 5px;font-family: Arial, Helvetica, sans-serif;background-color: #FFF;color: #000000;text-decoration: none;}.searchbox a:hover{background-color: #CCC;}<div class="searchbox"><a href="#">Search result</a></div>edit: would help if i added display: block; now done.

Great minds think alike.I've just been experimenting along these lines, btw.. it needs to be float in order to flow correctly. (search box expands as more results are added)I did a quick and dirty which works.

<div class="searchbox"><a style="display:block; width:300px; height:60px; margin-left:-5px; margin-top:-5px;" class="searcha" href=#>Search result 3</a></div>

I think it might be ok to apply to the more complex search result 2. Not tried yet.EDIT: Now just moved that CSS into the searcha2 class. (this is just me experimenting, not any production site or anything)Hmm, the text is now at the very left edge of the div. I don't like that.

.searcha2 {	text-decoration:none;	display:block;	width:295px;	height:60px;	margin-top:-5px;	color: #000000;	padding-left: 5px;	margin-left: -5px;}

That's much better.Hmm, doesn't work (with the more complex search result type 2) in the sense that it works in a browser but it doesn't validate because there are div tags still inside of the <a> tag.I think from a technical standpoint I will have to go the JS route, which isn't too bad anyway since my plan was that this search box would appear as part of some JS (like I said, live results as a user types into a search box).Yep, adding onclick="window.open('test.html','_self')" to the div solves the problem.Fully validates now perfectly fine.So, moral of this story is you're not meant to put a div tag inside an a tag even though it's a very simple way to make a div a link.

[EvilMonkeySlayer]

It fully validates and i've got a slightly improved version.On the mouseover of the preview image it can show a larger version that follows the mouse cursor as long as it is over the preview image.Do you guys think I should keep the dotted line and maybe vertically center the text "Click here for all results"? Maybe I should make the div itself smaller, it's not as if all that vertical spacing is needed.Also, the shadow I think maybe I should replace with something a little bit blurred out slightly.EDIT: If anyone's curious I can upload the entire thing as a compressed file to play with? I'm always up for some suggestions and constructive criticism.