/    Sign up×
Community /Pin to ProfileBookmark

div spacing

Copy linkTweet thisAlerts:
May 09.2006

If you view [URL=http://www.bythewayministries.com/index2.asp]this page[/URL], 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

to post a comment
CSS

14 Comments(s) ↴

Copy linkTweet thisAlerts:
@KDLAMay 09.2006 — Take the image out of the paragraph tag:
<i>
</i>[B]&lt;p&gt;[/B]&lt;img src="/images/home/comfy_chair_banner.gif" width="626" height="97" alt="Comfy Chair Game" title="Comfy Chair Game" /&gt;[B]&lt;/p&gt;[/B]
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
Copy linkTweet thisAlerts:
@FangMay 09.2006 — Change this:#centerCol {
float:left;
width:630px;
margin: 5px 0 0 0;
}
Copy linkTweet thisAlerts:
@jrthor2authorMay 09.2006 — I tried what you said, but that didn't do anything.
Copy linkTweet thisAlerts:
@FangMay 09.2006 — Did you replace the code?
Copy linkTweet thisAlerts:
@jrthor2authorMay 09.2006 — yes, i created a css rule for this image.
Copy linkTweet thisAlerts:
@FangMay 09.2006 — It replaces an existing div rule, not an image.
Copy linkTweet thisAlerts:
@jrthor2authorMay 10.2006 — ok, I fixed that problem, I forgot the img style for that div rule, but it still doesn't fix the gap.
Copy linkTweet thisAlerts:
@KDLAMay 10.2006 — Try adding specific margin and padding settings to these:
<i>
</i>#homeContentRightCol {
float: right;
width: 300px;
}
#homeContentRightCol img {
margin-bottom:5px;
}
Copy linkTweet thisAlerts:
@jrthor2authorMay 10.2006 — 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
Copy linkTweet thisAlerts:
@KDLAMay 10.2006 — 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? ?

KDLA
Copy linkTweet thisAlerts:
@jrthor2authorMay 10.2006 — I've tried to implement the faux columns, but was unsuccessful.
Copy linkTweet thisAlerts:
@jrthor2authorMay 17.2006 — can anyone help me get rid of this space above the banner in IE on [URL=http://www.bythewayministries.com/index2.asp]this page[/URL] ?

Thanks
Copy linkTweet thisAlerts:
@jrthor2authorMay 17.2006 — Now look at my page once I put your code in.

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

Success!

Help @jrthor2 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.30,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...