div spacing

[jrthor2]

If you view this page (http://www.bythewayministries.com/index2.asp), in IE there is a big gap above the banner image at the bottom of the page and the content. In FireFox, it displays fine. How do I get rid of this space in IE?

Thanks

[KDLA]

Take the image out of the paragraph tag:

<p><img src="/images/home/comfy_chair_banner.gif" width="626" height="97" alt="Comfy Chair Game" title="Comfy Chair Game" /></p>
You've got a line-height setting for <p> that might be causing the extra space:
p {
line-height:150%;
margin-top:0px;
margin-bottom:10px;

Also, if you add margin: 0 and padding:0 to the image, that might help, too.

KDLA

[Fang]

Change this:#centerCol {
float:left;
width:630px;
margin: 5px 0 0 0;
}

[jrthor2]

I tried what you said, but that didn't do anything.

[Fang]

Did you replace the code?

[jrthor2]

yes, i created a css rule for this image.

[Fang]

It replaces an existing div rule, not an image.

[jrthor2]

ok, I fixed that problem, I forgot the img style for that div rule, but it still doesn't fix the gap.

[KDLA]

Try adding specific margin and padding settings to these:

#homeContentRightCol {
float: right;
width: 300px;
}
#homeContentRightCol img {
margin-bottom:5px;
}

[jrthor2]

I just added some specific margin/padding, but that didn't help. For some reason, if I change the height of the leftCol to a smaller height, it will fix, but I want a defined height of 600px for the leftcol.

Thanks

[KDLA]

It's been my experience that IE tends to add about 4px to anything - whether you specify something or not. Also, Fx and IE interpret margin/padding differently.

Why do you need the specific height? Is it to keep the gray background 100% of the height?
What you could do is create a container div for the page with an image as the background. The image would be the width of the nav area in gray.
See http://www.alistapart.com/articles/fauxcolumns/ for more info.

This technique would preclude the necessity of the height setting for the lh nav.
Make sense? :D
KDLA

[jrthor2]

I've tried to implement the faux columns, but was unsuccessful.

[jrthor2]

can anyone help me get rid of this space above the banner in IE on this page (http://www.bythewayministries.com/index2.asp) ?

Thanks

[Fang]

http://www.webdeveloper.com/forum/showpost.php?p=565885&postcount=3

[jrthor2]

Now look at my page once I put your code in.

UPDATE: I got it working, thanks!!!!