/    Sign up×
Community /Pin to ProfileBookmark

[RESOLVED] IE Cutting off top of image, moving underneath

Copy linkTweet thisAlerts:
Apr 11.2007

It always helps to see what I’m talking about, so here’s the screenshots I took:

[img]http://img84.imageshack.us/img84/5759/comparezp3.gif[/img]

And here’s my CSS:

[CODE]padding-top: 0px;
background: url(../images/nav_bg.png) top center;
height: 30px;
margin-top: 0px;
float: right;
margin-right: 20px;
font-size: 14px;[/CODE]

Now, as you can see, IE is clearly cutting the top of my background image, (about 2px) and moving it underneath.

If anybody has any tips on how to fix this, let me know. IE is a pain in the ass…nothing ever works the way you want at first…

Thanks,

-h3r0

to post a comment
CSS

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@h3r0authorApr 11.2007 — Update: It's also doing that with another div...is this some IE bug I've been so unaware of for a long time? rofl...now I feel stupid ?!
Copy linkTweet thisAlerts:
@CentauriApr 11.2007 — Would need to see the rest of the code, but I would suggest IE is expanding the height beyond was is set, and allowing the background to repeat a bit. This is a commeon problem with IE, and the fix is to make sure the contents are not higher than the container height.

Cheers

Graeme
Copy linkTweet thisAlerts:
@h3r0authorApr 11.2007 — Well all the images (the only thing contained in the div) are all 30px, and that's what I have the div's height set to...

I uploaded what I have so far, its pretty much just a start. [url=http://www.rossonline.us/up/]clicky...[/url]

-Ross
Copy linkTweet thisAlerts:
@CentauriApr 11.2007 — Ok, now I have the full picture..

IE, by default, aligns graphics with the baseline of text, whether there is text present or not. As text has decenders below the baseline, there will normally be a gap below IE images unless they are set to display as block or have their vertical-align set to the bottom. In your case, the latter does the trick. [CODE]img {
border: 0;
[COLOR="Red"]vertical-align: bottom;[/COLOR]
}
[/CODE]

Just another reason why it is better to have all presentation graphics as backgrounds.

Cheers

Graeme
Copy linkTweet thisAlerts:
@h3r0authorApr 12.2007 — Thank you so much!!! I totally blanked on that, and it fixed all the problems I was having besides IE (well, except for transparent PNGs, but that's another rant I have against Microsoft...).

Kudos!
×

Success!

Help @h3r0 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 6.16,
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: @nearjob,
tipped: article
amount: 1000 SATS,

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

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...