/    Sign up×
Community /Pin to ProfileBookmark

Problems with images and IE

Copy linkTweet thisAlerts:
Nov 16.2006

?
I seem to be having problems with images in IE (at least with IE 6 … haven’t checked v7 yet). I have a simple site with a few images and a flash object. The problem I’m having is some extra space IE seems to be included where my images should be. At first I thought it may be due to IE not being compatible with some of the CSS attributes I’m using but then I tried with tables and got the similar results. I have borders around the images so it should be fairly easy to see what I’m talking about. With Firefox, I don’t get any of these issues. Anyway, if anyone can tell me why this is happening and how to fix it, I would greatly appreciate it. There are 2 links, the 1st being my attempt with CSS and the second with tables. TIA

[url]http://www.lwdg.ca/testing/websites/lwdg/lwdg_css.html[/url]
[url]http://www.lwdg.ca/testing/websites/lwdg/lwdg_tables.html[/url]

to post a comment
HTML

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@KDLANov 16.2006 — Add to your CSS

img {display: block; margin: 0; padding: 0;}

Images are inline elements, and IE adds spacing around those.

Reference: http://www.w3.org/MarkUp/html3/img.html
Copy linkTweet thisAlerts:
@moose151authorNov 16.2006 — Add to your CSS

img {display: block; margin: 0; padding: 0;}

Images are inline elements, and IE adds spacing around those.

Reference: http://www.w3.org/MarkUp/html3/img.html[/QUOTE]

That worked great. Awesome! Thanks a lot KDLA. However, I still have a problem with my flash object in IE (with CSS). It looks like there isn't enough space for the 3 DIV objects in the same line. Any idea why this is happening? TIA
Copy linkTweet thisAlerts:
@KDLANov 16.2006 — You've got everything measured exact -- which isn't really what IE interprets: it adds padding to everything it can think of, usually about 4px.

Suggestion: shorten your left div by about 5px, and set the background of your wrapper div to #fff. That way, you'll have room for the Flash to move upward. In Fx, the slight gap will be masked by the consistent background color.

KDLA
Copy linkTweet thisAlerts:
@moose151authorNov 17.2006 — You've got everything measured exact -- which isn't really what IE interprets: it adds padding to everything it can think of, usually about 4px.

Suggestion: shorten your left div by about 5px, and set the background of your wrapper div to #fff. That way, you'll have room for the Flash to move upward. In Fx, the slight gap will be masked by the consistent background color.

KDLA[/QUOTE]

Got it! Thanks a lot for your help.
×

Success!

Help @moose151 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.29,
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,
)...