473,236 Members | 1,778 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,236 software developers and data experts.

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

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.

Oct 25 '07 #1
16 3070
Ok, I found out. If I set the container to width: 100%, then the table
fits properly.

Oct 26 '07 #2
In article
<11**********************@22g2000hsm.googlegroups. com>,
"Charles A. Landemaine" <la********@gmail.comwrote:
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.
Put in a 4.01 Strict doctype:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

right at the top of your html page and this should fix.

--
dorayme
Oct 26 '07 #3
On Oct 25, 11:03 pm, dorayme <doraymeRidT...@optusnet.com.auwrote:
Put in a 4.01 Strict doctype:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

right at the top of your html page and this should fix.

Thanks dorayme. The problem is that with a doctype I can't enable
quirks mode to use all page height to center a page vertically.

Charles.
Oct 26 '07 #4
rf

"Charles A. Landemaine" <la********@gmail.comwrote in message
news:11**********************@z9g2000hsf.googlegro ups.com...
On Oct 25, 11:03 pm, dorayme <doraymeRidT...@optusnet.com.auwrote:
>Put in a 4.01 Strict doctype:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

right at the top of your html page and this should fix.


Thanks dorayme. The problem is that with a doctype I can't enable
quirks mode to use all page height to center a page vertically.
Then you are screwed. Standards mode does not centre "vertically".

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?

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

If you show us what you have to date, even the quirks mode version, we may
be able to help. URL?

--
Richard.

Oct 26 '07 #5
In article <Tz*****************@news-server.bigpond.net.au>,
"rf" <rf@invalid.comwrote:
"Charles A. Landemaine" <la********@gmail.comwrote in message
news:11**********************@z9g2000hsf.googlegro ups.com...
On Oct 25, 11:03 pm, dorayme <doraymeRidT...@optusnet.com.auwrote:
Put in a 4.01 Strict doctype:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

right at the top of your html page and this should fix.

Thanks dorayme. The problem is that with a doctype I can't enable
quirks mode to use all page height to center a page vertically.

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

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?

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

If you show us what you have to date, even the quirks mode version, we may
be able to help. URL?
Yes, I agree with rf, it is highly unlikely to be a good
solution. The doctype that made your problem disappear on my
Winbox is almost certainly more advantageous overall than a
couple of tactical advantages you may have found. What exactly is
it that you want to vertically centre? Is it something small that
is somehow more attractive on most?/average?/medium?
screens/browser sizes?

--
dorayme
Oct 26 '07 #6
On Oct 26, 8:54 am, "rf" <r...@invalid.comwrote:
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.
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
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.

Oct 26 '07 #7
On 2007-10-26, Charles A. Landemaine <la********@gmail.comwrote:
[...]
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>
Oct 26 '07 #8
In article
<11**********************@57g2000hsv.googlegroups. com>,
"Charles A. Landemaine" <la********@gmail.comwrote:
... 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
Oct 26 '07 #9
On Oct 26, 5:54 pm, Ben C <spams...@spam.eggswrote:
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.

Oct 27 '07 #10
On 2007-10-27, Charles A. Landemaine <la********@gmail.comwrote:
On Oct 26, 5:54 pm, Ben C <spams...@spam.eggswrote:
[...]
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.
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.
Oct 27 '07 #11
On Oct 27, 8:24 am, Ben C <spams...@spam.eggswrote:
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.
That's just what the viewport is defined as. Its dimensions are whatever
the user sized the window to.
Alright, thanks for everything :)

Charles.

Oct 28 '07 #12
On Oct 26, 5:54 pm, Ben C <spams...@spam.eggswrote:
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.

Oct 29 '07 #13
On 2007-10-29, Charles A. Landemaine <la********@gmail.comwrote:
On Oct 26, 5:54 pm, Ben C <spams...@spam.eggswrote:
>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/
Oct 29 '07 #14
On Oct 29, 5:41 am, Ben C <spams...@spam.eggswrote:
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 alsohttp://www.student.oulu.fi/~laurirai/www/css/middle/


Thanks Ben. Actually, text will be "Loading..." :)
I tried your suggestion, it's working fine in Opera but not IE7 :(
http://auriance.com/docs/tmp/xhtml.div.html
I read the article (pretty good). The problem in my case is that
height is variable...
Any idea?
Thanks,

Charles.

