CODEWITHSUNDEEP
htmlcssinternet-explorergoogle-chromeanchor
DreamTeK
DreamTeK

Reputation: 34307

How to make Chrome and IE display block hyperlinks correctly

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;
}

Upvotes: 1

Views: 1866

Answers (4)

nd_macias
nd_macias

Reputation: 812

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.

Upvotes: 0

Cynthia
Cynthia

Reputation: 5403

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/

Upvotes: 1

s.mujahid8
s.mujahid8

Reputation: 189

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.

Upvotes: 1

Sowmya
Sowmya

Reputation: 26989

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

Upvotes: 0

Related Questions