Velocity Reviews

Velocity Reviews (http://www.velocityreviews.com/forums/index.php)
-   HTML (http://www.velocityreviews.com/forums/f31-html.html)
-   -   Table height issue in IE7 (http://www.velocityreviews.com/forums/t392158-table-height-issue-in-ie7.html)

leodippolito@gmail.com 02-12-2007 03:38 PM

Table height issue in IE7
 
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!


Jonathan N. Little 02-12-2007 05:01 PM

Re: Table height issue in IE7
 
leodippolito@gmail.com wrote:
> Hi there,
>
> I have this code:

<snip code>
>
> ---
>
> 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?


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

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

Jukka K. Korpela 02-12-2007 06:03 PM

Re: Table height issue in IE7
 
Scripsit leodippolito@gmail.com:

> I have this code:


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.


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.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/


=?ISO-8859-1?Q?G=E9rard_Talbot?= 02-12-2007 06:36 PM

Re: Table height issue in IE7
 
leodippolito@gmail.com wrote :
> Hi there,
>
> I have this code:
>


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

> ---
>
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
> www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
>


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%;


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


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


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>
>
> ---
>
> It works fine in Firefox (I have a table with the maximum screen
> height and no scrollbars).


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.


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!


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/Nv...CSSDesign.html

and you can pick a CSS tablefree webpage template here:

http://www.gtalbot.org/NvuSection/Nv...bpageTemplates

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

Gérard
--
Using Web Standards in your Web Pages (Updated Feb. 2007)
http://developer.mozilla.org/en/docs...your_Web_Pages

dorayme 02-12-2007 08:26 PM

Re: Table height issue in IE7
 
In article <b80f4$45d09d48$40cba7ac$3255@NAXS.COM>,
"Jonathan N. Little" <lws4art@centralva.net> wrote:

> leodippolito@gmail.com wrote:
> > Hi there,
> >
> > I have this code:

> <snip code>
> >
> > ---
> >
> > 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?

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


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

--
dorayme

dorayme 02-12-2007 08:37 PM

Re: Table height issue in IE7
 
In article
<doraymeRidThis-8187F5.07261913022007@news-vip.optusnet.com.au>,
dorayme <doraymeRidThis@optusnet.com.au> wrote:

> In article <b80f4$45d09d48$40cba7ac$3255@NAXS.COM>,
> "Jonathan N. Little" <lws4art@centralva.net> wrote:
>
> > leodippolito@gmail.com wrote:
> > > Hi there,
> > >

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


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.

--
dorayme

Roy A. 02-13-2007 03:32 AM

Re: Table height issue in IE7
 
On 12 Feb, 16:38, leodippol...@gmail.com wrote:
> 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?


"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?


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>


leodippolito@gmail.com 02-13-2007 01:05 PM

Re: Table height issue in IE7
 
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


Jonathan N. Little 02-13-2007 01:50 PM

Re: Table height issue in IE7
 
leodippolito@gmail.com wrote:
> 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.


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.


Hmm, Microsoft.

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


Does 'MS!=Valid Markup' always have to be the rule?

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



--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com


All times are GMT. The time now is 10:37 PM.

Powered by vBulletin®. Copyright ©2000 - 2014, vBulletin Solutions, Inc.
SEO by vBSEO ©2010, Crawlability, Inc.