height property doesn't work when using %

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
Skara
Forum Regular
Posts: 703
Joined: Sat Mar 12, 2005 7:13 pm
Location: US

height property doesn't work when using %

Post 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. -_-'
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post 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.
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Post 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.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
User avatar
Skara
Forum Regular
Posts: 703
Joined: Sat Mar 12, 2005 7:13 pm
Location: US

Post 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%.
User avatar
Skara
Forum Regular
Posts: 703
Joined: Sat Mar 12, 2005 7:13 pm
Location: US

Post 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. :/
Post Reply