Table tag refuses to obey the CSS text-align property in non-compatibility mode in Internet Explorer

  • Thread starter Thread starter Nathan Sokalski
  • Start date Start date
N

Nathan Sokalski

I have several locations on my site that have tables inside elements such as
divs that specify the text-align:center; CSS property. When IE8 is not in
compatibility mode, this is ignored by tables that are children of the tag
the property is specified in. I have only noticed this with table tags.
Here is a simple page I have written to demonstrate this:

<html xmlns="http://www.w3.org/1999/xhtml">
<head><title></title></head>
<body>
<div style="text-align:center;">
<table><tr><td>Table</td></tr></table>
</div>
</body>
</html>

When you run this in IE8, be sure to try viewing it in compatibility and
non-compatibility mode. Correct me if I'm wrong, but I believe that when
following standards, text-align:center; should center any children. If IE6,
IE7, and IE8 Compatibility Mode follow this simple standard, why would
Microsoft not follow the standard in IE8's non-compatibility mode? Is this a
bug, is there some reason I don't know of, or is there really something
wrong with my code? Thanks.
 
Understanding !Doctype - http://www.google.com/search?q=understanding
doctype

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

<div id="divPageWrapper">
<!--[if lt IE 6]>
<center>
<![endif]-->
<div id="divTop1000"></div>
<div id="divContent">
<table id="tabContent" style="text-align:left">
<tr>
<td align="right" style="text-align:left">
...... etc..


vs'

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

Confused? Validate your markup to your chosen DTD. Choose a DTD that will
accommodate the majority of your site visitors.

HTML and CSS are not programming languages. They are not compiled before
they are served up to a browser and so the standards are subject to
interpretation.

No seriously.... Unless you include a DTD with your examples they are
useless. See Quirksmode.org

Regards.
 
I guess I've been developing web for so long that I didn't even bother to
copy that part to my post (but I did include it in my page when I tested,
honest). I used the Transitional in my code. I hesitate to use the Strict
because for the most part, my pages are generated with ASP.NET, which still
generates some html that Strict might not like. Do you think Strict would
make a difference with the text-align/table situation? Thanks.
--
Nathan Sokalski
(e-mail address removed)
http://www.nathansokalski.com/

rob^_^ said:
Understanding !Doctype - http://www.google.com/search?q=understanding
doctype

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

<div id="divPageWrapper">
<!--[if lt IE 6]>
<center>
<![endif]-->
<div id="divTop1000"></div>
<div id="divContent">
<table id="tabContent" style="text-align:left">
<tr>
<td align="right" style="text-align:left">
...... etc..


vs'

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

Confused? Validate your markup to your chosen DTD. Choose a DTD that will
accommodate the majority of your site visitors.

HTML and CSS are not programming languages. They are not compiled before
they are served up to a browser and so the standards are subject to
interpretation.

No seriously.... Unless you include a DTD with your examples they are
useless. See Quirksmode.org

Regards.
Click to expand...
 
Developer-specific resources include:

MSDN IE Development Forum (post such questions here instead)
http://social.msdn.microsoft.com/Forums/en-US/iewebdevelopment/threads

IE Developer Center
http://msdn.microsoft.com/en-us/ie/default.aspx

Learn IE8
http://msdn.microsoft.com/en-us/ie/aa740473.aspx

HTML and DHTML Overviews and Tutorials
http://msdn.microsoft.com/en-us/library/ms537623.aspx and

Cascading Style Sheets (CSS)
http://msdn2.microsoft.com/en-us/ie/aa740476.aspx

Expression Web SuperPreview for Internet Explorer (free, stand-alone visual
debugging tool for IE6, IE7, and IE8)
http://www.microsoft.com/downloads/...FamilyID=8e6ac106-525d-45d0-84db-dccff3fae677

Expression Web SuperPreview Release Notes
http://www.microsoft.com/expression/products/Web_SuperPreviewReleaseNotes.aspx

Validators:
http://validator.w3.org/
http://jigsaw.w3.org/css-validator/
 
Hi Nathan,

I am pulling your chain (a bit). The snippets that I supplied are from one
of my own asp.net master pages that I have developed and tested to be
browser agnostic. What it doesn't show you are the external stylesheets that
I use and the style rules for the block elements and the complexity of
trying to make things work in all browsers. (including IE7)

As you can see it is a mixture of depreciated attributes, conditional
comments, style rules and a transitional DTD to get it to work (as expected)
on all browsers. What I am trying to get across is that regardless of the
'standards', to code for the wild, you end up using rules and other
workarounds to "make it work".

"When IE8 is not in Compatibility mode" can mean two things, IE8 is using
either the Quirks or IE8 Standards rendering (browser) mode, so yes
including your DTD in your samples is important. You will find that
switching the IE8 browser mode is not exactly the same as running your pages
in the native ie versions.

Anyway..... the end game is that MS has closed down feedback for IE8 at
connect and are not taking any more issue reports or feature requests. I
haven't checked if this issue has been reported before but they also have a
test suite of css rules at http://samples.msdn.microsoft.com/ietestcenter .

I suppose the end game now is that there may still be outstanding issues
with IE8, but there is nothing we can do (at this time) to get it changed or
corrected. Developers (us) will just have to live with it and use
workarounds to 'make it work' as expected.

Regards.

Nathan Sokalski said:
I guess I've been developing web for so long that I didn't even bother to
copy that part to my post (but I did include it in my page when I tested,
honest). I used the Transitional in my code. I hesitate to use the Strict
because for the most part, my pages are generated with ASP.NET, which
still generates some html that Strict might not like. Do you think Strict
would make a difference with the text-align/table situation? Thanks.
--
Nathan Sokalski
(e-mail address removed)
http://www.nathansokalski.com/

rob^_^ said:
Understanding !Doctype - http://www.google.com/search?q=understanding
doctype

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

<div id="divPageWrapper">
<!--[if lt IE 6]>
<center>
<![endif]-->
<div id="divTop1000"></div>
<div id="divContent">
<table id="tabContent" style="text-align:left">
<tr>
<td align="right" style="text-align:left">
...... etc..


vs'

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

Confused? Validate your markup to your chosen DTD. Choose a DTD that will
accommodate the majority of your site visitors.

HTML and CSS are not programming languages. They are not compiled before
they are served up to a browser and so the standards are subject to
interpretation.

No seriously.... Unless you include a DTD with your examples they are
useless. See Quirksmode.org

Regards.

Nathan Sokalski said:
I have several locations on my site that have tables inside elements
such as divs that specify the text-align:center; CSS property. When IE8
is not in compatibility mode, this is ignored by tables that are
children of the tag the property is specified in. I have only noticed
this with table tags. Here is a simple page I have written to
demonstrate this:

<html xmlns="http://www.w3.org/1999/xhtml">
<head><title></title></head>
<body>
<div style="text-align:center;">
<table><tr><td>Table</td></tr></table>
</div>
</body>
</html>

When you run this in IE8, be sure to try viewing it in compatibility and
non-compatibility mode. Correct me if I'm wrong, but I believe that when
following standards, text-align:center; should center any children. If
IE6, IE7, and IE8 Compatibility Mode follow this simple standard, why
would Microsoft not follow the standard in IE8's non-compatibility mode?
Is this a bug, is there some reason I don't know of, or is there really
something wrong with my code? Thanks.
Click to expand...
Click to expand...
Click to expand...
 
Back
Top