|
|
Posted by Gιrard Talbot on 02/12/07 18:36
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/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
--
Using Web Standards in your Web Pages (Updated Feb. 2007)
http://developer.mozilla.org/en/docs/Using_Web_Standards_in_your_Web_Pages
[Back to original message]
|