How to control table row height in mozilla / strict DTD?

What is the correct way to use strict doctypes in Mozilla and yet have the top and bottom row of my table repect the required image height ( 5px ).  As far as I know, the height tag for table columns is depreciated in favour of CSS and yet I can't seem to get the rows/columns to fit snug.

<style type="text/css">
<!--
.template_content {
      height:      5px;
}

.template_content img {
      padding: 0px;
      margin: 0px;
}
-->
</style>

<table width="100%" style="margin-bottom: 10px" border="0" cellpadding="0" cellspacing="0" %attr%>
      <tr>
            <td class="template_content" width="5"><img src="/members/images/content/content_tl.gif" width="5" height="5"></td>
            <td class="template_content" background="/members/images/content/content_top.gif"></td>
            <td class="template_content" width="5"><img src="/members/images/content/content_tr.gif" width="5" height="5"></td>
      </tr>
      <tr>
            <td background="/members/images/content/content_left.gif"></td>
            <td background="/members/images/content/content_bkg.gif"><!--%CONTENT%--></td>
            <td background="/members/images/content/content_right.gif"></td>
      </tr>
      <tr>
            <td class="template_content"><img src="/members/images/content/content_bl.gif"></td>
            <td class="template_content" background="/members/images/content/content_bottom.gif"></td>
            <td class="template_content"><img src="/members/images/content/content_br.gif"></td>
      </tr>
</table>
LVL 10
rivusglobalAsked:
Who is Participating?
 
VirusMinusConnect With a Mentor Commented:
I managed to isolate the problem and came up putting a display:block on .template_content img. Everything else i tried didn't quite work. (i tried table-layout: fixed, spacer gif's, display: block on the cell etc etc)

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

<html>
<head>
      <title>Untitled</title>
      <style type="text/css">
      <!--
      .template_content {height: 5px; border: 1px solid #000;}
      .template_content img{display: block;}
      -->
      </style>
</head>

<body>


<table width="100%" border="0" cellpadding="0" cellspacing="0" >
      <tr>
            <td class="template_content" width="5"><img src="images/arrow_bent.gif" width="5" height="5"></td>
            <td class="template_content" width="5"><img src="images/arrow_bent.gif" width="5" height="5"></td>
      </tr>
</table>


</body>
</html>
0
 
rivusglobalAuthor Commented:
Yeah that's the ticket, thank you.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.