XHTML (W3C) and DIV in a A

[adoxe]

Here is what I try to do :
I have a menu bar on the upper left part of a web page at http://www.ageuqtr.cjb.net/
the (achieved yet) goal is to have the whole buttons to be clickable, and not only the text part of them.
the (unachieved yet) goal is to keep this as it is, but to have it XHTML compliant...
so far, here is how I do it :

<div id="button_one">
  <a href="link_of_this_button">
    <div id="button_one_inside" style="width:100%;height:100%">
      <img src="icon" />
      Button text
    </div>
  </a>
</div>

The problem is : <div> tags are not allowed inside <a> tags... in XHTML...
is there a simple way to make a complete zone clickable without using such a pattern (div in an anchor) ?

[jscheuer1]

Why won't this work:

<div id="button_one"><a href="link_of_this_button"><img src="icon" /> Button text </a></div>

Both the image and the text are linked.

[mwinter]

http://www.ageuqtr.cjb.net/

Some of that content is unreadable when the background images aren't rendered. An explicit background colour should usually accompany such images.

[...] XHTML compliant...

XHTML is usually a waste of time, especially if you're always serving it as HTML. Still, your markup wouldn't be valid HTML, either.

<div id="button_one_inside" style="width:100%;height:100%">

Just so you're aware, this is equivalent to:

<div id="button_one_inside" style="width: 100%;">

A percentage value for the height property must eventually be calculated against an explicit length. For example,

<div>
  <div style="height: 60%;">
    <div style="height: 110%;">

might as well be:

<div>
  <div>
    <div>

However,

<div style="height: 10em;">
  <div style="height: 60%;">
    <div style="height: 110%;">

would be computed to:

<div style="height: 10em;">
  <div style="height: 6em;">
    <div style="height: 6.6em;">

On a similar line, the width property declaration is unnecessary. Block-level elements automatically take up as much horizontal space as they can within their containing blocks. Trying to force 100% width will only cause problems if you add padding, borders, or margins, as these areas will cause the element to overflow.

is there a simple way to make a complete zone clickable without using such a pattern (div in an anchor) ?

Yes. Style the link (a) into a block-level element. It will then take all horizontal space, and expand vertically to contain its contents. This should also mean you can remove the outer div element, too.

.button {
  display: block;
}


<a class="button" href="..."><img alt="..." src="..."> Button text</a>

Mike

[adoxe]

Mike !
you're my man !!!
You gave me so much so concisely, I feel like a newbie now though, please keep yourself from making me feel this way... hehe

I knew about the images thing but if you only could know why this was that way (not my choice, indeed...).

So thanks again, it's awesome !