Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    Regular Coder
    Join Date
    Nov 2002
    Posts
    672
    Thanks
    1
    Thanked 1 Time in 1 Post

    CSS Table positioning

    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?

  • #2
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Hi Tails,

    I ran into the same problem. I gave margins to the table...
    Code:
    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>...
    Code:
    <div class="iecenter">
    <table>
    ...
    </table>
    </div>
    
    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...

    Rich

  • #3
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    IE messup

    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!
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #4
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    thanks
    Doesn't that pretty much describe coding for the web-- get it right and then get the workaround for IE?

  • #5
    Regular Coder
    Join Date
    Nov 2002
    Posts
    672
    Thanks
    1
    Thanked 1 Time in 1 Post
    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/...n/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?

  • #6
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    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:
    Code:
    img {display:block; border:0px}
    That should do the trick.

    -Rich

  • #7
    Regular Coder
    Join Date
    Nov 2002
    Posts
    672
    Thanks
    1
    Thanked 1 Time in 1 Post
    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?

  • #8
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Hmmm... not too sure, you'd have to ask one of the experts here . Glad I could help!

  • #9
    Master Coder
    Join Date
    Feb 2003
    Location
    Umeå, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    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:
    - 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.
    Last edited by liorean; 01-27-2004 at 09:27 PM.
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #10
    Regular Coder
    Join Date
    Nov 2002
    Posts
    672
    Thanks
    1
    Thanked 1 Time in 1 Post
    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.
    Last edited by Tails; 01-28-2004 at 02:07 AM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •