Anchor link click-able area using css - IE issue

Question

I have a menu as follows, I need to enable entire anchor area to be clickable, unfortunately it seems to none.

HTML

<div><a href='#'>Home</a></div>    
<div><a href='#'>Contact us</a></div>    
<div><a href='#'>Feedback</a></div>    
<div><a href='#'>Products</a></div>

CSS

div {height:40px; padding-top:5px; border:#999 solid 1px; margin-bottom:5px;}
a{color:#FFF; font-size:15px;text-shadow: -1px -2px 2px #212121; filter: dropshadow(color=#212121, offx=-1, offy=-2); padding: 13px 0 0 16px; display:block; height:25px; width:100%; zoom:1; line-height: 30px;  }

Fiddle as http://jsfiddle.net/3Hyty/2/

Updated: Problem really in IE

Seems fine to me. Why don't you think it's working? – j08691 Jan 07 '13 at 17:08 — j08691, Jan 07 '13 at 17:08

asutherland · Answer 1 · 2013-01-07T17:29:55.823

0

Your CSS is fine, the issue is the jsfiddle blocks link clicks by default unless they open in a new tab. Make the links have

target='_blank'

and they work in jsfiddle as shown here: http://jsfiddle.net/V3qML/1/.

Obviously for your production environment just use your code as is :)

edited Jan 07 '13 at 17:29

answered Jan 07 '13 at 17:14

asutherland

2,849
4
32
50

score 0 · Answer 2 · edited May 23 '17 at 12:27

0

Add an onClick to the div and style the div to use cursor:hand or cursor:pointer depending on browser see How can I make the cursor a hand when a user hovers over a list item?

Applied to your jsFiddle: http://jsfiddle.net/3Hyty/5/

The operative line being:

<div onClick="javascript:document.location.href='#';" style="cursor:hand;cursor: pointer;">Feedback</div>

edited May 23 '17 at 12:27

Community

1
1

answered Jan 07 '13 at 17:14

Kevin Whatever

184
7

2

This will not work if JavaScript is disabled and is completely unnecessary use of JavaScript when it can be achieved purely through HTML/CSS – Andy Jan 07 '13 at 17:15
I guess it depends on what the poster is trying to do. I'm assuming you wanted the entire div to be clickable. You will also need to style text of the "link" to be consistent with the others. Does that assumption make the answer less valid? – Kevin Whatever Jan 07 '13 at 17:16
It's the inline javascript that makes this a bad answer, not your assumption that the entire div should be clickable. – Forty-Two Jan 07 '13 at 17:22

score 0 · Answer 3 · answered Jan 07 '13 at 17:20

0

HTML5 allows for block elements inside anchors, which forces the anchor to the dimensions of the block element inside it. Alternatively, use spans and style them inline-block or block:

<a href='#'><div>Home</div></a>

or:

<a href='#'><span class="block">Home</span></a>

<style>
span.block {display: block;}
</style>

answered Jan 07 '13 at 17:20

isherwood

58,414
16
114
157

1

Why not just display the anchor as a block and avoid a meaningless tag? – Alexander Christiansson Jan 07 '13 at 17:36
Without knowing the source of the markup, I can't suggest that. It's certainly an option. – isherwood Jan 07 '13 at 18:07

score 0 · Accepted Answer · answered Jan 08 '13 at 14:08

0

a{
  margin:0 10px;
  display:block;
  float:left;
  width:100%;
  color:#F00; 
  font-size:15px;
  text-shadow: -1px -2px 2px #212121; padding: 0 0; 
  height:25px; 
  zoom:1; 
  line-height: 30px;
}

It was able to do with float left

answered Jan 08 '13 at 14:08

samuk

157
1
3
19

Anchor link click-able area using css - IE issue

4 Answers4