www.webdeveloper.com
Results 1 to 11 of 11

Thread: container <div> adds extra vertical space

  1. #1
    Join Date
    Mar 2003
    Posts
    4

    container <div> adds extra vertical space

    I'm redesigning my web site using valid XHTML and CSS for layout -- it's my first attempt to do so -- and I'm bumping into a small problem.

    The site appears to display properly on IE5/Mac and IE5.5/PC (I haven't had the opportunity to test it on other browsers & platforms yet), though IE5.5/PC has one small problem:

    At the bottom of the container <div> it displays an extra 3-5 pixels of empty space.

    You can see this at www.monsooncreative.org/redesign/.

    The CSS is at http://www.monsooncreative.org/redes...e/monsoon.css.

    This appears to be my last remaining roadblock to making the site work, so any advice would be much appreciated.

  2. #2
    Join Date
    Dec 2002
    Location
    Lake Havasu City, Arizona
    Posts
    527

    Re: container <div> adds extra vertical space

    Originally posted by monsoon
    The site appears to display properly on IE5/Mac and IE5.5/PC (I haven't had the opportunity to test it on other browsers & platforms yet), though IE5.5/PC has one small problem:

    At the bottom of the container <div> it displays an extra 3-5 pixels of empty space.
    Try removing the </P> tag. Opening a new <P> tag does close the previous one.
    Legal or not is another question that might be pointed out.
    Last edited by jdavia; 03-16-2003 at 03:09 PM.

  3. #3
    Join Date
    Mar 2003
    Posts
    4
    Thanks, but that didn't work -- besides, I'm a stickler for closing tags, so even if it did, I'd have to find a better fix.

    Any other ideas? I'm stumped.

  4. #4
    Join Date
    Nov 2002
    Location
    Hampshire, England
    Posts
    42
    Hi,

    Try putting a style="display:block" in the last image tag.

    (If its the space under the final image that you're talking about.)

    Paul

  5. #5
    Join Date
    Mar 2003
    Posts
    4
    Tried that...it doesn't seem to make any visible difference. And yes, that's the space I'm talking about. I can't figure out why it adds the space on the PC and not on the Mac.

    Any other ideas?

  6. #6
    Join Date
    Dec 2002
    Location
    Lake Havasu City, Arizona
    Posts
    527

    Re: container <div> adds extra vertical space

    Originally posted by monsoon
    Thanks, but that didn't work -- besides, I'm a stickler for closing tags, so even
    if it did, I'd have to find a better fix.
    Do what you want to, but the </P> is an optional tag,.
    The rule is even though the </P> exists, it isn't always used. Why! because of the space it creates. Even worse the space will be more if you have a H tag with it.
    I would suggest using <font size> instead and eliminate the </P> tag. Why! because opening a new <P> tag automatically closes the former one.

  7. #7
    Join Date
    Mar 2003
    Posts
    4
    Thanks for the tip, but to me that's just sloppy code, and I prefer to write it cleaner than that.

    I'm still lost on why this is expanding the container by a few extra pixels, and I'm not convinced it's because of a closed paragraph tag.

    Any ideas, anyone?

  8. #8
    Join Date
    Dec 2002
    Location
    Lake Havasu City, Arizona
    Posts
    527
    One last try. I can't see your style sheet, I get a can't find. This worked for me in IE and NS4.7
    <BODY MARGINHEIGHT=0 MARGINWIDTH=0 BOTTOMMARGIN=0 TOPMARGIN=0>
    Last edited by jdavia; 03-17-2003 at 12:51 AM.

  9. #9
    Join Date
    Jan 2003
    Location
    Atlanta, GA
    Posts
    571

    Re: Re: container <div> adds extra vertical space

    Originally posted by jdavia
    I would suggest using <font size> instead and eliminate the </P> tag.
    </p> is required in XHTML
    <font> tag is deprecated.

    <BODY MARGINHEIGHT=0 MARGINWIDTH=0 BOTTOMMARGIN=0 TOPMARGIN=0>
    Again, invalid attributes. body {margin: 0} works just fine!

    Try using style="margin-bottom: 0px;" for the offending <div> or <p>. I dont know if it will help.

  10. #10
    Join Date
    Dec 2002
    Location
    Lake Havasu City, Arizona
    Posts
    527

    Re: Re: Re: container <div> adds extra vertical space

    Originally posted by nkaisare
    </p> is required in XHTML
    <font> tag is deprecated.
    Again, invalid attributes. body {margin: 0} works just fine!
    Try using style="margin-bottom: 0px;" for the offending <div> or <p>. I dont know if it will help.
    DEFINiTION
    The <p> tag defines a paragraph.
    DEPRECIATED (reference to font tag)
    A deprecated element or attribute is one that has been outdated.
    Deprecated elements may become obsolete in the future, but browsers should continue to support deprecated elements for backward compatibility.

    OBSOLUTE
    Obsolete elements and attributes have no guarantee of browser-support and they are no longer defined in the W3C specification.

    Differences Between HTML and XHTML (reference to P tag in XTML)

    All "presentation attributes" of the p element were deprecated in HTML 4.01.

    All "presentation attributes" of the p element are not supported in XHTML 1.0 Strict DTD.

  11. #11
    Join Date
    Mar 2003
    Posts
    32
    Didn't see this suggested soooooo..

    I fixed it with font-size: 11px; added to the proper css tag.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles