Page 1 of 1

height property doesn't work when using %

Posted: Tue May 31, 2005 4:32 pm
by Skara

Code: Select all

______________________
|                      |x <<
| content              |x << here
|______________________|x <<
 xxxxxxxxxxxxxxxxxxxxxxxx
x = shadow.

For some reason, the place marked "here" doesn't want to work right. I got it to work ok with the header by setting a fixed pixel width. But the main body resizes. :/
I've tried the following, and neither work:

Code: Select all

<tr>
  <td colspan=&quote;2&quote; rowspan=&quote;2&quote;>content</td>
  <td style=&quote;height: 4px; width: 3px;&quote;><img src=&quote;s5.gif&quote; alt=&quote;&quote; /></td>
</tr>
<tr>
  <td style=&quote;width: 3px; background: url('s4.gif'); font-size: 1px; height: 100%;&quote;>&nbsp;</td>
</tr>
<tr>
  <td style=&quote;height: 3px; width: 4px;&quote;><img src=&quote;s1.gif&quote; alt=&quote;&quote; /></td>
  <td style=&quote;background: url('s2.gif'); font-size: 1px;&quote;>&nbsp;</td>
  <td style=&quote;height: 3px; width: 3px;&quote;><img src=&quote;s3.gif&quote; alt=&quote;&quote; /></td>
</tr>

Code: Select all

<tr>
  <td colspan=&quote;2&quote;>content</td>
  <td><table cellspacing=&quote;0&quote; cellpadding=&quote;0&quote; style=&quote;height: 100%;&quote;>
        <tr>
          <td style=&quote;height: 4px; width: 3px;&quote;><img src=&quote;s5.gif&quote; alt=&quote;&quote; /></td>
        </tr>
        <tr>
          <td style=&quote;width: 3px; background: url('s4.gif'); font-size: 1px; height: 100%;&quote;>&nbsp;</td>
        </tr>
  </table></td>
</tr>
<tr>
  <td style=&quote;height: 3px; width: 4px;&quote;><img src=&quote;s1.gif&quote; alt=&quote;&quote; /></td>
  <td style=&quote;background: url('s2.gif'); font-size: 1px;&quote;>&nbsp;</td>
  <td style=&quote;height: 3px; width: 3px;&quote;><img src=&quote;s3.gif&quote; alt=&quote;&quote; /></td>
</tr>
In the second one, if I change this line:

Code: Select all

<td style=&quote;width: 3px; background: url('s4.gif'); font-size: 1px; height: 100%;&quote;>&nbsp;</td>
to something like this:

Code: Select all

<td style=&quote;width: 3px; background: url('s4.gif'); font-size: 1px; height: 100px;&quote;>&nbsp;</td>
then it works fine--just at a fixed width. -_-'

Posted: Tue May 31, 2005 5:05 pm
by Chris Corbyn
Known problem with tables.... table weren't made for layouts.

Fixed width is the only option on most browsers. I know it's a cliche but start using CSS + DIV type elements.

Posted: Tue May 31, 2005 6:00 pm
by pickle
So, is the problem you're having that the shadow won't go the whole height of the table? If so, just set the background-repeat property to 'repeat-y' and it should repeat forever no matter what the table height is.

Posted: Tue May 31, 2005 7:15 pm
by Skara
@d11wtq: I usually do use divs, but now how would I get a shadow on one of them?

@pickle: No, the table won't size right. If I put ??px in, it looks fine, but if I put ??% in, it stays at default size and, for some weird reason, gets wider.
*gets a screen*
Image

The top has a fixed width, the bottom has 100%.

Posted: Tue May 31, 2005 7:38 pm
by Skara
o.o Ok, I was able to get it to work in Firefox as so:

Code: Select all

<td><div style="background: url('s4.gif'); height: 100%; width: 3px;"><img src="s5.gif" alt="" /></div></td>
Didn't think about combining the image and the background into one cell... >.>

Problem is, the height attribute STILL doesn't work in IE!! GYA!!

Edit: nvm, I got it down:

Code: Select all

<tr>
  <td>&nbsp;</td>
  <td style="width: 3px; background: url('s4.gif'); font-size: 1px; vertical-align: top;"><img src="s5.gif" alt="" /></td>
</tr>
<tr>
  <td style="background: url('s2.gif'); font-size: 1px;"><img src="s1.gif" alt="" /></td>
  <td style="width: 3px; height: 3px;"><img src="s3.gif" alt="" /></td>
</tr>
I don't see how divs are supposed to help here... And I really don't see what's wrong with tables when the same problems exists for both. :/