Clickable DIV tag not working in IE8

HTML & CSS
1

Hello,

I found a script that helps to create a clickable div tag with support for the various browsers.
The script works in Firefox, Chrome and partially works in IE8

In IE8

  • the first row in the table is clickable.
  • the the second row in the table not clickable.
  • based on the script tutorial the entire content or anywhere within the div tag should be clickable but not in this case.
  • the mouse over hover color doesn’t change either.

any ideas as to why this wont work in IE8?


<html>
<head>
		<style type="text/css">
			div.clickable { position:relative;   }

			div.clickable a {
				position:absolute;
				width:100%;
				height:100%;
				top:0;
				left:0;
				text-decoration:none; /* Makes sure the link   doesn't get underlined */
				z-index:10; /* raises anchor tag above everything else in div */
				background-color: #FFF; /*workaround to make clickable in IE */
				opacity: 0; /*workaround to make clickable in IE */
				filter: alpha(opacity=1); /*workaround to make clickable in IE */
			}
			div.clickable:hover { background-color:#FF0000; }
		</style>
		</head>
	<body>
	<div class="clickable">
		
			<a href="http://www.google.ca"></a>
			<table>
				<tr>
					<td>test One </td>
					<td>test Two </td>
				</tr>
				<tr>
					<td>category111:</td>
					<td>Budget: </td>
				</tr>	
			</table>
	</div>
</body>
</html>
2

Do you have a valid doctype at the top of your real page? If not, you might add one :slight_smile:
Such as:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

or


<!DOCTYPE html>

Depending on your objective, you might want to add {display:inline-block;} to div.clickable so it will hug the table.

3

The :hover thing won’t work in IE8 because it doesn’t recognise :hover on any element other than <a>.
Just thinking aloud, but have you tried setting the link to display:block;? That might be why IE8 isn’t applying the height to it.

There is one big problem with the approach that you have used and that is that it is probably not accessible. Because the <a> is empty, there is no way to select other than by clicking on a visual representation.

The approach I prefer is to apply the <a> to the first element within the <div> so that there is some actual hyperlinked content to make it accessible, and then drop an onClick onto the whole <div>, which is more robust in that it doesn’t rely on hacks for IE8. You can then set a:hover and div:hover effects to cover all browsers.

Don’t have the code to hand as I’m on my phone but you can see an example of it in action at www.getdown.org.uk/s/naburn

4

The code is a bit odd, to say the least; purpose not clear. But :hover works fine as requested in IE8 with a proper doctype. Quirks mode, not so.


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<!--
http://www.sitepoint.com/forums/showthread.php?1207324-clickable-DIV-tag-not-working-in-IE8
2014.05.02 22:37
robin01
-->
<head>
    <style type="text/css">
div.clickable {
    display:inline-block;
    position:relative;
}
div.clickable a {
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    text-decoration:none;  /* Makes sure the link doesn't get underlined */
    z-index:10;  /* raises anchor tag above everything else in div */
    background-color:#FFF;  /* workaround to make clickable in IE */
    opacity:0;  /* workaround to make clickable in IE */
    filter:alpha(opacity=1);  /* workaround to make clickable in IE */
}
div.clickable:hover {background-color:#f00;}
table {outline:1px solid lime;}
    </style>
</head>
<body>

<div class="clickable">
    <a href="http://www.google.ca"></a>
    <table>
        <tr>
            <td>test One </td>
            <td>test Two </td>
        </tr>
        <tr>
            <td>category111:</td>
            <td>Budget: </td>
        </tr>
    </table>
</div>

</body>
</html>
5

Hi Ronpat,

Your suggestion worked, I added the doctype and it worked…

And also thanks to everybody who helped as well…
r