SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Member opalcomp's Avatar
    Join Date
    Jun 2005
    Location
    Queens, NY
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Strange table alignment cascade

    Hello, all. Has anyone seen with IE 6 (not FireFox) that all the sub-tables and <td> tags suddenly take the alignment of a higher (containing) table? I have not pinned down the cause of this, but my CSS file does not contain left/right alignment that I can see, and when I have alignment in a <TD> (that is, something like align="center"), then other <TD>s in tables that are contained in the original <TD> also align the same way. This has never happened until a few days ago. Any idea what can cause this? We are talking about traditional attributes (align="left, right or center"), as far as I can see!

    Thanks.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You'll have to giver an example where this is happening as I have just tested firefox and only the cell with the attribute becones aligned.

    Have you specified something like this in your css.
    Code:
    table {text-align:center}
    As that will center the content in the cells.

  3. #3
    SitePoint Member opalcomp's Avatar
    Join Date
    Jun 2005
    Location
    Queens, NY
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Example provided

    Hi, thanks for the reply, I should have known to include an example. Well, I created a page WITHOUT the fixes I needed to apply. Here is the link:

    http://www.hirgny.com/index.cfm?msg=...l_example&id=1

    There is only one CSS file used in it, and that .css file has no references to horizontal alignment (only to vertical alignment). The behavior seems to be that if a containing <TD> tag has align="center", then <TD> tags in tables inside the outer <TD> tag also default to align="center". That is what my example shows for the URL and the Main Phone fields. This only happens with IE 6, not with FireFox (perhaps I was not clear previously). And I could swear this never used to happen with IE either.

    I also attached the main.css file for completeness, but renamed it to main.txt because the forum does not accept uploads of files with a .css extension.
    Attached Files Attached Files

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    It seems that IE will align the content of the td centrally when a nested table is enlosed in a parent td tag that has align="center" applied to it. It will do this when in standards mode with a full doctype. However in quirks mode it will behave the same as firefox and not centralise the td content.

    The solution would seem to be just to add some css to counteract this effect.
    Code:
    table{text-align:left}
    Hope that helps.

  5. #5
    SitePoint Member opalcomp's Avatar
    Join Date
    Jun 2005
    Location
    Queens, NY
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Starting at the end of your comment: I did try adding some CSS, but then ALL tables are affected. I would need to create CSS classes for left, center, and right align and apply them. It could work, if I use the classes everywhere just like I would otherwise use align="whatever". The reason classes are needed is that, as you probably know, align="center" (or left or right) does not have any affect when there is a stylesheet format that applies.

    I am curious about your reference to "full doctype", standards mode, and quirks mode. Is there a place these are explained. Is "quirks mode" just a humorous reference to bugs in IE?

    TIA,

    David

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Is "quirks mode" just a humorous reference to bugs in IE?
    lol - No it actually forms an important part of website design and has to do with doctype switching so that standards mode is implemented when a full doctype is used.

    Quirks mode is how the browser renders documents to support legacy behaviour. However it is aptly named quirks mode because browsers implemented all sorts of quirks and tricks in the old days and browsers like ie would guess at what you wanted even if you didn't say it properly.

    IE6 will render in quirks mode (and use the broken box model) when there is no doctype or when there ia a partial doctype or a doctype it doesn't understand. It will also assume quirksmode if there are comment tags above the doctype. (Even the xml prologue triggers ie6 into quirks mode).

    IE5 and 5.5. run in quirks mode all the time no matter what doctype is used. Other browsers have various implementations of quirks mode but ie is the one with the biggest differences.

    It could work, if I use the classes everywhere
    Why would you need them everywhere? I just used the above format which resets the td to left align. You only therefore need to define those elements which you want to be centred or left aligned and you have done that already.

    You could add a class to the table in question and just target that table if you wanted. You wouldn't need to add it to all the td.

    Avoid using html attributes such as align and use classes instead anyway.(align is deprecated in xhtml strict anyway and is a presentational attribute that is better suited to css).

  7. #7
    SitePoint Member opalcomp's Avatar
    Join Date
    Jun 2005
    Location
    Queens, NY
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Helpful information you provided

    Terrific. I am much more a programmer than an HTML (and definitely not a CSS) expert, so I really appreciate your hooks into what seems a significant set of information.

    I do intend to follow the current and future, unfolding standards, but it seems a long winding road to get there in daily practice, due to the changes in thinking and knowledge that are needed. I need to devote more time to it, and perhaps read this forum on a regular basis.

    I did see another discussion in this forum where it appears that tables vs CSS (for positioning) is still a debate among experts. I have personally heard lecturers say that tables are almost dead, but I had my doubts.

    From what I have seen, use of tables is still desirable in many situations even for overall layout, but for the rest it seems clear to me that CSS is the way to go.

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    From what I have seen, use of tables is still desirable in many situations even for overall layout, but for the rest it seems clear to me that CSS is the way to go
    I haven't use a table for a couple of years now (except for tabular data) and I've done hundreds of sites (well quite a few anyway ).

    I don't know what the fuss is really as css is so much easier and cleaner too use. I couldn't imagine going back to tables now

  9. #9
    SitePoint Member opalcomp's Avatar
    Join Date
    Jun 2005
    Location
    Queens, NY
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    OK, worth a look

    Well, could you provide an example of a site you did using CSS for layout in a situation where "someone like me" would try using a table? I will study it and am certainly open to improving on what I do. But do you agree that some people still want to use tables for layout? I guess, ill-informed...

    BTW, I just did a test for my own delight and edification: I created two different links, one with the DOCTYPE I have been using, the other with a broken tag with an "x" stuck in the middle of the DOCTYPE. And of course, you are right, the behavior changes. I never heard of quirk mode, but obviously it is true.

    QUIRKS:
    http://www.hirgny.com/index_nodoctyp...l_example&id=1

    STANDARDS:
    http://www.hirgny.com/index.cfm?pg=o...l_example&id=1

    Probably in the past I had a missing or non-standard DOCTYPE (each document was typed in from scratch), but now since I am using a handler model (index.cfm) for this Web site and since that file was created by DreamWeaver and has a full DOCTYPE, all the site pages get the same DOCTYPE from that handler page.

    Over, and out.
    David Alexander
    Opal Computing
    (718) 343-4054
    Quality and Innovation Since 1986

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Well, could you provide an example of a site you did using CSS for layout in a situation where "someone like me" would try using a table?
    Have a look at the three column sticky thread and the random (very) demo examples in my sig.

    But do you agree that some people still want to use tables for layout
    That's fine by me Some people don't want to use electricty which is fine by me also

    Table layouts can be good and if coded correctly can be accessible and in some cases the layout may suit a table better. People tend to stick with what they know and are reluctant to change if it involves a steep learning curve. However everything changes and we should try and keep up with the times as best as we can

    When first learning css a hybrid basic table styled with css is fine until the finer points of css can be realised. CSS implementation by certain browsers is far from perfect and has more than its fair share of problems to overcome but good browsers such as Firefox can do almost anything that a table can and much more besides.


Bookmarks

Posting Permissions

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