Margins ignored by table - how can I fix?

[Richard Lawrence]

Hi,

Consider the following:

#Content {
margin:0px 210px 50px 200px;
padding:10px;
}

If I use it with the following HTML:

<div id="Content">
<p>The quick brown fox jumps over the lazy dog. The quick brown fox
jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog. The quick brown fox jumps
over the lazy dog. The quick brown fox jumps over the lazy dog. The
quick brown fox jumps over the lazy dog. The quick brown fox jumps
over the lazy dog. </p>
<table style="width: 100%;">
<tr><td bgcolor="#ffaaaa">head</td><td
bgcolor="#aaffaa">head2</td></tr>
<tr><td>content</td><td>stuff</td></tr>
<tr><td>bits</td><td>things</td></tr>
</table>
</div>

then under IE 5.5 the table does not sit within the margins, but
crashes out into the area to the right.

However in Firebird, Mozilla and Safari, it sits in the middle coloum
and obeys the margins.

Ignoring the fact that the rendering of IE 5.5 is not as good as the
others - is there any way I can fudge it so that the table works on
version 5.x of IE?

Many thanks,

Richard

[Anne van Kesteren]

Richard Lawrence wrote:

[snip]

then under IE 5.5 the table does not sit within the margins, but
crashes out into the area to the right.
Probably a bug.
However in Firebird, Mozilla and Safari, it sits in the middle coloum
and obeys the margins.
Probably correct.
Ignoring the fact that the rendering of IE 5.5 is not as good as the
others - is there any way I can fudge it so that the table works on
version 5.x of IE?

It looks like you are using <table> for a presentational thing, aren't
you? In that case you should replace it with real HTML elements, like
<h1>, <h2> etc.

--
Anne van Kesteren
<http://www.annevankesteren.nl/>

[Richard Lawrence]

Anne van Kesteren <ma**@annevankesteren.nl> wrote in message news:<bt**********@reader08.wxs.nl>...

Ignoring the fact that the rendering of IE 5.5 is not as good as the
others - is there any way I can fudge it so that the table works on
version 5.x of IE?

It looks like you are using <table> for a presentational thing, aren't
you? In that case you should replace it with real HTML elements, like
<h1>, <h2> etc.

Hi,

Thanks for your response. However I am confused. How can I replace it
with real HTML elements?

If I want to create a table within the middle area (defined by my
stylesheet) that compaires say one product to another (with a list of
the feature, two coloums and a number of ticks and crosses) how else
can I do this without resorting to a table?

Regards,

Richard.

[Brian]

Richard Lawrence wrote:

Anne van Kesteren <ma**@annevankesteren.nl> wrote in message
news:<bt**********@reader08.wxs.nl>...

It looks like you are using <table> for a presentational thing,
aren't you? In that case you should replace it with real HTML
elements, like <h1>, <h2> etc.

If I want to create a table within the middle area (defined by my
stylesheet) that compaires say one product to another (with a list
of the feature, two coloums and a number of ticks and crosses) how
else can I do this without resorting to a table?

It sounds like you cannot. If it's tabular data, then (of course) use
table markup.

uri?

--
Brian
follow the directions in my address to email me

[Richard Lawrence]

Brian <us*****@julietremblay.com.invalid-remove-this-part> wrote in message news:<WEdLb.779774$Tr4.2233563@attbi_s03>...

Richard Lawrence wrote:

Anne van Kesteren <ma**@annevankesteren.nl> wrote in message
news:<bt**********@reader08.wxs.nl>...

It looks like you are using <table> for a presentational thing,
aren't you? In that case you should replace it with real HTML
elements, like <h1>, <h2> etc.

If I want to create a table within the middle area (defined by my
stylesheet) that compaires say one product to another (with a list
of the feature, two coloums and a number of ticks and crosses) how
else can I do this without resorting to a table?

It sounds like you cannot. If it's tabular data, then (of course) use
table markup.

uri?

Hi,

Yes it will be tabular data. Here is a mockup of how the site will
look:

http://www.mercury.uk.net/mockup/index.html

As you can see, the test table looks fine on modern browsers, but IE
5.5 does not adhere to the margins defined. I'm happy to use some
horrible hack to get it working as long as those users can see it -
but even then, i'm not sure what the hack could be.

Many thanks for any advice!

Regards,

Richard.

[Brian]

Richard Lawrence wrote:

