View Full Version : CSS Table positioning

01-25-2004, 10:08 PM
Upon converting my pages to XHTML 1.0 strict, I've come across a problem (possibly a flaw or limitation?). align="center" works for tables in HTML 4.01. style="text-align:center" does not work. I put a div and had that style and it worked in IE but not Mozilla. Is there a way? or am I stuck with absolute positioning and using &nbsp for specific resolutions?

01-25-2004, 10:21 PM
Hi Tails,

I ran into the same problem. I gave margins to the table...
table {margin:0px auto; text-align:left} which centers it in Mozilla (0px margin top and bottom and auto margins left and right), and then threw in an extra <div>...

<div class="iecenter">

and in the css:

.iecenter {text-align:center} which centers the table in IE.

The "text-align:left" is in the table css because if it wasn't, the table would align the text in the center due to the extra <div>.

Hope that all makes sense... :)


01-26-2004, 09:33 AM
The text-align property is meant for inline elements only, so not for divs; Mozilla gets it right, IE doesn't (what else is new).

The right way to center a block level element is by explicitly setting its width, and giving left and right margin the value "auto".
Rich gave the correct solution and the IE workaround: nice!

01-26-2004, 10:26 AM
thanks :D
Doesn't that pretty much describe coding for the web-- get it right and then get the workaround for IE? ;)

01-27-2004, 05:42 AM
applying text-align:center to a div centers everything inside the div, and not the div itself. Putting a div inside a centered div works fine. I found a new problem (also related to tables, so I'll use the same topic).

In Mozilla, cellspading and cellpadding seem to mean nothing vertically. I have 4 rows with 4 cells each (4x4). with spacing and padding at 0, the images in the same row will touch. But the rows are still being spaced apart. Check http://www.techsonic.net/xfox/other/megaman/2/mm2gen.htm for an example (W3c validated as XHTML 1.0 strict and veryclean source). It works fine in IE but not Mozilla. I've done my part in maintaining the standards in the page. I don't see what could have gone wrong. The cellspacing only works for its row. I've never heard of rowspacing (though it appears to be the idea). Is there a work-around for this?

01-27-2004, 07:40 AM
That error isn't coming from the table, it's coming from the mixture of table-layout and css. The XHTML DTD adds additional white space to the bottom of images contained in table cells... try this:

img {display:block; border:0px}
That should do the trick.


01-27-2004, 03:55 PM
Thanks. It worked. I've tried using block in Internet Explorer in the past for some examples I've seen and it alwys did absolutely nothing. Are there any other changes that the XHTML dtd makes?

01-27-2004, 07:00 PM
Hmmm... not too sure, you'd have to ask one of the experts here :). Glad I could help!

01-27-2004, 08:22 PM
It's hard to keep track of all the differences in all the browsers. Ask us about a situation and we can probably tell you about it. Just off the top of my head, these are the differences between quirks and standards mode:

- Ie5m: Inheritance works for all elements.
The default value for font-size is 'medium' instead of 'small'.
- Ie5w, ie5.5w: N/A
- Ie6w changes the following: Box model is W3C compliant instead of proprietary.
The html instead of the body element repressents the canvas of the document. The body element is the first decendant of the html element, and behaves thus.
Some JavaScript properties related to presentation move from document.body to document.documentElement.
It no longer allows unitless values for numerical properties that should have a unit, nor does it support a space between the value and the unit.
It no longer allows dropping the # on colour values, and doesn't allow quoting of values that are not of string type.
Padding applies to replaced elements.
CSS1 calculations for width and height of table cells and rows.
Min-height supported on table cells and rows.
Word-spacing supported.
Margins using the value 'auto'.
List related values and properties.
White-space: pre.
Entire invalid property discarded instead of just the parts after invalidity was detected.
Class and id can't start with a digit, and are case sensitive.
Tables inherits text related properties.
Width on inline elements discarded.
- Op7: Requires values to have correct unit, no space, no quotes.
Doesn't allow classes and ids to start with a digit.
Overflow renders outside the box instead of expanding it.
Inheritance works for all elements.
Widths on inline elements discarded.
The default value for font-size is 'medium' instead of 'small'.
Case sensitive.
Correct box model.
Margins are not substracted from percentage width of content block.
- Moz: Requires the file to be served as 'text/css' in the Content-Type HTTP header.
Requires values to have correct unit, no space, no quotes.
Fonts and line heights calculation works differently.
Replaced elements in inline mode respects the vertical alignment setting.
Inline replaced elements with percentage height and width treated as auto.
Well, I don't feel like repeating it all. Have a look at <http://www.mozilla.org/docs/web-developer/quirks/quirklist.html> and <http://lxr.mozilla.org/seamonkey/source/layout/html/document/src/quirk.css>.
- Safari: Undocumented, but it should be somewhat more like moz than op7 or ie6w.

Ok, not that off the top of my head. Well, it's a nice summary, until the point I got lazy.

01-28-2004, 01:02 AM
This all looks promising. Looks like XHTML is bring browsers and behavior closer together. The changes of the # character in hex values and case sensitive ID tags were already in effect I think (if not, it was bad practice to allow it). All that's left is for some standard or 3rd party (compliant of course) javascript validator. It doesn't sound easy, if there were a new compliance badge like the W3 has for XHTML and CSS were to exist for javascript, it might kick things in the right direction for future web development and awareness. :thumbsup: