Table height issue in IE7

L

leodippolito

Hi there,

I have this 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>Test</title>

<style type="text/css">
html, body
{
margin: 0;
padding: 0;
border: 0;
height: 100%;
width: 100%;
}
</style>

</head>
<body>

<table id="mainTable" cellpadding="0" cellspacing="0"
style="height: 100%; width: 100%;">

<tr id="header" style="height: 60px;">
<td style="background-color: yellow;">header</td>
</tr>

<tr id="contents" style="height: 100%;">
<td style="background-color: red;">contents</td>
</tr>

<tr id="footer" style="height: 60px;">
<td style="background-color: blue;">footer</td>
</tr>

</table>

</body>
</html>

---

It works fine in Firefox (I have a table with the maximum screen
height and no scrollbars).

In IE7 I get a vertical scrollbar and the table looks larger (in
height) than it should be.

I don't understand.... What am I doing wrong?

How can I have the same Firefox appearence in IE7?

Thanks!
 
J

Jonathan N. Little

Hi there,

I have this code:
Click to expand...
---

It works fine in Firefox (I have a table with the maximum screen
height and no scrollbars).

In IE7 I get a vertical scrollbar and the table looks larger (in
height) than it should be.

I don't understand.... What am I doing wrong?

How can I have the same Firefox appearence in IE7?
Click to expand...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="content-language" content="en-us">

<title>Dump The Table</title>

<style type="text/css">
HTML, BODY {
background-color: #fee;
margin: 0;
padding: 0;
}
#header {
background-color: #ffe;
height: 60px;
width: 100%
}
#contents {
margin: 0 1em 60px 1em;
}
#footer {
background-color: #eef;
height: 60px;
width: 100%;
position: absolute;
left: 0;
bottom: 0;
}
</style>
</head>
<body>
<div id="header">Header Here</div>
<div id="contents">
<h1>Dump The Table</h1>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing ...
</p>
</div>
<div id="footer">Footer Here</div>
</body>
</html>
 
J

Jukka K. Korpela

Scripsit (e-mail address removed):
I have this code:
Click to expand...

Why don't we have your URL?
<table id="mainTable" cellpadding="0" cellspacing="0"
style="height: 100%; width: 100%;"> - -
<tr id="contents" style="height: 100%;"> - -
In IE7 I get a vertical scrollbar and the table looks larger (in
height) than it should be.
Click to expand...

You have asked for a 100% height for the <tr>, so what should a browser do
when there are other rows as well? How can it make 60px + 100% + 60px equal
100%?

Omitting that height setting does not help, though. It removes the vertical
scrollbar, but the row heights get a bit wild. IE is not very clever with
tables. So use just CSS with <div> elements as Jonathan suggested.
 
?

=?ISO-8859-1?Q?G=E9rard_Talbot?=

Hi there,

I have this code:
Click to expand...

Please, post an url, not a whole webpage code.

Why not choose a strict DTD? This is obviously a brand new page.

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Test</title>

<style type="text/css">
html, body
{
margin: 0;
padding: 0;
border: 0;
height: 100%;
width: 100%;
Click to expand...

By default, both html and body are display: block with width and height
set to auto. What you do is the start of a constrained design and not a
scalable, fluid design.
}
</style>

</head>
<body>

<table id="mainTable" cellpadding="0" cellspacing="0"
style="height: 100%; width: 100%;">

<tr id="header" style="height: 60px;">
<td style="background-color: yellow;">header</td>
</tr>
Click to expand...

You are using a table construction for layout. That is also not
recommendable.
<tr id="contents" style="height: 100%;">
<td style="background-color: red;">contents</td>
</tr>
Click to expand...

Your table is over-constrained here: the height of this table row can
not be 100% while the first one, at your request, is taking 60px.
<tr id="footer" style="height: 60px;">
<td style="background-color: blue;">footer</td>
</tr>

</table>

</body>
</html>
Click to expand...

No. What you see is the rendering after browser handled your design errors.

In IE7 I get a vertical scrollbar and the table looks larger (in
height) than it should be.
Click to expand...

No. 60px + 100% + 60px != 100%

I don't understand.... What am I doing wrong?

How can I have the same Firefox appearence in IE7?

Thanks!
Click to expand...

I recommend you read some of the provided linked-resources:

Table-based webpage design versus CSS-based webpage design: resources,
explanations and tutorials
http://www.gtalbot.org/NvuSection/NvuWebDesignTips/TableVsCSSDesign.html

and you can pick a CSS tablefree webpage template here:

