Forum Moderators: open
If you declare a font-size in the body say font-size:13px; it seems to set the standard for how small you can set a table cell's height.
If I do this:
<td height="4" background="4pixleHeigh.gif">
Even though my height is 4px and my background is 4px in height the table cell will always be the height needed to accommodate the default font size I set in the body.
So to solve this I would do something like this:
<td height="4" background="4pixleHeigh.gif" style="font-size:1px;">
Am I crazy or are there other ways?
i think there can't any spilth.
However, I'd be very cautious about showing a 1px font size to search engines, especially right in the HTML, but even in external CSS. It might be picked up as an attempt at hidden text at some point.
What browser are you talking about here, IE? I'd like to do some experiments and come up with a safer, saner method.
In the stylesheet:
td.test {height: 1px; background-color: black;}
p.test {line-height: 1px; margin: 0px;}
In the html (table code left out):
<td class="test"><p class="test"> </p></td>
renders a black table cell 1 pixel high in IE6, Opera 7, Netscape 7
Edouard_H mentioned Line-Height I’ve played with this before and it works most the time but I found it can’t be relied on in all browsers.
What browser are you talking about here, IE? I'd like to do some experiments and come up with a safer, saner method.
That would be IE and as far as a saner method I think a Transparent Gif 1x1 px in size set to the height or width you want is the best method.
<td><img src="traz.gif" width="1" height="4"></td>
I could be wrong but I think this is the only guaranteed cross browser solution. I just don’t like all those tiny gifs I find them irritating.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="screen">body {font-size: 14px;}
table {border: 0; padding: 0; width: 300px; font-size: 14px;}
td {padding: 0;}
td.high {background: yellow; height: 40px;}
td.low {background: lime; height: 2px;}
td.default {background: red;}</style>
</head>
<body>
<table cellspacing="0">
<tr><td class="high"></td></tr>
<tr><td class="low"></td></tr>
<tr><td class="default"> </td></tr>
</table>
</body>
</html>
The above is rendering OK but as soon as you add border="1" to the table HTML then it stops working again. If you require borders it could be worked around by adding them to the CSS. And no font-size "cheat" is required
Suzy
Mossimo, are you seriously saying that you just want to set the table's size, and thats why you did the teeny text, and its not some form of spamming extra words in?
SuzyUK made an interesting observation but once you set the style sheet externally and trade the XHTML doc type for HTML4.0 and put the table inside of another the trick is lost.
My question would be why would you want to declare a 4 pixel high table cell? Try using a div instead, that doesnt need any text (or nsbp;) placeed inside it to show up.
So if you will please excuse me I will go hide behind a rock now. :(
