Solved

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

Posted on 2006-11-02
2
363 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>
0
Comment
Question by:rivusglobal
2 Comments
 
LVL 30

Accepted Solution

by:
VirusMinus earned 500 total points
ID: 17864337
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
 
LVL 10

Author Comment

by:rivusglobal
ID: 17864370
Yeah that's the ticket, thank you.
0

Featured Post

What is SQL Server and how does it work?

The purpose of this paper is to provide you background on SQL Server. It’s your self-study guide for learning fundamentals. It includes both the history of SQL and its technical basics. Concepts and definitions will form the solid foundation of your future DBA expertise.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

810 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question