Home/ Questions/Q 8158483
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-06T17:36:51+00:00

When I remove the DOCTYPE line this code works the way I want it

  • 0

When I remove the DOCTYPE line this code works the way I want it to. The “A” link fills the full cell height for the “Cell” cell when hovering over it and clicking anywhere within the cell. note: I need to use A, and not TD onclick javascript. I don’t understand why adding the DOCTYPE breaks it, or what I can do to fix it properly, and it is driving me nuts. I’m using IE9, but would like it to work in all browsers.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>X</title>
<style type="text/css">
table,td, th {border: 1px solid #000}
td a {display: block; height:100%; width:100%;}
td a:hover {background-color: yellow;}
</style>
</head>
<body>
<table>
<tr>
 <td>
    <a href="http://www.google.com/">Cell</a>
  </td>
  <td>
    <a href="http://www.google.com/"><img alt="x" src="http://www.google.com/intl/en_ALL/images/srpr/logo1w.png"></a>
  </td>
</tr>
</table>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Since the height of the <td> is not defined (it’s determined at layout), the height: 100%; of its children are ignored.

    Set the height and line-height of the <td>:

    td { height: 100px; line-height: 100px; }

    Demo: http://jsfiddle.net/ThinkingStiff/twVar/

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>X</title>
    <style type="text/css">
        table,td, th {border: 1px solid #000}
        td a {display: block; height:100%; width:100%;}
        td a:hover {background-color: yellow;}
        td { height: 100px; line-height: 100px; }
        img { display: block; }
    </style>
</head>
<body>
<table>
    <tr>
    <td>
        <a href="http://www.google.com/">Cell</a>
    </td>
    <td>
        <a href="http://www.google.com/"><img alt="x" src="http://www.google.com/intl/en_ALL/images/srpr/logo1w.png"></a>
    </td>
    </tr>
</table>
</body>
</html>

    ​

    • 0