...

View Full Version : Row height problems with IE7



Yari
02-15-2008, 03:43 PM
Hi,

I have a very simple page with this 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!

jcdevelopment
02-15-2008, 04:02 PM
one, try adding this to the middle row


<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



<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



<div id="mainBox">
<div class="rows">sdhjshflsdfjhl</div>
<div class="rowsStatic">sdhjshflsdfjhl</div>
<div class="rows">sdhjshflsdfjhl</div>
</div>


hope it helps!!

Yari
02-15-2008, 04:14 PM
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.

jcdevelopment
02-15-2008, 04:17 PM
ok, i understand, using percentages would probably be your best bet!

Yari
02-15-2008, 04:26 PM
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

Yari
02-19-2008, 02:52 PM
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?

Yari
03-20-2008, 01:33 PM
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.

maxvee8
03-20-2008, 03:19 PM
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...

Yari
03-20-2008, 04:16 PM
maxvee8:

Ok look at this image:

http://www.mediamakers2004.com/img/layout.gif

The code for this layout could be:



<!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).

maxvee8
03-20-2008, 06:44 PM
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


<!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>

Yari
03-27-2008, 04:25 PM
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.

jlhaslip
03-27-2008, 04:30 PM
ryanfait.com has a sticky-footer that you can set height to.

abduraooft
03-27-2008, 04:37 PM
What's wrong with http://bonrouge.com/2c-hf-fluid.php?nc
(just remove
<div id="left">left</div>
and background:transparent url(bg200.gif) repeat-y scroll left top; from
#wrap 2c-hf-fluid.php (line 12)
)

Yari
03-27-2008, 06:05 PM
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.

maxvee8
03-27-2008, 07:12 PM
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 !

Yari
03-27-2008, 07:20 PM
maxvee8:

I couldn't guess the percent I will need to fit the body for all the screen resolutions and/or client window sizes. I mean (assuming I have a header of 50px), if the user is seeing the page in a tiny 320x200 window, I will need 75&#37; (150 of 200), but if his explorer window is 1600x1200, I will need 95.83% (1150 of 1200). So using a percent isn't a solution.

maxvee8
03-28-2008, 01:10 AM
i get ya .. that was a pretty stupid comment by me come to think of it.

Yari
03-31-2008, 10:23 AM
If anyone is interested, a guy has given me one kind of a solution into another forum. To replicate the design of two rows, one with 50px and the other fitting the rest of the page:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
<head>
<title>Table emulation</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
* {margin:0px; padding:0px;}
html, body {height: 100%; width: 100%;}
#header {border:1px solid rgb(153,153,153); height:50px; text-align: center; background-color:Blue;}
#content {border:1px solid rgb(153,153,153); top:50px; left:0px; right:0px; bottom:0px; position:absolute; background-color:Red; text-align:center;}
</style>
</head>
<body>
<div id="header">ROW1</div>
<div id="content">ROW2</div>
</body>
</html>


To replicate the initial design that I posted (the same but adding a footer of 50px):



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
<head>
<title>Table emulation</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
* {margin:0px; padding:0px;}
html, body {height: 100%; width: 100%;}
#header {border:1px solid rgb(153,153,153); height:50px; text-align: center; background-color:Blue;}
#content {border:1px solid rgb(153,153,153); top:50px; left:0px; right:0px; bottom:50px; position:absolute; background-color:Red; text-align:center;}
#footer {position:absolute; bottom:0px; left:0px; right:0px; height:50px; border:1px solid rgb(153,153,153); text-align: center; background-color:Green;}
</style>
</head>
<body>
<div id="header">ROW1</div>
<div id="content">ROW2</div>
<div id="footer">ROW3</div>
</body>
</html>


As you can see, it's all done with position absolute and using the top left right and bottom properties. Is a good trick. I don't know if it works in older navs like IE6 though.

effpeetee
03-31-2008, 01:38 PM
Is this any help?

http://www.mardiros.net/liquid-css-layouts.html
http://www.dynamicdrive.com/style/layouts/category/C13/

or this?

Useful - www.exitfegs.co.uk/Sources.html


Frank



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum