Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Mar 2005
    Posts
    85
    Thanks
    3
    Thanked 0 Times in 0 Posts

    IE6 Height: 100% issue :/

    Hey!

    Having big problems with windows internet explorer 6. I am using tables for layouts *smacks hand*, which i now know is a big mistake...but im too far through the project to start over & get rid of the tables. So im hoping someone here might be able to help me. I am using css to style all my tables btw.

    I have a navigation bar which I want to reach down to the bottom of the page. It is embedded within a parent table. I have set the heights of all neccessary parent tags (html, body, table, td.parent table, table 2 e.t.c) to 100%. But win ie6 seems to interpret height: 100% differently to all other browsers, as it sets the navigation collumn to 1 complete height of the browser window instead of to the bottom of the parent table. This is an issue for me as I need the navigation bar to stretch as I put more content onto the page. I hope I made my problem clear.

    Searching on google brought back a few fixes for this WHEN using CSS instead of tables, but no clear answer for how to fix this when using tables. Also, I must mention that I am using the Xhtml 1.0 strict doctype.

  • #2
    New to the CF scene
    Join Date
    May 2005
    Location
    Walla Walla
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    I think I might understand

    Okay ... visit this page, is this what you'r aiming for? A side menu that extends to the bottom of the page?

    http://www.creosign.com/pinkshiro

    If it is - then the one small work around that can turn a table that fails to extend, into a table that does work, is to replace the opening of the 'table' tag.

    Example:
    (original that doesn't work)
    <table width="600" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">

    (replacement that seems to do the trick)
    <TABLE height="100%" width="600" "BORDER="0" ALIGN="CENTER" CELLPADDING="0" CELLSPACING="0" BGCOLOR="#FFFFFF" TABLE>

    -----

    it seems to make more sence to IE if you open the table tag with " table width=", and end the tag with the 'table' again. I do not know why.

    Does this help solve your problem?
    Last edited by Creó; 05-16-2005 at 08:15 AM.

  • #3
    New Coder
    Join Date
    Mar 2005
    Posts
    85
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Hey creo

    thanks for the hints...I am actually aware of the height property, but I appreciate the help!

    Unfortunately, to conform to the xhtml strict doctype, height is not valid, and css must be used to affect layout properties. What im needing is a way to correct this issue for the xhtml strict doctype.

    If anyone out there is aware of how to fix this problem, I would greatly appreciate it! Im on the verge of kicking back to xhtml transitional to save from pulling my hair out :P

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Well the fact that you know CSS should be used, I don't see a problem. If you are coding in XHTML Strict then you should at least have a decent understanding of CSS and how it affects your page. Most of the time to get a block level element to be a height in percentages, you must declare the height of the html and body elements of the page.
    Code:
    HTML
    
    <table border="0" id="table1" cellpadding="0" cellspacing="0">
    <tr>
    <td>blah</td>
    </tr>
    </table>
    Code:
    CSS
    
    html,body {
    height:100%;
    }
    #table1 {
    height:100%;
    width:600px;
    margin:auto; /*align=center won't cut it in Firefox*/
    }

  • #5
    New Coder
    Join Date
    Mar 2005
    Posts
    85
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Yep, I have both html and body tags declared as a percentage of 100% already, but this embedded table still doesnt wanna stretch out 100%

  • #6
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Now is the time when it would be good to show us your code or give us a link. Without either of that info, its like we are giving solutions while being blind.

  • #7
    New Coder
    Join Date
    Mar 2005
    Posts
    85
    Thanks
    3
    Thanked 0 Times in 0 Posts
    sure aerospace.eng ...

    here's the link to a copy of the page im working on. Please view in both IE6 to see the issue, and another browser (opera, firefox etc) to view it working properly:

    http://www.awardappliances.co.nz/mike/staffa.html

    linked to this is multiple css files. The only ones that are relavent to this issue are:

    http://www.awardappliances.co.nz/mike/styles.css

    and

    http://www.awardappliances.co.nz/mike/navbar.css

    styles.css relates to the entire page layout, while navbar.css relates to the navbar specifically. All the code validates, no matter how messy it is

    p.s. a quick second question relating to margins....while your viewing the page in a non ie browser, check out the lack of bottom margin, even though in IE, the margins/padding show fine. (the css for this is in styles.css)
    Last edited by pinkshiro; 05-18-2005 at 11:20 PM.

  • #8
    New Coder
    Join Date
    Mar 2005
    Posts
    85
    Thanks
    3
    Thanked 0 Times in 0 Posts
    bump


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •