Table with 100% width of page instead of page in IE7

#1

I set a table with 100% width to occupy all available space, but in
IE7 it uses more than that, it uses 100% of the page width instead of
100% of the table container. Could you test the page in IE7 and in
other browsers please?

http://auriance.com/docs/tmp/test.html

I'd like the main content and the right menu on the same level. It's
working fine in most browsers except in IE7. Do you know how I can fix
it?
Thanks.

#2

Ok, I found out. If I set the container to width: 100%, then the table
fits properly.

#3

On Oct 26, 8:54 am, "rf" <r... (AT) invalid (DOT) com> wrote:

Quote:

Then you are screwed. Standards mode does not centre "vertically".

Yeah, I know, the view port stops where the content stops and not in
the lower boundary of the screen.

Quote:

You are solving the wrong problem. You should be looking into why you need
to centre a "page" vertically. Vertically in what? The current viewport?
Why? What does this gain your viewer?

Yes, centered vertically and horizontally in the browser. I can
achieve it in quirks mode:

http://auriance.com/docs/tmp/notcenter.html

If I add the doctype, I'm in standard mode and it doesn't work
anymore:

http://auriance.com/docs/tmp/notcenter.html

Quote:

Invoking quirks mode in the couple of browsers that support it is not the
solution.

Ok, I actually can achieve it in standard mode but only stuffing the
code with javascript and lately I have dropped it, I'm using quirks
mode with less code. If you have another suggestion, please let me
know.
Thanks,

Charles.

#4

On 2007-10-26, Charles A. Landemaine <landemaine (AT) gmail (DOT) com> wrote:
[...]

Quote:

http://auriance.com/docs/tmp/notcenter.html
[...]
Ok, I actually can achieve it in standard mode but only stuffing the
code with javascript and lately I have dropped it, I'm using quirks
mode with less code. If you have another suggestion, please let me
know.

Well, this should work in strict mode in Firefox, Opera and Konqueror:

html, body
{
margin: 0;
padding: 0;
height: 100%; /* I suspect this is what quirks mode is giving
you in this case */
}
table
{
width: 100%;
height: 100%;
}
td
{
/* These are preferable to align="center" */
vertical-align: middle;
text-align: center;
}

<body>
<table>
<tr>
<td>Centre of screen</td>
</tr>
</table>
</body>

#5

In article
<1193416504.612525.219370 (AT) 57g2000hsv (DOT) googlegroups.com>,
"Charles A. Landemaine" <landemaine (AT) gmail (DOT) com> wrote:

Quote:

... centered vertically and horizontally in the browser. I can
achieve it in quirks mode:

http://auriance.com/docs/tmp/notcenter.html

If I add the doctype, I'm in standard mode and it doesn't work
anymore:

http://auriance.com/docs/tmp/notcenter.html

?

--
dorayme

#6

On Oct 26, 5:54 pm, Ben C <spams... (AT) spam (DOT) eggs> wrote:

Quote:

Well, this should work in strict mode in Firefox, Opera and Konqueror:

html, body
{
margin: 0;
padding: 0;
height: 100%; /* I suspect this is what quirks mode is giving
you in this case */
}
table
{
width: 100%;
height: 100%;
}
td
{
/* These are preferable to align="center" */
vertical-align: middle;
text-align: center;
}

body
table
tr
td>Centre of screen</td
/tr
/table
/body

Thanks, indeed, it's working fine: http://auriance.com/docs/tmp/xhtml.html
I could remove safely "padding: 0;" from html, body, it's still
working fine. What I don't understand is that the browsers consider
the viewport is all the window and not the content (just one line).
What do you think?
Thanks anyway :-)

Charles.

#7

On 2007-10-27, Charles A. Landemaine <landemaine (AT) gmail (DOT) com> wrote:

Quote:

On Oct 26, 5:54 pm, Ben C <spams... (AT) spam (DOT) eggs> wrote:
[...]
Thanks, indeed, it's working fine: http://auriance.com/docs/tmp/xhtml.html
I could remove safely "padding: 0;" from html, body, it's still
working fine.

