White Space within Image

rossc007

Hi Guys,

I have an image which when displayed in the browser (FF4, IE8, Chrome) has white space at the bottom of it, so its cropped a little. When I right click it and save as, the full image is downloaded, the white space in the image is not in the downloaded version... Im mystified.

I've attached an screen shot of the image in Firebug, and I've attached the downloaded image too, any help or suggestions appreciated.

stevenmu

For one thing you're specifying a width and height which don't match the image. If you really want to do this it tends to work better when done with CSS (i.e. inside your 'style' attribute).

Giblet

The issue is that the image contains no white space when saved, but does when displayed in a browser, regardless of any properties set on it, I've verified this is the case as well. There's something wrong with the image. Have you tried opening it in a different editor and resaving it?

rossc007

Thanks for the replies,

I'm actually pulling 2 images from a database and displaying them side by side, the first image renders fine, then I get this weird white space problem. I could understand if the image on the server had the white space in it once it was created, but as you can see it doesn't. Its not specific to one image either.

Don't think its a CSS issue, when I opened firebug the browser re-sized the image to fit. I dont even know what to google!

Liam Byrne

rossc007 wrote: »

Hi Guys,

I have an image which when displayed in the browser (FF4, IE8, Chrome) has white space at the bottom of it, so its cropped a little. When I right click it and save as, the full image is downloaded, the white space in the image is not in the downloaded version... Im mystified.

I've attached an screen shot of the image in Firebug, and I've attached the downloaded image too, any help or suggestions appreciated.

How is it "cropped" ?

On a web page, the only way you can "crop" an image is to have it a) as a background within an element or b) have it within an element that has a defined size and an overflow:hidden

Just checking on your terminology.

rossc007

Hi Liam,

Maybe Appears Cropped is the correct terminology! You can see from the firebug screen shot that white space has appeared at the bottom of the image, within the img tag. Any ideas?

Kenny Logins

That is very odd, the white bar across the bottom is definitely added by the browser (FF, Chrome), there must be a glitch in the file itself.

I opened and re-saved it and it's fine now..

rossc007

Hi Kenny,

Very odd indeed!

The image on the server is fine, but when you display it in an <img> tag on a browser, it gets that space at the bottom. As I said every image I use has this same bug.

I've done some more messing around with the image and that space is transparent, not white, not that it makes much difference though

Kenny Logins

I just opened the image directly in the browsers, to rule out a possible HTML or CSS issue and the bar was displayed, but not with the re-saved file. Odd.

rossc007

OK the plot thickens, I uploaded the attached image with the gap issue to imgur - http://i.stack.imgur.com/f7RSi.jpg

The file displays correctly on imgur and when downloaded and viewed in a browser the problem is gone! The file is also 1kb smaller, so must be an problem with the file itself.

Kenny Logins

If you have a lot of images just run them through a batch process with no changes, just to open and re-save.