CODEWITHSUNDEEP
htmlimagefirefoxmarginspacing
Wouter Alberts
Wouter Alberts

Reputation: 21

Firefox adds extra space after image in div (or makes divs bigger)

He everyone,

I have a problem with Firefox on this website I'm working on:

Link

I've built a horizontal slider, which works great on all browsers, except for firefox (both OSX as Windows). The problem is that firefox shows more margin/padding/space after the images in the slider than the 5px left and right margin it's supposed to have. Another weird thing is the first image has less spacing than the rest of the images.

I have tried to include a .js workaround with this:

function onPageLoad(){
    // Firefox rare spacing fix //
    setTimeout(function() {
        jQuery('.horizItem').each(function() {
            var outerWidth = jQuery(this).find('img').outerWidth();
            jQuery(this).width(outerWidth);
        });
    }, 300);
}
onPageLoad();

This works most of the time, but sometimes it makes the divs containing the images 10 or 20px wide. So it messes up the slider.

Is there a simple css fix which I can apply to remove these weird spacings?

I really can't seem to find the source of the spacing in the element inspector... When I compare the width of the div to the width of the image, the difference (minus the intended 10px margin) is 15.883px, which is a weird number as well.

Can somebody help me? I feel like it's a real simple mistake I'm making somewhere.

Thanks a bunch.

Upvotes: 2

Views: 748

Answers (1)

riverbell
riverbell

Reputation: 46

I've had a similair problem when making Tumblr themes; that images and Tumblr photosets (photos displayed in an iframe) show a little "padding" beneath them, despite the padding being zero in the CSS. The solution was to make them blocks;

img, iframe {
    display: block;
}

Maybe you could try to display your images as inline-block, since they are side by side?

Upvotes: 1

Related Questions