Rewrite this code: clickable divs

Question

I'd like to change this:

<a href='foo'> 
    <div> Moo </div>
</a>

to be standards compliant (you're not supposed to have block elements in inline elements). Wiring javascript to the divs just for navigation seems like a hack and degrades accessibility.. In this case, my requirements are for 2 sets of borders on my fixed-dimension links, so the above non-compliant code works perfectly after applying styles.

Also, is "a { display:block; }" a legal way to circumvent the validation?

Answer 1

Why not use a <span> rather than a <div> and set display:block on both elements?

Additionally, to answer your latter question: I don't believe adding display:block; to your anchor will make it pass validation. The validator checks to see if you're following (X)HTML rules, not how to present the page to the user.

Answer 2

I normally consider the <a > tag to be a special case for this purpose. You ought to be able to apply that to just about anything- it is after kind of the whole point of hypertext (<tr > comes to mind a good example). But if you have to pass a validator somewhere I understand.

Could you use a javascript onclick handler for the div, and eliminate the anchor entirely?

Answer 3

You may want to consider putting the div outside the a if it is only for display purposes, unless it's important that the outer border be clickable. Either this:

<div class="dbl_border_links"><a href="blah">Blah text</a></div>

or this:

<a class="dbl_border_links" href="blah"><span>Blah text</span></a>

will work and you can use something like this:

<style>
  .dbl_border_links, .dbl_border_links>* {
    display: block;
    border: 1px solid;
    padding: 1px;
  }
  .dbl_border_links {
    border-color: red;
  }
  .dbl_border_links > * {
    border-color: blue;
  }
</style>

to specify the styles. Personally I'd go with the div containing the a but either approach works.

Answer 4

Firstly, there is certainly nothing wrong with giving an anchor display:block; I'd say it's one of the more common things people do with CSS and is perfectly standards compliant. Secondly, there are a number of ways to achieve a double border on an HTML element. For one thing, check out the "outline" property:

http://webdesign.about.com/od/advancedcss/a/outline_style.htm

Admittedly, this will only work in the more modern browsers but should degrade gracefully as the outline doesn't take up any space in the page. If the contents of the link is to be an image you can simply give the <a> a little padding and a background colour as well as a normal border (in another colour) to create the impression of a double border. Or give the image a border of its own. Of course you can also do something along the lines of your original idea, though nesting your HTML the other way around, and simply assigning a different border to each element. Or you can use an inline element inside the link (like a <span> or an <em> or something) which you also set to display:block; (yes, this is also valid!). Happy coding!

Answer 5

If I understand correctly your intentions, you should place, as already mentioned, the div outside the anchor, and, to get the same presentation, make the anchor width:100%;height:100%. Cross Browser milage may vary. Also, you could dump the div altogether and give the anchor display:block;

What are you exactly trying to do?