SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Zealot Fruit & Veg's Avatar
    Join Date
    May 2000
    Location
    UK
    Posts
    114
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    <p></p> - XHTML Playing Up in IE6

    I'm trying to make my pages XHTML valid, but adding a closing </p> tag after every <p> adds extra space that I don't want in IE6.

    Firebird displays it correctly.

    Any ideas?

    Also, while I'm here. WebTrends Code and JS stuff brings up errors in the W3 validator - any idea how to get rid of this too?

    I'm on a coding mission!!
    USBtastic - UK Gadgets Blog
    SmartGeezer - UK Men's Clothing Blog
    Individualitee - Great Tshirts
    Shiola - Complete Waste of Time

  2. #2
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,350
    Mentioned
    63 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by Fruit & Veg
    adding a closing </p> tag after every <p> adds extra space that I don't want in IE6.
    you can adjust paragraph spacing using either padding or margin in css

    can we see the page where this "extra" space is added by the </p> that isn't there between unclosed paragraphs?

    rudy
    http://rudy.ca/

  3. #3
    SitePoint Addict flyingpylon's Avatar
    Join Date
    Mar 2002
    Location
    Fishers, IN USA
    Posts
    256
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Depending on the "extra space" you're talking about (is it vertical space? horizontal?) there is one thing you might want to check: line breaks.

    Sometimes if your code ends up being

    <p>some text
    </p>

    instead of

    <p>some text</p>

    that can cause problems.

  4. #4
    SitePoint Zealot Fruit & Veg's Avatar
    Join Date
    May 2000
    Location
    UK
    Posts
    114
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's a test page showing an example - http://www.shiola.co.uk/test.shtml

    The top paragraph has the closing </p> tag, the bottom doesn't. Notice the difference in Vertical space between the bottom of the text and the blue line.

    No line breaks.

    Also noticed that this page doesn't display the coloured scroll bars specified in the style sheet. I've changed the reference to <link rel="stylesheet" type="text/css" href="default.css" /> but even <link rel="stylesheet" type="text/css" href="default.css"> doesn't work either. The strange thing is that the text is folowing the style sheet - does XHTML not do scroll bars? (eg. scrollbar-face-color:#3366cc: )

    Thanks for your help.
    USBtastic - UK Gadgets Blog
    SmartGeezer - UK Men's Clothing Blog
    Individualitee - Great Tshirts
    Shiola - Complete Waste of Time

  5. #5
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,350
    Mentioned
    63 Post(s)
    Tagged
    3 Thread(s)
    fruit & veg, as far as xhtml goes, you will have to accept the fact that in order for your page to be valid, you must close your tags -- not should, must

    once that's done, then you can address the spacing issue

    you can suppress top and bottom spacing, or set it to any value you wish, with css

    but css is best applied to code that is valid

    rudy

  6. #6
    SitePoint Zealot Fruit & Veg's Avatar
    Join Date
    May 2000
    Location
    UK
    Posts
    114
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah, I've no problem with that, but how?

    How do you specify the <p> tag via CSS?
    USBtastic - UK Gadgets Blog
    SmartGeezer - UK Men's Clothing Blog
    Individualitee - Great Tshirts
    Shiola - Complete Waste of Time

  7. #7
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,350
    Mentioned
    63 Post(s)
    Tagged
    3 Thread(s)
    <head>
    ...
    <style type="text/css">
    p { margin:0 }
    </style>
    ...
    </head>

  8. #8
    SitePoint Zealot Fruit & Veg's Avatar
    Join Date
    May 2000
    Location
    UK
    Posts
    114
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    r937 - that does specify the tag, but it still doesn't straighten out the vertical spacing at the bottom.

    I've added that CSS to this page - http://www.shiola.co.uk/test.shtml - but the top paragraph still has excessive space beneath the text.

    Basically, adding a </p> to close the <p> tag means that excessive space is being added, which cannot be controlled by the CSS.

    Happens in both IE and Firebird.
    USBtastic - UK Gadgets Blog
    SmartGeezer - UK Men's Clothing Blog
    Individualitee - Great Tshirts
    Shiola - Complete Waste of Time

  9. #9
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,350
    Mentioned
    63 Post(s)
    Tagged
    3 Thread(s)
    no, it's your code, man

    after the </p> you have some white space, specifically two line breaks

    that white space is displayed in the default font for its container, which is a TD, and that default font has a specific line height (which you do not set or override in the style sheet)

    then you have a hardcoded <br /> which adds another line in the default font

    all you gotta do to verify what i'm saying is change the P for that first paragraph under WOTCHA from

    <p class="body">

    to

    <p class="body"
    style="border:1px solid yellow; background-color:cyan;">

    and you will see exactly where that P starts and ends

    so the excessive space is not coming from the fact that the P is closed, it's coming from your code following the P

    sorry, but please don't shoot the messenger


  10. #10
    SitePoint Wizard Keriam's Avatar
    Join Date
    Jun 2003
    Location
    Colorado, USA
    Posts
    1,178
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Fruit & Veg
    Also noticed that this page doesn't display the coloured scroll bars specified in the style sheet. I've changed the reference to <link rel="stylesheet" type="text/css" href="default.css" /> but even <link rel="stylesheet" type="text/css" href="default.css"> doesn't work either. The strange thing is that the text is folowing the style sheet - does XHTML not do scroll bars? (eg. scrollbar-face-color:#3366cc: )
    The colored scroll bars only work in IE5.5 or later and they are also disabled in IE6 when running in standards compliant mode (which you are with that doctype declaration).

    I am not too sure, but I do not think it is even possible to put IE into quirks mode with XHMTL at all.

  11. #11
    Phil fillup07's Avatar
    Join Date
    May 2002
    Location
    Jacksonville, FL
    Posts
    1,168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I promise the spacing can be corrected with minimal CSS and the removal of other things taking up space (tables, <br />'s, etc). IE 6 displays it correctly.

  12. #12
    SitePoint Zealot Fruit & Veg's Avatar
    Join Date
    May 2000
    Location
    UK
    Posts
    114
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah, the <br /> was the culprit - how thick am I? It's all the christmas tunes playing havoc with my mind.

    The coloured scroll bars can get stuffed.

    Cheers.
    USBtastic - UK Gadgets Blog
    SmartGeezer - UK Men's Clothing Blog
    Individualitee - Great Tshirts
    Shiola - Complete Waste of Time

  13. #13
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,350
    Mentioned
    63 Post(s)
    Tagged
    3 Thread(s)
    "The coloured scroll bars can get stuffed."

    quote of the year



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
  •