We help IT Professionals succeed at work.

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

Medium Priority
380 Views
Last Modified: 2013-11-19
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>
Comment
Watch Question

Top Expert 2007
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>

Not the solution you were looking for? Getting a personalized solution is easy.

Ask the Experts

Author

Commented:
Yeah that's the ticket, thank you.
Access more of Experts Exchange with a free account
Thanks for using Experts Exchange.

Create a free account to continue.

Limited access with a free account allows you to:

  • View three pieces of content (articles, solutions, posts, and videos)
  • Ask the experts questions (counted toward content limit)
  • Customize your dashboard and profile

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.