I'm trying to turn a div into a link. The code below works fine in firefox but in IE the mouse pointer doesn't react to the link. Is there a way around this? Thanks.
<html>
<head>
<style type="text/css">
.test{
width:100%;
height:100px;
background:#666666;
}
</style>
</head>
<body>
<a href="http://www.google.com">
<div class="test">
kjlkjlkjkljl
</div>
</a>
</body>
</html>
You can use the Cursor CSS Property. http://www.w3schools.com/CSS/pr_class_cursor.asp
But, your HTML is not correct. You cannot put a <div> inside an <a> tag like that.
I think IE's actually responding properly in this case.
A div is a block-level element; so it shouldn't be contained within an inline-element such as, for example, an a. If you use a span (in place of div) does that work in both IE and Firefox?
If you want to make it look like a link (in terms of the cursor), then you may want to use:
a > div, /* please change your mark-up to the following */
a > span {cursor: hand; /* for earlier versions of IE */
cursor: pointer; /* for, I think, IE 7+ and FF etc. */
}
Try:
.test{
width:100%;
height:100px;
background:#666666;
cursor: pointer;
}
Why do you want to use a div as a link?
Can't you just display your link as block?
a{
display:block;
}
Or use a span instead of a div.
As Welbog noted, the <a> and <div> elements should be reversed:
<div class="test">
<a href="http://www.google.com">
Lorem ipsum
</a>
</div>
Then in your style, you can make the <a> tag expand to fill the entire div:
.test a {
display: block;
width: 100%;
height: 100%;
}