/    Sign up×
Community /Pin to ProfileBookmark

IE adding extra padding top to a floated image

Copy linkTweet thisAlerts:
Sep 03.2008

Hello Everyone..

See [url]http://images.cashcade.co.uk/help/mirrorbingo/help.php[/url]

This relies on quite precise element heights to make the rows in this design match between the left and right-hand columns.

IE seems to be adding extra padding to the top of the game titles and login button causing the container to increase in size. See attached illustration. On the left is IE and FF is on the right.

If anyone can shed any light on this strangeness, I’d be very grateful to you..
cheers!

jon

ps. have attached the relevant html and css in a text file

[upl-file uuid=a3fd9867-f055-4385-9d46-77483cdbc35a size=13kB]help.gif[/upl-file]

[upl-file uuid=8e84bab7-1d68-4266-b6cd-d221f634e28c size=14kB]help.txt[/upl-file]

to post a comment
CSS

10 Comments(s) ↴

Copy linkTweet thisAlerts:
@ray326Sep 03.2008 — IE has some known problems with doubling margins re floats. Are you using the term "padding" correctly in your description?
Copy linkTweet thisAlerts:
@jwhittlestoneauthorSep 04.2008 — hmmm, not rely.

When i say padding, i really mean "extra space" to the top of images.

cheers
Copy linkTweet thisAlerts:
@CentauriSep 04.2008 — The css and images are not being applied to the site you linked to as you have this :[CODE]<base href="http://localhost/mirrorbingo/content/" />[/CODE]We don't have the images and css file on our computers......
Copy linkTweet thisAlerts:
@jwhittlestoneauthorSep 04.2008 — oh thanks a lot, doh


now fixed so you can see what i mean.

http://images.cashcade.co.uk/help/mirrorbingo/help.php
Copy linkTweet thisAlerts:
@CentauriSep 04.2008 — The space is an allowance for text descenders, as images are inline elements and are normally aligned to the text baseline - try adding :[CODE]img {
vertical-align: bottom;
}[/CODE]
Copy linkTweet thisAlerts:
@jwhittlestoneauthorSep 04.2008 — oh thats great thanks very much Centauri

thing is, i updated it, and i still have the unwanted space, below the images now - do you see what i mean? wierd..

again only in IE

http://images.cashcade.co.uk/help/mirrorbingo/help.php
Copy linkTweet thisAlerts:
@CentauriSep 04.2008 — Looks fine to me now.
Copy linkTweet thisAlerts:
@jwhittlestoneauthorSep 08.2008 — Ahh at http://images.cashcade.co.uk/help/mirrorbingo/help.php in Internet Explorer 7

You will see that I have used vertical-align top on the game titles. I thought this would solve it, but the image just takes up too much space.

See the attached image. The paragraph has been shifted down a few pixels causing my design to break.

In Firefox it's fine! Story of my life.

Any light shed on this would be greatly appreciated, thanks in advance

[upl-file uuid=6de9e25e-76d1-453c-b9d0-53f1f7473352 size=8kB]image_bottom_xtra.png[/upl-file]
Copy linkTweet thisAlerts:
@CentauriSep 08.2008 — Try :[CODE].instant_desc a img {display: block}[/CODE]
Copy linkTweet thisAlerts:
@jwhittlestoneauthorSep 08.2008 — that has answered my prayers, now working!

Thanks loads, next time im in NSW, I'll buy you a drink

cheers mate

jon whittlestone
×

Success!

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