http://www.gtalbot.org/NvuSection/NvuWebDesignTips/WebDesignResources.html#CSSWebpageTemplates

What Jukka K. and Jonathan L. replied to you is correct, excellent and
meeting your post.

Gérard
 
D

dorayme

"Jonathan N. Little said:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="content-language" content="en-us">

<title>Dump The Table</title>

<style type="text/css">
HTML, BODY {
background-color: #fee;
margin: 0;
padding: 0;
}
#header {
background-color: #ffe;
height: 60px;
width: 100%
}
#contents {
margin: 0 1em 60px 1em;
}
#footer {
background-color: #eef;
height: 60px;
width: 100%;
position: absolute;
left: 0;
bottom: 0;
}
</style>
</head>
<body>
<div id="header">Header Here</div>
<div id="contents">
<h1>Dump The Table</h1>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing ...
</p>
</div>
<div id="footer">Footer Here</div>
</body>
</html>
Click to expand...

If OP is going from tables to this sort of thing, surely better
is:

#footer {background-color: #eef;}

or even

#footer {

background-color: #eef;
text-align; center;
}

depending on how he wants it...
 
D

dorayme

dorayme said:
If OP is going from tables to this sort of thing, surely better
is:

#footer {background-color: #eef;}

or even

#footer {

background-color: #eef;
text-align; center;
}

depending on how he wants it...
Click to expand...

oops... this is mostly stupid of me in this context. Sorry. Let
me point out the perhaps better thought behind my saying this:

If a browser window is not very high or the text is user enlarged
and the user scrolls to the bottom, he/she is in for a surpise
with the footer intruding into the content in an ugly way. Better
to either not so design or sophisticate up (there are things
about this problem but I gave up on what I saw and just avoid the
construction because I have never seen a non headache making
cross browser solution.
 
R

Roy A.

I have this code:

<snip>

It works fine in Firefox (I have a table with the maximum screen
height and no scrollbars).

In IE7 I get a vertical scrollbar and the table looks larger (in
height) than it should be.

I don't understand.... What am I doing wrong?
Click to expand...

"CSS2 does not define what percentage values of 'height' refer to when
specified for table cells."

http://www.w3.org/TR/REC-CSS2/tables.html#height-layout
How can I have the same Firefox appearence in IE7?
Click to expand...

You can't have the Firefox experience in IE7, so I don't know what
you're trying to archive. If you insist on using tables, you could try
something like this:

<head>
<title>Let it flow</title>
<style type="text/css">
html, body {
margin: 0; padding: 0; border: 0;
height: 100%; width: 100%
}
.main { background-color: #FF9999; height: 100%; width: 100% }
.header { height: 60px; background-color: #ffff99 }
.contents { background-color: #FF9999 }
.footer { height: 60px; background-color: #6699ff }
</style>
</head>
....
<body>
<table class="main" cellpadding="0" cellspacing="0">
<tr>
<td style="vertical-align: top">
<div class="header">header</div>
<div class="contents">contents</div>
</td>
</tr>
<tr>
<td style="vertical-align: bottom">
<div class="footer">footer</div>
</td>
</tr>
</table>
</body>
 
L

leodippolito

I appreciate all the replies.

I am developing an ASP.NET application that uses webparts.

Webpart's are server controls (from Microsoft) that render as tables
in the browser.

So I can't use DIV's. Because I can't change the way the webparts are
rendered to the browser, this is Microsoft code.

I am just trying to understand how 100% table height works in
standards mode (IE7).

I'll do more tests and see how it goes.

Thanks again
 
J

Jonathan N. Little

I appreciate all the replies.

I am developing an ASP.NET application that uses webparts.

Webpart's are server controls (from Microsoft) that render as tables
in the browser.
Click to expand...

You have no control over what elements are used?
So I can't use DIV's. Because I can't change the way the webparts are
rendered to the browser, this is Microsoft code.
Click to expand...

Hmm, Microsoft.
I am just trying to understand how 100% table height works in
standards mode (IE7).
Click to expand...

Does 'MS!=Valid Markup' always have to be the rule?
I'll do more tests and see how it goes.

Thanks again
Click to expand...
 

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one? 0
SendGrid email issue in responsive Gmail 1
Having trouble centering contents of td ? 3
HTML Table Issue 1
Filter table rows based on multiple checkboxes value 2
Table height inside form 2
div height issue 6
Help with my responsive home page 2

Members online

No members online now.
Total: 37 (members: 0, guests: 37)
Robots: 475

Forum statistics

Threads
473,769
Messages
2,569,580
Members
45,054
Latest member
TrimKetoBoost

Latest Threads

Top