Elements to 'look like' a bullet point list inside an anchor link

Question

Hi All,

I am creating an element on my page like so:

<a href="">
<span class="benefits">
Free entry<br />
20% off in store<br />
First to know about latest courses
</span>
</a>

The client wants the whole area clickable, and the list of benefits to display with bullet points.

As far as i am aware lists cannot be placed inside anchor tags?

I had hoped I could insert a tag before hand that I could attach the css list-style-type rules to however that didn't work. I tried then making that element a fixed width and height with a background colour, however, it didnt display properly in IE6 - which I have to support.

Any ideas?

Answer 1

Set display:block for the A (anchor) element. Then put the UL list inside it.

Answer 2

Why not just make an unordered list with the same anchor inside each list item? You can then easily add custom bullets inside each anchor tag so that the bullets are clickable, and you can using padding instead of margins to space the anchors so that they are all touching.

Answer 3

As far as i am aware lists cannot be placed inside anchor tags?

You're right about that, and even though browsers may not care, it's not valid HTML.

My suggestion would be to use a DIV and make it clickable via JavaScript. You may still want to add a normal link inside the DIV for accessibility purposes. This way, you retain all the semantics of the markup (there's an <a> link and a <ul> list) and yet get the end result you wanted.

HTML:

<div id="box1" class="box">
  <a href="link"> ... </a>
  <ul> ... </ul>
</div>

CSS:

.box {
  width: /* something */;
  height: /* something */;
  cursor: pointer;
}

JavaScript:

document.getElementById('box1').onclick = function() {
  window.location = 'link';
}

Answer 4

You can wrap the various lines in spans w/ a class, and then use CSS to add the decorations by

1. Adding in some left padding and attaching a background image.

2. Try using the :before pseudo class and using CSS content to add in the bullet.

3. I can't remember if this works, but you can also try setting the span display=list-item and list-style-type=disc