How to make Chrome and IE display block hyperlinks correctly

Question

I have always used the following code to make < a > links fill the content of their container. Both chrome and IE are now display the < a > link the size of the content.

I have tried explicit pixel height and important tags but chrome still insist on making the link the size of the content. The link has no content and so displays as 0px height and width.

This is how I make block hyperlink?

HTML

<div class="mydiv">
    <a href="#"></a>
</div>

CSS

.mydiv {
    height: 50px;
    width: 50px;
    display: block;
}
.mydiv a {
    height: 100%;
    width: 100%;
    display: block;
}

Answer 1

did you mean: this

Html:

<div class="abc">
  <a href="#"></a>
</div>

css:

.abc {
height: 50px;
width: 50px;
display: block;
border-style:solid;
border-width:3px;
}
.div a {
height: 100%;
width: 100%;
display: block;
}

Just define a class for the div and link and style it as you like.

Answer 2

Here you go - tested in Chrome and IE and works in both:

Here is the HTML:

<div class="abc">
    <a href="http://www.google.com"></a>
</div>

and the CSS:

div.abc { display:block ;
    width:200px ;
    height:50px ;
    background:blue ;
}

.abc a { display:block ;
    width:100% ;
    height:100% ;
}

You can edit the height and width in div.abc and the hypertext link will adjust accordingly.

Demo here: http://jsfiddle.net/PRZaX/

Answer 3

You should remove the . from div, . is selector for class name, here you are writing style for direct div

div {
height: 50px;
width: 50px;
display: block; background:red
}
div a {
height: 100%;
width: 100%;
display: block;
}

DEMO

Answer 4

I think you should start with version of Chrome and IE and also you operating system, while the piece of code you gave, works as a charm.

I know, that older versions of IE had some problems with displaying anchors as blocks and the proper way to fix it was setting fake background, like: background: url(/); , but I'm pretty sure that's not the case.

Also please provide information if you have any additional stylesheets applied to your page.