Problem with validating a div part of my website.

Hey, I'm trying to w3c validate my website, but it gives this message.

It's about this line:

<a href="index.php"><div id="passive_button">Home</div></a>

Code (markup):

Which has the following CSS file attached:

#passive_button {
background-image: url(images/site/passive_button.png);
background-repeat: no-repeat;
height: 18px;
width: 109px;
padding: 6px;
}
  #passive_button:hover {
	 background:url(images/site/active_button.png) no-repeat 0 0;
	 color: #fff;
}

Code (markup):

I know it's saying I can't place <div> tags between <a> tags, but I've no idea how else to solve the problem. <a href="index.php" id="passive_button">Home</a> does not work, because it messes up the buttons.

I want to give the whole div (which is a background image with a text) a hyperlink to an other page. Any ideas?

 

Hello, i have a same trouble with you.. i just checked w3c validator but there are too much error scripts..

No idea yet..

 

You must not wrap a "DIV" tag with "A" tag.

 

I already figured that out, Sherlock. My question is if somebody knows an other way to get the same result.

 

Oh. I see your point...
For the best result. Put the a tag inside the DIV. and place a javascript (onclick="location.href='http://example.com'") for the DIV.

 

Yeah, that's what I tried. But if I do that, only the text within the specific div will become a hyperlink, not the background. I want the background to be a hyperlink too.

I'll try that after dinner. Be right back.


Thanks to everyone that tried to help me so far.

 

Then use the image as part of the link and rewrite your css:
<div><a><img src="">Home</a></div>

Javascript is not a wise choice.

 

If I do that, will the text still appear in the image? (Since the image isn't a background image any more).

Edit:

I tried

<div id="passive_button" onclick="location.href='home.php';" style="cursor:pointer;">home</div>

Code (markup):

and that worked. Thanks to everyone for trying to help me. Feel free to explain a better method or improve/criticise the one I'm using now .

 

Like I said, adjust your css and move it off screen. Javascript is a hammer solution.

 

div a {text-indent:-9999px}
should solve the problem sherlock

 

make the a tag into a block element and then add the background to the a tag, like this

#passive_button a {background:url(images/site/active_button.png) no-repeat 0 0;
color: #fff; width:110px height:100px, display:block;}

<div id="passive_button"><a href="index.php">Home</a></div>

 

Remove the </div> from the </a> and place like this </a></div> problem sorted!!

 

Too late you already solved the issue. This always goes at the end of any script </div> its the end of the area it covers

 

You could also use a <span> instead of a div to get the same results.

 

I was gonna say that! Darn

To clarify efuller meant: