«

Hi everyone, I hope someone can help.

I am trying to do a table that has a height of 100% inside another TD.
In IE this works fine and in netscape it doesn't properly.

<table width="50" border="1" cellspacing="0" cellpadding="0" height="100%">
<tr>
<td valign="top">
<table width="50" border="1" cellspacing="0" cellpadding="0"
height="100%">
<tr>
<td valign="top">
&nbsp;
</td>
</tr>
</table>
</td>
</tr>
</table>

here's a sample. In IE it works for both, but in netscape it works for the
first instance but not for the instance inside, but the instance inside for
my page layout if the most important. I would really appriciate any help on
this or a possible solution/work around.

Many thanks

Stu

in post <news:gBpzb.11289$>
Stuart Palmer said:

> I am trying to do a table that has a height of 100% inside another TD.
> In IE this works fine and in netscape it doesn't properly.

you have that around the wrong way. IE gets it wrong, NS gets it right.

> <table width="50" border="1" cellspacing="0" cellpadding="0" height="100%">

height is not a valid attribute of <table>

> I would really appriciate any help on this or a possible solution/work around.

don't use table for layout. use css

css tutorials and other fun 'n giggly css stuff:
http://www.css.nu/
http://www.mako4css.com/
http://www.richinstyle.com/
http://www.blazonry.com/css/
http://www.w3schools.com/css/
http://www.websitetips.com/css/
http://www.htmlhelp.com/reference/css/
http://www.pageresource.com/dhtml/indexcss.htm
http://www.climbtothestars.org/coding/cssbasic/
http://www.htmlcenter.com/tutorials/index.cfm/css/
http://www.freewebmastertips.com/php...nt.php3?aid=48
http://www.canit.se/~griffon/web/wri...ylesheets.html
http://www.utoronto.ca/ian/books/xht...pt/css-4a.html
http://idm.internet.com/articles/200...utorial1a.html
http://www.greytower.net/en/archive/.../tsutsumi.html
http://www.westciv.com.au/style_mast.../css_tutorial/
http://webmonkey.com/authoring/style...tutorial1.html

layout examples:
http://www.glish.com/css/
http://www.csszengarden.com/
http://www.wannabegirl.org/css/
http://tantek.com/CSS/Examples/
http://www.saila.com/usage/layouts/
http://www.bluerobot.com/web/layouts/
http://www.benmeadowcroft.com/webdev/
http://www.xs4all.nl/~apple77/columns/
http://www.meyerweb.com/eric/css/edge/
http://www.htmler.org/tutorials/3/1.html
http://css.nu/articles/floating-boxes.html
http://webhost.bridgew.edu/etribou/layouts/
http://www.roguelibrarian.com/lj/index.html
http://css-discuss.incutio.com/?page=CssLayouts
http://ecoculture.com/styleguide/r/rollovers.html
http://thenoodleincident.com/tutoria...son/index.html
http://www.webreference.com/authorin...yout/advanced/

some sites using css layouts:
http://www.inc.com/
http://www.wired.com/
http://www.kitty5.com/
http://www.cinnamon.nl/
http://msn.espn.go.com/
http://www.virtuelvis.com/
http://www.emptybottle.org/
http://www.fastcompany.com/
http://www.littleyellowdifferent.com/

rounded corners:
http://www.albin.net/CSS/roundedCorners/
http://www.webweaver.org/dan/css/corners/
http://www.guyfisher.com/builder/workshop/css/corners/

slants: http://www.infimum.dk/HTML/slantinfo.html
centering: http://stone.thecoreworlds.net/www/centre/
lists: http://www.alistapart.com/stories/taminglists/
pure css menus: http://www.meyerweb.com/eric/css/edge/menus/demo.html
Fast rollovers
http://www.pixy.cz/blogg/clanky/cssnopreloadrollovers/

master compatibility charts:
http://centricle.com/ref/css/filters/
http://www.blooberry.com/indexdot/css/index.html
http://macedition.com/cb/resources/a...sssupport.html
old:
http://www.immix.net/html/CSSGuide.htm
http://devedge.netscape.com/library/...3/css-support/

hiding CSS from crappy browsers:
http://www.ericmeyeroncss.com/bonus/trick-hide.html
http://www.w3development.de/css/hide_css_from_browsers/

css checkers:
http://jigsaw.w3.org/css-validator/
http://www.htmlhelp.com/tools/csscheck/

cascading style sheets, level 1 specification
http://www.w3.org/TR/REC-CSS1
cascading style sheets, level 2 specification
http://www.w3.org/TR/REC-CSS2/
cascading style sheets, level 2 revision 1 working draft
http://www.w3.org/TR/CSS21/



--
brucie
04/December/2003 04:07:42 am kilo

Hi Bruce, thx for the info, but not sure that will work for me.

Please let me give you soem more info on what I am trying to achieve, here's
my code as it currently is.

-------------

<table width="610" cellpadding="0" cellspacing="0" border="1">
<tr>
<td width="304" valign="top"><img
src="http://127.0.0.1/images/spacer.gif" alt="" border="1" width="304"
height="190"></td>
<td width="81" valign="top"
background="http://127.0.0.1/images/gradient.gif" height="100%"><img
alt="image_gradient" src="http://127.0.0.1/images/spacer.gif" border="1"
width="81" height="190" name="gradient_image"></td>
<td width="224" valign="top" rowspan="2" height="100%"><img
src="http://127.0.0.1/images/spacer.gif" alt="" border="1" width="224"
height="300" alt="expandable_image" name="expandable_image"></td>
<td width="1"><img src="http://127.0.0.1/images/spacer.gif" alt=""
border="1" width="1" height="190" /></td>
</tr>
<tr>
<td valign="bottom" width="385" colspan="2" rowspan="2"
height="236"><img src="http://127.0.0.1/images/spacer.gif" alt="" border="1"
width="385" height="236" usemap="#hp_left_btm"
alt="image_to_merge_with_gradient" name="image_to_merge_with_gradient"></td>
<td width="1" height="75"><img
src="http://127.0.0.1/images/spacer.gif" width="1" alt="" border="1"
width="1" height="75" /></td>
</tr>
<tr>
<td valign="bottom" width="225" height="152" colspan="2"><img
src="http://127.0.0.1/images/spacer.gif" border="1" width="225" height="152"
usemap="#hp_right_btm"></td>
</tr>
</table>

-----------

As image 'expandable_image' gets longer, the cell holding
'image_to_merge_with_gradient' is getting longer (as well as the cell
holding 'gradient_image'). What I need is for cell holding 'gradient_image'
to get longer (so it stays in contact with 'image_to_merge_with_gradient')
while 'expandable_image' increases. At the moment bother the cells are
increasing so there si a gap in the gradient image that flows from
'gradient_image' into 'image_to_merge_with_gradient'.

When the 'expandable_image' is smaller it's fine. So my initial solution was
to set height of the td's at 100% but this didn't seem to work.

I have had a look at your css info but cannot understand how I would make
the sizes vaiable and force size on other cells.

Many thanks for your help here, I just thought it might help if I tried to
explain it. (But myabe I haven't done that too well)

Stu