Yes it will be tabular data. Here is a mockup of how the site will
look:

http://www.mercury.uk.net/mockup/index.html
Without real content, it's hard to know whether the markup makes
sense. It doesn't really look like tabular data to me, but I can't say
for sure.
As you can see, the test table looks fine on modern browsers, but
IE 5.5 does not adhere to the margins defined.
What margins are you defining?
I'm happy to use some horrible hack to get it working as long as
those users can see it - but even then, i'm not sure what the hack
could be.
Before applying a hack, figure out what is causing the scrollbars.
Have you set a width to the table?
Many thanks for any advice!

My advice is that you have more serious problems then margins on the
table in one particular browser.

1. You have invalid markup in your table where you set a bgcolor for
td. Rather than fix it, just remove it altogether, and use css to
suggest the colors you want.

2. Why have you specified a font-size less than 100%? I have already
chosen a size that I find comfortable, thank you, and I don't need
authors telling me that they know better.

body {font-size: 100%;}

It's arguably acceptable to use a smaller font-size in a *limited*
fashion, e.g., for a copyright notice.

div.copyright {font-size: 90%;}

--
Brian
follow the directions in my address to email me

[Richard Lawrence]

Brian <us*****@julietremblay.com.invalid-remove-this-part> wrote in message news:<ikBMb.33236$5V2.50235@attbi_s53>...

Richard Lawrence wrote:

Yes it will be tabular data. Here is a mockup of how the site will
look:

http://www.mercury.uk.net/mockup/index.html
Without real content, it's hard to know whether the markup makes
sense. It doesn't really look like tabular data to me, but I can't say
for sure.

Scroll to the bottom of the page. There is a table there which I'm
trying to get to fit into the middle coloum.

As you can see, the test table looks fine on modern browsers, but
IE 5.5 does not adhere to the margins defined.

What margins are you defining?

From layout.css:

#Content {
margin:0px 210px 50px 200px;
padding:10px;
}

I'm happy to use some horrible hack to get it working as long as
those users can see it - but even then, i'm not sure what the hack
could be.

Before applying a hack, figure out what is causing the scrollbars.
Have you set a width to the table?

Yes, in index.html:

<table style="width: 100%;">

I want the table to span the entire coloum and not occupy the smallest
amount of space. <table> works, but it's crushed up to the smallest
possible space, which isn't what I want. I can't set pixel widths
because they'll be wrong when someone resizes and

<table id="Content">

doesn't fix the problem either.
My advice is that you have more serious problems then margins on the
table in one particular browser.

Thanks for these. Although everything else apart from the table is
valid XHTML 1.0 Strict, I wasn't intending on using the table in its
current form for anything else but testing the margins problem. The
background colours are just to hilight to me (and others) where the
cell problems are. Having said all that, I've corrected the problems
(including font percentages), but unfortunately i'm still no closer to
forcing the table to adhere to the margin specified by the stylesheet.

If you don't have IE 5.5 to hand, then you can see the problem in a
screenshot at http://www.fourteenminutes.com/screen.gif

Any suggestions gratefully received.

Many thanks,

Richard.

[Brian]

Richard Lawrence wrote:

Brian wrote

http://www.mercury.uk.net/mockup/index.html
Without real content, it's hard to know whether the markup makes
sense.

Scroll to the bottom of the page. There is a table there which I'm
trying to get to fit into the middle coloum.

I found the table just fine. But there's no real tabular data in it.
So I cannot comment on whether a table is correct markup. No matter.
#Content { margin:0px 210px 50px 200px; padding:10px; }

Have you set a width to the table?
Yes, in index.html:

<table style="width: 100%;">

That looks like the problem. You want the table width to be 100% of
the available space, *and* you want margins tacked on. If for example
the available space is 400px, the table width will be 400px. Add
padding of 10px on left and right; add margin of 210px and 200px, and
the total width is 830px, much larger than the available 400px. Hence
horizontal scrollbars.
I want the table to span the entire coloum and not occupy the
smallest amount of space.
Lose the margins. Keep the width.
<table> works, but it's crushed up to the smallest possible space,
which isn't what I want.
Again, your wishes make me wonder whether it really is tabular data.
unfortunately i'm still no closer to forcing the table to adhere to
the margin specified by the stylesheet.

You cannot really force anything on the www. Not even with layout
tables and fixed positioning.

http://webtips.dan.info/force.html

--
Brian
follow the directions in my address to email me