homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

font-size: 1px; Cheat
AnyOne do this?

 1:23 pm on Dec 13, 2003 (gmt 0)

I would like to know if I'm a sleazy coder or if anyone else dose this.

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?



 2:24 pm on Dec 13, 2003 (gmt 0)

I think there must be a blank between <td> and </td>.
if u do this as the following:
<td height="4" background="4pixleHeigh.gif"></td>

i think there can't any spilth.


 2:55 pm on Dec 13, 2003 (gmt 0)

If I have an empty cell I always put a &nbsp; in like so
But thats not the solution


 10:35 pm on Dec 13, 2003 (gmt 0)

Interesting approach -- I haven't played with it but it makes some sense technically.

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.


 11:21 pm on Dec 13, 2003 (gmt 0)

line-height is a possible solution

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">&nbsp;</p></td>

renders a black table cell 1 pixel high in IE6, Opera 7, Netscape 7


 6:17 am on Dec 14, 2003 (gmt 0)

Good call tedster I never thought about search engines taking issue.

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.


 4:06 pm on Dec 15, 2003 (gmt 0)

It seems the border setting in the HTML of the table affects the rendering of this... but CSS will control it without having to set a font-size override

<!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">
<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;}

<table cellspacing="0">
<tr><td class="high"></td></tr>
<tr><td class="low"></td></tr>
<tr><td class="default">&nbsp;</td></tr>

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



 4:22 pm on Dec 17, 2003 (gmt 0)

'Good call tedster I never thought about search engines taking issue. '

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?


 2:03 am on Dec 18, 2003 (gmt 0)

Gramme as far as spamming extra words in thatís not what Iím doing in fact itís not the search engines taking issue with my small text itís the very idea of using it to set a cell height that I donít like and itís not the table size itís the height of a table cell Iím tiring to set.

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.


 8:50 am on Dec 18, 2003 (gmt 0)

I'd have thought the problem is fairly obvious. the &nsbp; is conforming to your specified text size as it should do so the only way around it is by altering the text size.

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.


 3:39 pm on Dec 18, 2003 (gmt 0)

O.k. so I canít see the forest for the trees. Of course a &nsbp; is just that a space
And it will inherit the properties of the text. Yes a DIV will work well I was just trying to avoid using it.

So if you will please excuse me I will go hide behind a rock now. :(

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved