100% height in netscape

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View
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%">
  <td valign="top">
   <table width="50" border="1" cellspacing="0" cellpadding="0"
     <td valign="top">

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


Re: 100% height in netscape

Stuart Palmer said:

Quoted text here. Click to load it

you have that around the wrong way. IE gets it wrong, NS gets it right.
Quoted text here. Click to load it

height is not a valid attribute of <table>

Quoted text here. Click to load it

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.climbtothestars.org/coding/cssbasic /
http://www.htmlcenter.com/tutorials/index.cfm/css /
http://www.westciv.com.au/style_master/academy/css_tutorial /

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://webhost.bridgew.edu/etribou/layouts /
http://www.webreference.com/authoring/style/sheets/layout/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://devedge.netscape.com/library/xref/2003/css-support /

hiding CSS from crappy browsers:
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
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 /

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

Re: 100% height in netscape

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">
        <td width="304" valign="top"><img
src="" alt="" border="1" width="304"
        <td width="81" valign="top"
background="" height="100%"><img
alt="image_gradient" src="" border="1"
width="81" height="190" name="gradient_image"></td>
        <td width="224" valign="top" rowspan="2" height="100%"><img
src="" alt="" border="1" width="224"
height="300" alt="expandable_image" name="expandable_image"></td>
        <td width="1"><img src="" alt=""
border="1"  width="1" height="190" /></td>
        <td valign="bottom" width="385" colspan="2" rowspan="2"
height="236"><img src="" 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="" width="1" alt="" border="1"
width="1" height="75" /></td>
        <td valign="bottom" width="225" height="152" colspan="2"><img
src="" border="1" width="225" height="152"


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)


Site Timeline