Using the following code, IE7 doesn't show the hand pointer when hovering over the text. Firefox does.

I can force it by adding cursor:hand to the a p selector, but I know that's no longer valid.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<style type="text/css">

a {display: block;
border: 1px solid #000;}

a p {display: block;
height: 30;
background: red;
color: white;}

</style>

<body>

<a href="#">
<p>Here is one line of text</p>
<p>Here is another line of text</p>
</a>

</body>
</html>

It's the height declaration that's causing the issue, but what am I doing wrong here?

Thanks

1 answer

0
points
This was chosen as the best answer

Your doctype doesn't allow block elements like p inside inline elements like a for a start. Secondly you have a unitless height in the CSS - you need to add px to make it 30px if that's appropriate.

if you want two lines of text to be a link, just do this:

<a href="#">
Here is one line of text<br />
Here is another line of text
</a>
Answered over 6 years ago by Tony Crockford
  • Thanks - the unitless height was a typo. In my example code, I have set the a element to display:block. Is that still not allowed? Here's an example of what I'm trying to achieve: http://jason.rowan.tincan.co.uk/eventstest/templates/events3.html In IE7, hovering over the 'Great South Run places' text at top right loses the hand pointer. Same applies to the date text in the 'Upcoming events' below. To make big, hyperlinked blocks like the top right feature, I've always wrapped the content in an a element and set it to display:block. Is this wrong? Many thanks for your help. Jim Dean over 6 years ago
  • display:block doesn't validate the html, it merely suggests to the browser to display as if it were a block element. html5 allows to to wrap block elements in anchor elements, IE7 is finicky about valid code (go figure) so try, either making your links valid, or use Javascript (or jquery) to extend the links. the fitted plugin for jQuery is my usual weapon for this: http://www.trovster.com/lab/plugins/fitted/ Tony Crockford over 6 years ago
  • fitted plugin = perfect! thanks Jim Dean over 6 years ago