SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    Don't eat yellow snow spaceman's Avatar
    Join Date
    Mar 2001
    Location
    Melbourne, Australia
    Posts
    1,039
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    XHTML blues: N6.2 puts whitespace in my table. Can anyone advise?

    Here's my test page (very small amount of code):

    http://www.itomic.com/test/box.html

    Looks great in IE6, but the table has unexpected gaps (whitespace) in N6.2.

    This page is XHTML (transitional) compliant, so it annoys the $#!@ out of me that the major browsers can't even render XHTML correctly.

    I really want to believe in XHTML as being the 'last chance' for fully cross-browser compatible web sites, but if the major browsers aren't consistent, what's the point?
    Web Design Perth Melbourne .:. Itomic Business Website Solutions
    Drupal Experts .:. Drupalise

  2. #2
    SitePoint Wizard Ian Glass's Avatar
    Join Date
    Oct 2001
    Location
    Beyond yonder
    Posts
    2,384
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Netscape's been doing that since 6.0. You can get rid of the doctype and it'll work, but removing the doctype defeats the purpose, right? Actually, it's not Netscape that's got it wrong...it's IE (surprise, surprise). That's the way the spec read, I think. Opera 6 does the same thing.

    Advice: use CSS :-)

  3. #3
    Don't eat yellow snow spaceman's Avatar
    Join Date
    Mar 2001
    Location
    Melbourne, Australia
    Posts
    1,039
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Ian, thanks for your comments.

    I'm a bit confused:

    a) I am using CSS
    b) My copy of Opera 6 renders it exactly the same way as IE 6 (ie. the way I expect/intended) - so are both Opera and IE incorrect relative to the XHTML spec???

    Perhaps with your comment 'use CSS' you meant that I should use it to achieve the raised border effect? If so, then I guess it's asking too much of CSS to achieve the completely equivalent table presentation that I'm after (ie. with rounded edges)?

    Thanks!
    Web Design Perth Melbourne .:. Itomic Business Website Solutions
    Drupal Experts .:. Drupalise

  4. #4
    Don't eat yellow snow spaceman's Avatar
    Join Date
    Mar 2001
    Location
    Melbourne, Australia
    Posts
    1,039
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    But wait... there's more.

    If I remove the DOCTYPE, then Netscape no longer repeats the background (so the main side borders disappear). The only way (it would seem) to get the side borders to re-appear for Netscape is to use the background attribute for the td tag, which is of course non-XHTML compliant.

    Now I know what a dog feels like when it chases it's tail...
    Web Design Perth Melbourne .:. Itomic Business Website Solutions
    Drupal Experts .:. Drupalise

  5. #5
    SitePoint Wizard Ian Glass's Avatar
    Join Date
    Oct 2001
    Location
    Beyond yonder
    Posts
    2,384
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry, made an a-- out of myself. I looked at your page in Opera and it worked. I made and assumption because I'm using Opera right now and SitePoint renders with mysterious gaps involving the rounded corner layout used here... Well, you know what happens when you assume.

    I ran into this same problem right after NS6 originally came out. I decided to scrap the rounded corners.

    Now I know what a dog feels like when it chases it's tail...
    All too true :-)

    My suggestion is to use HTML 4.01 for rounded tables. Sorry. :-( Although, you can use CSS to create rounded table effect with positioning, which is a pain, or with backgrounds on table cells, but I don't think that'll get rid of the gaps.

    ~~Wish I Could Be More Helpful

  6. #6
    Don't eat yellow snow spaceman's Avatar
    Join Date
    Mar 2001
    Location
    Melbourne, Australia
    Posts
    1,039
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks again Ian. I think I'll just drop the background image idea completely for now. I'm a programmer first, and a designer second (actually, a distant second), but I do like to dabble a bit every so often to see what can be achieved in a cross-browser compatible way. If I find a technique that works, I'll 'modularise' it (in a PHP function) for later use.

    As I mentioned earlier, it just concerns me that XHTML will have a really hard time being widely adopted if designers continuely find their creative wings being clipped with a move from HTML 4.01 to XHTML transitional.
    Web Design Perth Melbourne .:. Itomic Business Website Solutions
    Drupal Experts .:. Drupalise

  7. #7
    SitePoint Wizard Ian Glass's Avatar
    Join Date
    Oct 2001
    Location
    Beyond yonder
    Posts
    2,384
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think/hope/prey those concerns will be alleviated with a little more cooperation from browsers makers to support standards (please!). In the mean time, HTML 4.01 is still a viable standard and provides the majority of the functionality that XHTML offers.

    A transition to pure XHTML and CSS will require new innovative ways of doing things. So, if you want to use tables to create rounded corners, I'd suggest you use HTML 4.01 strict, unless, of course, you have a lot of time and energy on your hands to think outside the table. :-)

    If you want some good design idea's for CSS layouts and standards, you can check out Opera's site, witch, I think, has done a great job merging standards support and old school design tactics. While you're there, you may want to download version 6, it's excellent! I think I've fallen in love with the browser...

  8. #8
    No. Phil.Roberts's Avatar
    Join Date
    May 2001
    Location
    Nottingham, UK
    Posts
    1,142
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That particular problem has been doing the rounds of the Mozilla bug tracker for quite some time now. And according to their developers is actually perfectly inline with the W3C specs on CSS box-model rendering.


    One way around it is to put this in your stylesheet:

    img { display:block; }

    Which may fix it, or not.....
    THE INSTRUCTIONS BELOW ARE OLD AND MAY BE INACCURATE.
    THIS INSTALL METHOD IS NOT RECOMMENDED, IT MAY RUN
    OVER YOUR DOG. <-- MediaWiki installation guide

  9. #9
    Prolific Blogger silver trophy Technosailor's Avatar
    Join Date
    Jun 2001
    Location
    Before These Crowded Streets
    Posts
    9,446
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Don't you have to include table attributes like spacing and padding in CSS? Would that make any difference, I wonder.

    Sketch
    Aaron Brazell
    Technosailor



  10. #10
    Don't eat yellow snow spaceman's Avatar
    Join Date
    Mar 2001
    Location
    Melbourne, Australia
    Posts
    1,039
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by Phil.Roberts
    One way around it is to put this in your stylesheet:

    img { display:block; }

    Which may fix it, or not.....
    Hey - this works! Nice one. Can you point me to a page that explains what's going on here in a friendly way? This reference doesn't tell me much:

    http://www.htmlhelp.com/reference/cs...n/display.html
    Web Design Perth Melbourne .:. Itomic Business Website Solutions
    Drupal Experts .:. Drupalise

  11. #11
    No. Phil.Roberts's Avatar
    Join Date
    May 2001
    Location
    Nottingham, UK
    Posts
    1,142
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    http://bugzilla.mozilla.org/show_bug.cgi?id=22274

    This is probably the biggest discussion of this particular problem.....
    THE INSTRUCTIONS BELOW ARE OLD AND MAY BE INACCURATE.
    THIS INSTALL METHOD IS NOT RECOMMENDED, IT MAY RUN
    OVER YOUR DOG. <-- MediaWiki installation guide


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
  •