Oct 29 '07 #15
On 2007-10-29, Charles A. Landemaine <la********@gmail.comwrote:
On Oct 29, 5:41 am, Ben C <spams...@spam.eggswrote:
>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 alsohttp://www.student.oulu.fi/~laurirai/www/css/middle/

Thanks Ben. Actually, text will be "Loading..." :)
I tried your suggestion, it's working fine in Opera but not IE7 :(
http://auriance.com/docs/tmp/xhtml.div.html
I read the article (pretty good). The problem in my case is that
height is variable...
If it's just one line-- "Loading..."-- then I was thinking you could set
the height to about 1.2em. That should be about the right size.

Otherwise you need a table, and if you want it to work in IE, that means
a <table>.
Oct 29 '07 #16
On Oct 29, 12:21 pm, Ben C <spams...@spam.eggswrote:
If it's just one line-- "Loading..."-- then I was thinking you could set
the height to about 1.2em. That should be about the right size.

Otherwise you need a table, and if you want it to work in IE, that means
a <table>.
Thanks Ben, yes, in my case I'll use this: http://auriance.com/docs/tmp/align.div.html
Seems to be working fine in most browsers. If I need to center a Flash
movie, I'll take care of the height of the movie and I'll substract
1/2 of its height in the negative top margin to keep it centered :)
Cheers,

Charles.

Oct 29 '07 #17

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

25
by: kie | last post by:
hello, i have a table that creates and deletes rows dynamically using createElement, appendChild, removeChild. when i have added the required amount of rows and input my data, i would like to...
0
by: Thomas Scheiderich | last post by:
I have a table that has 3 image slices. The middle slice changes size based on size of browser window. This works great. My client wants the date to show over the image on the right. So what I...
3
by: Pavan | last post by:
Hi All, I am having a wierd problem while displaying my panel. My code is something like this <table> <tr> <td width=100>label</td> <td width=100>label</td> <td width=100>label</td> <td...
4
by: Arthur Dent | last post by:
Hello all... i have a really frsutrating problem here... This is only happening in IE (6 & 7b2), Mozilla and Netscape are both OK. I have a top-level table with a width of 760px, so it should be...
117
by: phil-news-nospam | last post by:
Is there really any advantage to using DIV elements with float style properies, vs. the old method of TABLE and TR and TD? I'm finding that by using DIV, it still involves the same number of...
7
by: Jeff | last post by:
hey gang. i have a question that is probably simple, and i could do it at one time, but i forget how. ok, how to explain i need to retrieve records from a db. which is no problem. but instead...
3
by: McKirahan | last post by:
I have a Web page that uses some JavaScript and CSS. I have specified a three column table with a fixed-width left and right side; the center colum expands to fill the page. Within this...
1
Merlin1857
by: Merlin1857 | last post by:
How to search multiple fields using ASP A major issue for me when I first started writing in VB Script was constructing the ability to search a table using multiple field input from a form and...
0
by: vozzek | last post by:
EDIT: Nevermind, I fixed this by using a <BR /> instead of trying to write option_a to a new row of the table. Thanks all! Hi all, This has been haunting me for over a day now, and I can't...
0
by: abbasky | last post by:
### Vandf component communication method one: data sharing ​ Vandf components can achieve data exchange through data sharing, state sharing, events, and other methods. Vandf's data exchange method...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 7 Feb 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:30 (7.30PM). In this month's session, the creator of the excellent VBE...
0
by: stefan129 | last post by:
Hey forum members, I'm exploring options for SSL certificates for multiple domains. Has anyone had experience with multi-domain SSL certificates? Any recommendations on reliable providers or specific...
1
by: davi5007 | last post by:
Hi, Basically, I am trying to automate a field named TraceabilityNo into a web page from an access form. I've got the serial held in the variable strSearchString. How can I get this into the...
0
by: MeoLessi9 | last post by:
I have VirtualBox installed on Windows 11 and now I would like to install Kali on a virtual machine. However, on the official website, I see two options: "Installer images" and "Virtual machines"....
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: Aftab Ahmad | last post by:
Hello Experts! I have written a code in MS Access for a cmd called "WhatsApp Message" to open WhatsApp using that very code but the problem is that it gives a popup message everytime I clicked on...
0
by: Aftab Ahmad | last post by:
So, I have written a code for a cmd called "Send WhatsApp Message" to open and send WhatsApp messaage. The code is given below. Dim IE As Object Set IE =...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.