container <div> adds extra vertical space

liunx

Guest
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 <!-- w --><a class="postlink" href="http://www.monsooncreative.org/redesign/">www.monsooncreative.org/redesign/</a><!-- w -->.

The CSS is at <!-- w --><a class="postlink" href="http://www.monsooncreative.org/redesign/style/monsoon.css">www.monsooncreative.org/redesign/style/monsoon.css</a><!-- w -->.

This appears to be my last remaining roadblock to making the site work, so any advice would be much appreciated.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.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.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.)

PaulTried 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?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.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?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>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.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.Didn't see this suggested soooooo..

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