100% height in netscape

Discussion in 'HTML' started by Stuart Palmer, Dec 3, 2003.

  1. 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
    Stuart Palmer, Dec 3, 2003
    #1
    1. Advertising

  2. Stuart Palmer

    brucie Guest

    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/content.php3?aid=48
    http://www.canit.se/~griffon/web/writing_stylesheets.html
    http://www.utoronto.ca/ian/books/xhtml2/exerpt/css-4a.html
    http://idm.internet.com/articles/200101/csstutorial1a.html
    http://www.greytower.net/en/archive/articles/tsutsumi.html
    http://www.westciv.com.au/style_master/academy/css_tutorial/
    http://webmonkey.com/authoring/stylesheets/tutorials/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/tutorials/box_lesson/index.html
    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://centricle.com/ref/css/filters/
    http://www.blooberry.com/indexdot/css/index.html
    http://macedition.com/cb/resources/abridgedcsssupport.html
    old:
    http://www.immix.net/html/CSSGuide.htm
    http://devedge.netscape.com/library/xref/2003/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
    brucie, Dec 3, 2003
    #2
    1. Advertising

  3. 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
    Stuart Palmer, Dec 3, 2003
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Not4u
    Replies:
    9
    Views:
    1,042
    Not4u
    Feb 27, 2004
  2. Replies:
    8
    Views:
    6,690
    Neredbojias
    Dec 9, 2005
  3. Bernd Meier
    Replies:
    6
    Views:
    509
    GTalbot
    Jan 14, 2008
  4. fred
    Replies:
    3
    Views:
    278
    Zifud
    Mar 17, 2005
  5. Replies:
    5
    Views:
    885
Loading...

Share This Page