Most browsers have a bit of margin on body by default, but some may use
padding instead, so it's safer to set both to 0. The idea is to make
sure that body's content area is exactly the same as the viewport, no
smaller, or you'll end up with an annoying short scroll bar.

Quote:

What I don't understand is that the browsers consider
the viewport is all the window and not the content (just one line).
What do you think?

That's just what the viewport is defined as. Its dimensions are whatever
the user sized the window to.

#8

On Oct 27, 8:24 am, Ben C <spams... (AT) spam (DOT) eggs> wrote:

Quote:

Most browsers have a bit of margin on body by default, but some may use
padding instead, so it's safer to set both to 0. The idea is to make
sure that body's content area is exactly the same as the viewport, no
smaller, or you'll end up with an annoying short scroll bar.

I'll keep it, then.

Quote:

That's just what the viewport is defined as. Its dimensions are whatever
the user sized the window to.

Alright, thanks for everything

Charles.

#9

On Oct 26, 5:54 pm, Ben C <spams... (AT) spam (DOT) eggs> wrote:

Quote:

Well, this should work in strict mode in Firefox, Opera and Konqueror:

html, body
{
margin: 0;
padding: 0;
height: 100%; /* I suspect this is what quirks mode is giving
you in this case */
}
table
{
width: 100%;
height: 100%;
}
td
{
/* These are preferable to align="center" */
vertical-align: middle;
text-align: center;
}

body
table
tr
td>Centre of screen</td
/tr
/table
/body

Hello guys,

Me again :-)
The above doesn't work with a division, does it?
http://auriance.com/docs/tmp/xhtml.div.html
Please let me know, thanks.

Charles.

#10

On 2007-10-29, Charles A. Landemaine <landemaine (AT) gmail (DOT) com> wrote:

Quote:

On Oct 26, 5:54 pm, Ben C <spams... (AT) spam (DOT) eggs> wrote:
Well, this should work in strict mode in Firefox, Opera and Konqueror:

html, body
{
margin: 0;
padding: 0;
height: 100%; /* I suspect this is what quirks mode is giving
you in this case */
}
table
{
width: 100%;
height: 100%;
}
td
{
/* These are preferable to align="center" */
vertical-align: middle;
text-align: center;
}

body
table
tr
td>Centre of screen</td
/tr
/table
/body

Hello guys,

Me again :-)
The above doesn't work with a division, does it?
http://auriance.com/docs/tmp/xhtml.div.html

No. Vertical-align: middle means something different when not applied to
a table cell.

It means align text to the middle of the line box instead of to the
baseline (actually it means move it up from the baseline by half the
ex-height of the div's "strut") In this case it just moves your text up
by a small number of pixels.

Vertical centering is not easy to achieve without tables or display:
table unless you're prepared to set an explicit height. If you've really
got just one line of text saying something like "Centre of screen" then
you can just set the div's height to 1.2em or so.

If you can set width and height something like this should work:

position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
height: 1.2em;
width: 15em;
text-align: center;

See also http://www.student.oulu.fi/~laurirai/www/css/middle/

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Table with 100% width of page instead of page in IE7

Cascading Style Sheets Layout/presentation on the WWW (comp.infosystems.www.authoring.stylesheets)

Table with 100% width of page instead of page in IE7 - 10-25-2007 , 03:50 PM

Re: Table with 100% width of page instead of page in IE7 - 10-25-2007 , 07:56 PM

Re: Table with 100% width of page instead of page in IE7 - 10-26-2007 , 11:35 AM

Re: Table with 100% width of page instead of page in IE7 - 10-26-2007 , 03:54 PM

Re: Table with 100% width of page instead of page in IE7 - 10-26-2007 , 03:57 PM

Re: Table with 100% width of page instead of page in IE7 - 10-27-2007 , 04:23 AM

Re: Table with 100% width of page instead of page in IE7 - 10-27-2007 , 06:24 AM

Re: Table with 100% width of page instead of page in IE7 - 10-28-2007 , 07:58 AM

Re: Table with 100% width of page instead of page in IE7 - 10-28-2007 , 08:00 PM

Re: Table with 100% width of page instead of page in IE7 - 10-29-2007 , 03:41 AM