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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 19
  1. #1
    New Coder
    Join Date
    Feb 2008
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Row height problems with IE7

    Hi,

    I have a very simple page with this code:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <body style="margin:0px;">
    
    <table border="1" cellpadding="0" cellspacing="0" style="width:300px;height:300px;">
    <tr style="height:30px;"><td>Some text</td></tr>
    <tr><td>Some text</td></tr>
    <tr style="height:30px;"><td>Some text</td></tr>
    </table>
    
    </body>
    </html>
    Well, when seen with IE7, the first and last rows doesn't have the desired height of 30px (in FF it works fine). Can someone explain me why?

    Another question is how this layout can be reproduced with div's, without having to use tables (the layout I mean is a initial div with fixed height, a central div with the rest of body's available height, and a final div with fixed height)

    Thank you for your help!

  • #2
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    one, try adding this to the middle row

    Code:
    <tr style="height:240px;"><td>Some text</td></tr>
    you may have to hard code it, it may be an IE thing!!

    second, to create this using divs try this

    here is an example (dont take my word though, my code is always way to complex though

    Code:
    <style type="text/css">
    * {
    margin:0px;
    padding:0px;
    }
    
    #mainBox {
    width:300px;
    height:300px;
    border:1px solid #000000;
    }
    
    .rows {
    height:30px;
    width:300px;
    border-top:1px solid #000000;
    }
    
    .rows:first-child {
    border:0px;
    }
    
    .rowsStatic {
    height:240px;
    width:300px;
    border-top:1px solid #000000;
    }
    
    
    </style>
    html

    Code:
    <div id="mainBox">
    	<div class="rows">sdhjshflsdfjhl</div>
        <div class="rowsStatic">sdhjshflsdfjhl</div>
        <div class="rows">sdhjshflsdfjhl</div>
    </div>
    hope it helps!!

  • #3
    New Coder
    Join Date
    Feb 2008
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you for the quick response.

    The problem is I don't want to fix the height of the middle row. I want it to expand and fit all available height (that's it, if later I change the table height to 400px I don't want to have to go to the middle row and put the height of 340px). Even more, maybe I want to put a percentile height in the parent table (and then I don't know the exact height).

    What I don't understand is why it doesn't works in HTML 4 strict for IE7, in quirks mode (without the doctype) it works perfectly, as always did.

  • #4
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    ok, i understand, using percentages would probably be your best bet!

  • #5
    New Coder
    Join Date
    Feb 2008
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    But I don't want to use percents with the first and last row...

    Maybe I'm not explaining it well: I want the initial and final rows to have exactly a height of 30px, and the middle row to have the rest of the parent's height... it has always worked with IE in non-strict, and works with FF even in strict; what I ask is how can I make this work with IE7 in strict

  • #6
    New Coder
    Join Date
    Feb 2008
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Noone has faced never this problem? I can't believe.

    When you guys do a page with a menu/header of a fixed height (not percent), and want to fill the rest of the page's height with another contents, how do you do that?

  • #7
    New Coder
    Join Date
    Feb 2008
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well I guess the answer is: "use tables!"

    By the way, if anyone was interested in the solution for the table with heights problem in explorer 7 (see the first post), I've found the solution: add <tbody style="width:100&#37;;height:100%;"> and </tbody> tags enclosing the rows definition.
    Last edited by Yari; 03-20-2008 at 05:32 PM.

  • #8
    Regular Coder maxvee8's Avatar
    Join Date
    Feb 2008
    Location
    UK
    Posts
    185
    Thanks
    19
    Thanked 18 Times in 18 Posts
    no there is always a way with divs just like there is with tables , divs are for page layout , tables are for displaying data,

    i dont understand fully what you are asking for ... Could you draw a picture and upload it that way one of us could make it using divs from the picture...
    "I have not failed, I've found 10,000 ways that don't work" Thomas Edison

  • #9
    New Coder
    Join Date
    Feb 2008
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    maxvee8:

    Ok look at this image:



    The code for this layout could be:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html style="width:100&#37;;height:100%;">
    <body style="margin:0px;width:100%;height:100%;">
    
    <table border="1" cellpadding="0" cellspacing="0" style="width:100%;height:100%;">
    <tbody style="width:100%;height:100%;">
    <tr style="height:50px;"><td align="center" valign="middle">Some text</td></tr>
    <tr><td align="center" valign="middle">Some text</td></tr>
    </tbody>
    </table>
    
    </body>
    </html>
    Tables have a property that is very useful when facing layouts adaptative to window size changes. When a row or cell width or height is not specified, the row or the cell automatically fits the table's remaining width or height (if there are many, they share the remaining width or height in equal parts). I believe there isn't a way to reproduce this behavior with div's (I would like to be wrong though).
    Last edited by Yari; 03-20-2008 at 05:40 PM.

  • #10
    Regular Coder maxvee8's Avatar
    Join Date
    Feb 2008
    Location
    UK
    Posts
    185
    Thanks
    19
    Thanked 18 Times in 18 Posts
    try this you may want to put the style in an external style sheet but for demo purposes there it is, i think thats whats your after ?!

    unless you dont want the main col to be a 100&#37; height not sure.. test teh code in a new document

    any questions feel free to ask

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>div layout</title>
    <style type="text/css">
    
    *{margin:0; padding:0;}
    
    html, body{ margin:0; padding:0; height:100%; } 
     
    #pagewidth{ max-width:100%;  min-width:100%;  height:100%; }
     
    #header{position:relative; height:10%; background-color:#898F90; width:100%;} 
     
    #maincol{width:100%; min-height:80%; float:left; position:relative; background-color:#7C8080; display:inline; }
     
    #footer{height:10%; background-color:#3680A6; clear:both; width:100%; bottom:0; position:relative;} 
    </style>
    
    
    </head>
    <body>
    <div id="pagewidth">
    	<div id="header" > Header stuff here maybe a bg image </div>
    
    
    		<div id="maincol" > main content here </div>
    
    		<div id="footer" > footer for footer stuff </div>
    	</div>
    </body>
    </html>
    Last edited by maxvee8; 03-20-2008 at 07:59 PM.
    "I have not failed, I've found 10,000 ways that don't work" Thomas Edison

  • #11
    New Coder
    Join Date
    Feb 2008
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi maxvee8 and thank you for the effort ;-)

    That's not what I'm seeking. Explaining it with your design, I want the "header" and "footer" div's to have a fixed height in pixels (NOT a percent), and the "maincol" div to occupy the rest of available page's height for any screen resolution and/or client window size.

    By the way... I have just seen that my solution of using <tbody> doesn't work with IE7, the table just goes offscreen. In FF it still works ok, however.

  • #12
    Regular Coder
    Join Date
    Feb 2007
    Location
    Canada
    Posts
    924
    Thanks
    10
    Thanked 56 Times in 55 Posts
    ryanfait.com has a sticky-footer that you can set height to.

  • #13
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    What's wrong with http://bonrouge.com/2c-hf-fluid.php?nc
    (just remove
    Code:
    <div id="left">left</div>
    and background:transparent url(bg200.gif) repeat-y scroll left top; from
    #wrap 2c-hf-fluid.php (line 12)
    )
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #14
    New Coder
    Join Date
    Feb 2008
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It would be perfect... if there was a way to set the "inner-wrap" div (or the "left" and "main" divs) height to fit the available height. In the example you give they *NOT* do that, the left purple column that seems to fit the height is a trick: a background image of 200px set to the left of the parent div ("wrap").

    If you don't understand what I mean, try that: set a background color to the "inner-wrap", "left" or "main" divs and you will see they don't fit the available height. What I want is that they fit the available height.

  • #15
    Regular Coder maxvee8's Avatar
    Join Date
    Feb 2008
    Location
    UK
    Posts
    185
    Thanks
    19
    Thanked 18 Times in 18 Posts
    using my solution you could enter the height of the footer and header in px and then you would have to guess as to what the percent would be for the body, bit of trial and error just keep incresing it like 75&#37; then 78% etc until you get it right !
    Last edited by maxvee8; 03-27-2008 at 08:17 PM.
    "I have not failed, I've found 10,000 ways that don't work" Thomas Edison


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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