IE working differently that Mozilla in Strict mode

[tshad]

I had my pages working fine in transitional mode and then needed to switch
to Strict mode and found that IE doesn't handle the centering of the text
the same way.

All the text inside the tables is now being centered instead of left
justified as it was before and still does until Mozilla and Netscape.

I tried using <center> to center my tables inside another table
(http://www.payrollworkshop.com/samples/tabletest2.htm).

I tried using <td align="center">
(http://www.payrollworkshop.com/samples/tabletest3.htm) and got the same
problem.

I tried using <td style="text-align:center">
(http://www.payrollworkshop.com/samples/tabletest4.htm) and got the same
problem.

How do I set this up so that I am Centering the Table and not the text?

Thanks,

Tom

 

[dorayme]

Organization: SBC http://yahoo.sbc.com
Newsgroups: alt.html
Date: Tue, 22 Mar 2005 01:30:33 GMT
Subject: IE working differently that Mozilla in Strict mode

I had my pages working fine in transitional mode and then needed to switch
to Strict mode and found that IE doesn't handle the centering of the text
the same way.

All the text inside the tables is now being centered instead of left
justified as it was before and still does until Mozilla and Netscape.

I tried using <center> to center my tables inside another table
(http://www.payrollworkshop.com/samples/tabletest2.htm).

I tried using <td align="center">
(http://www.payrollworkshop.com/samples/tabletest3.htm) and got the same
problem.

I tried using <td style="text-align:center">
(http://www.payrollworkshop.com/samples/tabletest4.htm) and got the same
problem.

How do I set this up so that I am Centering the Table and not the text?

Thanks,

Tom

You could try putting <td style="text-align:center"> as your td tags. Your
closest stab at this centers the td itself as you can see by setting 1px
borders around things...

Really, if you are going strict, and you do use tables, better to use a
stylesheet (external or in the head) and style the table and tds... But the
suggestion above, should at least center the text. Try hard not to use
tables within tables! Maybe it's ok to be a bit naughty, but hesitate more
from being diabolical...

dorayme

 

[Mark Parnell]

How do I set this up so that I am Centering the Table and not the text?

http://dorward.me.uk/www/centre/

 

[tshad]

You could try putting <td style="text-align:center"> as your td tags. Your
closest stab at this centers the td itself as you can see by setting 1px
borders around things...

I did that in my 3rd example. If you run this in Mozilla or Netscape (or IE
with the Transitional instead of Strict) it shows how I was trying to get it
to show and was working fine until I changed to Strict.

The problem I wanted the table to be centered, not the text inside the
table. How would I do this in a style sheet. I actually was using a style
sheet, but stripped everything out to show the problem.

Really, if you are going strict, and you do use tables, better to use a
stylesheet (external or in the head) and style the table and tds... But the
suggestion above, should at least center the text. Try hard not to use
tables within tables! Maybe it's ok to be a bit naughty, but hesitate more
from being diabolical...

I have no choice here. This is actually an asp.net page which has a
Datagrid inside of a datalist. These render to tables - so I would have
tables inside tables.

Tom

 

[tshad]

http://dorward.me.uk/www/centre/

That was a good article and it almost works.

From what it says, IE has its problems and to get it to work you need to set
the outside block to center and then set the inside block (table) to left
justified.

I did that:



<table width="100%" height="100%" border="1" cellpadding="0"
cellspacing="0">
<tr>
<td style="text-align:center" valign="top">

<br>

<table border="1" style="text-align:left"style="margin-left:5px" >
<tr>

And it works

For IE,

but not it doesn't center the inner table in Netscape or Mozilla. It left
justfies the Block and the text.

Just can't seem to win here.

Here is the screen with the above screen which works in IE, but not in
Mozilla:

http://www.payrollworkshop.com/samples/tabletest5.htm.

Thanks,

Tom

 

[Mark Parnell]

but not it doesn't center the inner table in Netscape or Mozilla. It left
justfies the Block and the text.

http://www.payrollworkshop.com/samples/tabletest5.htm.

Well, apart from the fact that you don't need (and shouldn't be using)
nested tables, you haven't specified anything to centre the inner table
(in conforming browsers). Add margin:auto; to the styles for the inner
table.

 

[Sid Ismail]

: > How do I set this up so that I am Centering the Table and not the text?
: >


Read this excellent treatise:
http://theodorakis.net/blockcenter.html

Sid

 

[Oli Filth]

I had my pages working fine in transitional mode and then needed to switch
to Strict mode and found that IE doesn't handle the centering of the text
the same way.

All the text inside the tables is now being centered instead of left
justified as it was before and still does until Mozilla and Netscape.

I tried using <center> to center my tables inside another table
(http://www.payrollworkshop.com/samples/tabletest2.htm).

I tried using <td align="center">
(http://www.payrollworkshop.com/samples/tabletest3.htm) and got the same
problem.

I tried using <td style="text-align:center">
(http://www.payrollworkshop.com/samples/tabletest4.htm) and got the same
problem.

Note that in HTML Strict, neither the <center> tag nor the align
attribute are allowed.

In your CSS, either use "text-align: center" on a block to centre-align
its inline content, or "margin: auto" to centre-align the block itsel

 

[tshad]

Well, apart from the fact that you don't need (and shouldn't be using)
nested tables, you haven't specified anything to centre the inner table
(in conforming browsers). Add margin:auto; to the styles for the inner
table.

I thought my <td style="text-align:center"> was doing that. Doesn't that
say to center align whatever is inside the td tag?

Adding the margin:auto to the table that is inside the td tag did work
(tabletest6.htm). Just not sure why, yet.

According to your article text-align refers to the inline content (which I
would assume to be the table). Then I put text-align:left in the table for
the content inside that table (which does seem to work in IE - and Mozilla
after adding the margin:auto).

Also, according to the article, you can't really follow CSS guidelines as it
doesn't work for different browsers. You need to know what the hacks are
for certain browsers ( IE has bugs relating to CSS according to the
article). Then you need to know how to do another hack (that wouldn't have
been necessary if you didn't have to do the first hack) to get the other
browsers to work.

It also seems to say that the text-align refers to the text inside the block
("text is inline content") and then later it says that block elements are
inline content (" browser treats block level elements as inline content ").

The problem doesn't seem to be tables but the treatement of them in the
different browsers.

I am still confused on the whole margin business - but it works.

Very confusing.

Thanks,

Tom

 

[tshad]

And just to add:

From the article that Sid offered http://theodorakis.net/blockcenter.html,

Just part of the contents:

# A hack to trick MSIE5 into centering fixed-width blocks.

* Example 3
* Example 4

# A nonstandard solution that works with some browsers.

* Example 5

No wonder it is so frustrating. You need to find the hacks and nonstandard
solutions to make this all work.

I don't know whether browsers such as Mozilla and Netscape are doing it
right or IE is (maybe neither), but I thought that styles and CSS were
supposed to fix the compatability problems that we used to have. That
obviously is not the case.

In the 2nd paragraph of the article, " Finally, poor implementation of CSS
in some popular browsers has misled authors into believing that the
incorrect behavior of those browsers is the right way to center content".

I sort of disagree with the article here. If the correct way doesn't work
(according to the standards), then the correct way is the way that gets the
behavior to work on these browsers. As the author mentions, these are
popular browsers and you want to use whatever method will work for all the
target browsers. There is nothing you can do if the browsers don't do the
"correct" behavior. Therefore, the right way to center the content is the
behavior that works (correct or incorrect).

Tom

Well, apart from the fact that you don't need (and shouldn't be using)
nested tables, you haven't specified anything to centre the inner table
(in conforming browsers). Add margin:auto; to the styles for the inner
table.

I thought my <td style="text-align:center"> was doing that. Doesn't that
say to center align whatever is inside the td tag?

Adding the margin:auto to the table that is inside the td tag did work
(tabletest6.htm). Just not sure why, yet.

According to your article text-align refers to the inline content (which I
would assume to be the table). Then I put text-align:left in the table
for the content inside that table (which does seem to work in IE - and
Mozilla after adding the margin:auto).

Also, according to the article, you can't really follow CSS guidelines as
it doesn't work for different browsers. You need to know what the hacks
are for certain browsers ( IE has bugs relating to CSS according to the
article). Then you need to know how to do another hack (that wouldn't
have been necessary if you didn't have to do the first hack) to get the
other browsers to work.

It also seems to say that the text-align refers to the text inside the
block ("text is inline content") and then later it says that block
elements are inline content (" browser treats block level elements as
inline content ").

The problem doesn't seem to be tables but the treatement of them in the
different browsers.

I am still confused on the whole margin business - but it works.

Very confusing.

Thanks,

Tom

 

[Mark Parnell]

Previously in alt.html, tshad <[email protected]> said:

[centring tables]

I thought my <td style="text-align:center"> was doing that. Doesn't that
say to center align whatever is inside the td tag?

It says to centre align _inline_ content (text, images, etc). Tables are
block-level, not inline.

According to your article text-align refers to the inline content
Correct.

(which I
would assume to be the table).

Incorrect. Tables are block-level.

Then I put text-align:left in the table for
the content inside that table (which does seem to work in IE

Because IE is broken.

- and Mozilla
after adding the margin:auto).

Because Mozilla (and Opera, and Konqueror/Safari, and just about
anything but IE) follows the standards.

Also, according to the article, you can't really follow CSS guidelines as it
doesn't work for different browsers. You need to know what the hacks are
for certain browsers

Yep. :-(

( IE has bugs relating to CSS according to the
article).

That's an understatement.

Then you need to know how to do another hack (that wouldn't have
been necessary if you didn't have to do the first hack) to get the other
browsers to work.

Unfortunately, CSS support for simple things is sometimes lacking.
Still, it's not exactly a complicated hack.

It also seems to say that the text-align refers to the text inside the block
("text is inline content")
Yes.

and then later it says that block elements are
inline content (" browser treats block level elements as inline content ").

No - it says that IE *treats* block level elements as inline. This is
what causes the problem. It _shouldn't_ be treating them as inline, but
it does.

The problem doesn't seem to be tables but the treatement of them in the
different browsers.

Indeed. But your unnecessary use of several levels of nested tables
complicates the issue.

 

[Mark Parnell]

I don't know whether browsers such as Mozilla and Netscape are doing it
right or IE is (maybe neither),

Read the specs. They are quite clear in this case.
http://www.w3.org/TR/CSS2/text.html#alignment-prop

but I thought that styles and CSS were
supposed to fix the compatability problems that we used to have. That
obviously is not the case.

No, CSS was developed in order to get all the presentational crud out of
HTML, and into a separate language, where it belongs.

In the 2nd paragraph of the article, " Finally, poor implementation of CSS
in some popular browsers has misled authors into believing that the
incorrect behavior of those browsers is the right way to center content".

I sort of disagree with the article here.

That depends on your definition of the "right" way. The *best* way might
be the one that works, but technically the *right* way or the *correct*
way is the one defined in the specs. Incidentally, Microsoft were very
involved in the development of those same specs. Hopefully they will
actually decide to support them properly in IE7.

 

[tshad]

Previously in alt.html, tshad <[email protected]> said:

[centring tables]

I thought my <td style="text-align:center"> was doing that. Doesn't that
say to center align whatever is inside the td tag?

It says to centre align _inline_ content (text, images, etc). Tables are
block-level, not inline.

According to your article text-align refers to the inline content
Correct.

(which I
would assume to be the table).

Incorrect. Tables are block-level.

Then I put text-align:left in the table for
the content inside that table (which does seem to work in IE

Because IE is broken.

- and Mozilla
after adding the margin:auto).

Because Mozilla (and Opera, and Konqueror/Safari, and just about
anything but IE) follows the standards.

Also, according to the article, you can't really follow CSS guidelines as
it
doesn't work for different browsers. You need to know what the hacks are
for certain browsers

Yep. :-(

( IE has bugs relating to CSS according to the
article).

That's an understatement.

Then you need to know how to do another hack (that wouldn't have
been necessary if you didn't have to do the first hack) to get the other
browsers to work.

Unfortunately, CSS support for simple things is sometimes lacking.
Still, it's not exactly a complicated hack.

It also seems to say that the text-align refers to the text inside the
block
("text is inline content")
Yes.

and then later it says that block elements are
inline content (" browser treats block level elements as inline content
").

No - it says that IE *treats* block level elements as inline. This is
what causes the problem. It _shouldn't_ be treating them as inline, but
it does.

The problem doesn't seem to be tables but the treatement of them in the
different browsers.

Indeed. But your unnecessary use of several levels of nested tables
complicates the issue.

Actually I don't have much choice as this particular page (which I stripped
down to show the problem) is really nested Datagrids inside a DataList.
Both are tables that asp.net creates.

Tom

 

[Mark Parnell]

Actually I don't have much choice as this particular page (which I stripped
down to show the problem) is really nested Datagrids inside a DataList.

I have no idea what either of those are - they have no meaning in HTML.

Both

Meaning all 5?

are tables that asp.net creates.

Then asp.net is also broken. Or more likely, not configured correctly. A
good workman doesn't blame his tools. ;-)

Anyway, it's your page, and I haven't seen the original. Maybe it does
actually contain tabular data within tabular data (within tabular data
within tabular data within tabular data).