By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,946 Members | 720 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,946 IT Pros & Developers. It's quick & easy.

Table width - table jumps out of its div

P: n/a
Hi,

In my stylesheet I've set the width of a table to 100% - in Opera and
Firefox, the table is placed within the containing div and it takes up the
total amount of width available.

However, in IE the table "jumps" out of it's container and takes over the
div to the right. It appears as though the table is taking up a width of
100% as in 100% of the page size, not the div.

How can I rectify this?

Pictures, thousand words, etc... At the moment I don't have this online but
if you'd like to see the result, I can always put it online somewhere.

Thanks in advance,

Ikke
Nov 1 '06 #1
Share this Question
Share on Google+
11 Replies


P: n/a
VK

Ikke wrote:
Hi,

In my stylesheet I've set the width of a table to 100% - in Opera and
Firefox, the table is placed within the containing div and it takes up the
total amount of width available.

However, in IE the table "jumps" out of it's container and takes over the
div to the right. It appears as though the table is taking up a width of
100% as in 100% of the page size, not the div.
See
<http://groups.google.com/group/comp.infosystems.www.authoring.stylesheets/msg/6c92890f4573c956>

Nov 1 '06 #2

P: n/a
"VK" <sc**********@yahoo.comwrote in
news:11**********************@e64g2000cwd.googlegr oups.com:
>
Ikke wrote:
>Hi,

In my stylesheet I've set the width of a table to 100% - in Opera and
Firefox, the table is placed within the containing div and it takes
up the total amount of width available.

However, in IE the table "jumps" out of it's container and takes over
the div to the right. It appears as though the table is taking up a
width of 100% as in 100% of the page size, not the div.

See
<http://groups.google.com/group/comp....oring.styleshe
ets/msg/6c92890f4573c956>
That is exactly what I'm faced with - a table nested within the div of a
liquid layout... Alas, there is no solution to be found there.

Do you perhaps have a solution or a suggestion?

Thanks,

Ikke
Nov 1 '06 #3

P: n/a
VK
See
<http://groups.google.com/group/comp....oring.styleshe
ets/msg/6c92890f4573c956>

That is exactly what I'm faced with - a table nested within the div of a
liquid layout... Alas, there is no solution to be found there.

Do you perhaps have a solution or a suggestion?
That depends on what kind of layout do you have in your mind. If it's a
centered on the page content area with left and right remainders then I
have a reliable and elegant solution I use often. If it's a classical
three columns layout with content in each column or something more
sophisticated then I'm not a div-layout guru: but someone else may
suggest something. A link or an ASCII sketch would be helpful.

Nov 1 '06 #4

P: n/a

"Ikke" <ik**@hier.bewrote in message
news:Xn************************@195.130.132.70...
Hi,

In my stylesheet I've set the width of a table to 100% - in Opera and
Firefox, the table is placed within the containing div and it takes up the
total amount of width available.

However, in IE the table "jumps" out of it's container and takes over the
div to the right. It appears as though the table is taking up a width of
100% as in 100% of the page size, not the div.

How can I rectify this?

Pictures, thousand words, etc... At the moment I don't have this online
but
if you'd like to see the result, I can always put it online somewhere.

Thanks in advance,

Ikke
change the width value of the table to 98% to compensate for the IE flaw.

Nov 1 '06 #5

P: n/a
"richard" <do*@john.sonwrote in news:ei*********@news2.newsguy.com:
>
"Ikke" <ik**@hier.bewrote in message
news:Xn************************@195.130.132.70...
>Hi,

In my stylesheet I've set the width of a table to 100% - in Opera and
Firefox, the table is placed within the containing div and it takes
up the total amount of width available.

However, in IE the table "jumps" out of it's container and takes over
the div to the right. It appears as though the table is taking up a
width of 100% as in 100% of the page size, not the div.

How can I rectify this?

Pictures, thousand words, etc... At the moment I don't have this
online but
if you'd like to see the result, I can always put it online
somewhere.

Thanks in advance,

Ikke

change the width value of the table to 98% to compensate for the IE
flaw.
How is that going to help? I've just tried it, and all it does is make the
table the suggested 2% less wide - the layout is still messed up...

Thanks anyway,

Ikke
Nov 1 '06 #6

P: n/a
"VK" <sc**********@yahoo.comwrote in
news:11********************@i42g2000cwa.googlegrou ps.com:
See
<http://groups.google.com/group/comp....uthoring.style
she ets/msg/6c92890f4573c956>

That is exactly what I'm faced with - a table nested within the div
of a liquid layout... Alas, there is no solution to be found there.

Do you perhaps have a solution or a suggestion?

That depends on what kind of layout do you have in your mind. If it's
a centered on the page content area with left and right remainders
then I have a reliable and elegant solution I use often. If it's a
classical three columns layout with content in each column or
something more sophisticated then I'm not a div-layout guru: but
someone else may suggest something. A link or an ASCII sketch would be
helpful.
Indeed - I'm going to put an example online in an hour or so...

Thanks,

Ikke
Nov 1 '06 #7

P: n/a
Ikke <ik**@hier.bewrote in news:Xns986EF131EAE2Bikkehierbe@
195.130.132.70:

<snip>
Indeed - I'm going to put an example online in an hour or so...
Here is the link: http://tesinfo.atspace.com/sample.html

Opera and Firefox display this site just as I want them to display it, but
IE messes up the table completely (the table is positioned below the center
and right div, and extends past the entire page).

As I've mentioned in another post, setting the width to 98% did not work
(as I expected).

Thanks for any help,

Ikke
Nov 1 '06 #8

P: n/a
In article <Xn************************@195.130.132.70>,
Ikke <ik**@hier.bewrote:
Ikke <ik**@hier.bewrote in news:Xns986EF131EAE2Bikkehierbe@
195.130.132.70:

<snip>
Indeed - I'm going to put an example online in an hour or so...

Here is the link: http://tesinfo.atspace.com/sample.html

Opera and Firefox display this site just as I want them to display it, but
IE messes up the table completely (the table is positioned below the center
and right div, and extends past the entire page).

As I've mentioned in another post, setting the width to 98% did not work
(as I expected).

Thanks for any help,

Ikke
Have you tried things for IE like

* html table {width:50%}

in your css? Play with the width value.

--
dorayme
Nov 1 '06 #9

P: n/a
VK
Here is the link: http://tesinfo.atspace.com/sample.html
>
Opera and Firefox display this site just as I want them to display it, but
IE messes up the table completely (the table is positioned below the center
and right div, and extends past the entire page).
That is just a guess from my another post, but try to set all
layout-crucial rules (width, float, clear etc) in style attributes of
involved div's. Will it produce any effect?

Nov 1 '06 #10

P: n/a
VK
http://tesinfo.atspace.com/sample.html

Just noticed: before anything else get the prolog (<?xml
version="1.0"?>) out!
It enforces quirk mode on IE plus IE's box model. Before IE box model
is normalized with others further investigations are rather useless.

Nov 1 '06 #11

P: n/a
"VK" <sc**********@yahoo.comwrote in news:1162425514.342529.243200
@h54g2000cwb.googlegroups.com:
>http://tesinfo.atspace.com/sample.html

Just noticed: before anything else get the prolog (<?xml
version="1.0"?>) out!
It enforces quirk mode on IE plus IE's box model. Before IE box model
is normalized with others further investigations are rather useless.
That's done the trick! As soon as I removed the prolog, the table showed up
exactly where I wanted it to, even in IE!!

Thank you very much!

Ikke
Nov 2 '06 #12

This discussion thread is closed

Replies have been disabled for this discussion.