Stylesheets - Mysterious margin around images in Firefox?

Author

Mysterious margin around images in Firefox?

Jay Levitt

2006-08-02, 11:35 am

On http://www.wellesleycarriagehouse.com, there is no margin around the
thumbnail images at bottom. I've verified that Firefox doesn't even THINK
there's a margin, using Firebug 0.4.

So why is there space around the images in Firefox 1.5 for Windows?

Jay Levitt

Nick Theodorakis

2006-08-02, 11:35 am

Jay Levitt wrote:
> On http://www.wellesleycarriagehouse.com, there is no margin around the
> thumbnail images at bottom. I've verified that Firefox doesn't even THINK
> there's a margin, using Firebug 0.4.
>
> So why is there space around the images in Firefox 1.5 for Windows?
>

I think you got a "white space bug" problem. Remove the carriage returns
between your <img> elements.

Instead of:

<div id="thumbs">
<img src="images/site/kitchen-thumb.jpg" alt="Kitchen"/>
<img src="images/site/living-room-thumb.jpg" alt="Living Room"/>
<img src="images/site/bedroom-thumb.jpg" alt="Bedroom"/>
<img src="images/site/back-thumb.jpg" alt="Back Yard"/>
</div>

Use:

<div id="thumbs">
<img src="images/site/kitchen-thumb.jpg"
alt="Kitchen"/><img src="images/site/living-room-thumb.jpg"
alt="Living Room"/><img src="images/site/bedroom-thumb.jpg"
alt="Bedroom"/><img src="images/site/back-thumb.jpg"
alt="Back Yard"/>
</div>

Or just put all the <img> elements on one line with no space between the
elements.

Nick

--
Nick Theodorakis
nick_theodorakis@hotmail.com
contact form:
http://theodorakis.net/contact.html

Markus Ernst

2006-08-02, 11:35 am

Nick Theodorakis schrieb:
> Jay Levitt wrote:
>
>
> I think you got a "white space bug" problem. Remove the carriage returns
> between your <img> elements.

Is this a bug? I thought that line breaks between inline elements should
be rendered just as any whitespace? Correct me if there is a kind of
"ignore line breaks and indentation directly after inline elements"
rule; I don't know the Specs by heart... :-)

If you want images to behave like block elements, thus ignoring
baselines and surrounding white space, set them to display:block in the CSS:

#photo img, #thumbs img {
display:block;
float:left;
}
#photo, #thumbs {
clear:left;
}

HTH
Markus

Jay Levitt

2006-08-02, 11:35 am

On Thu, 20 Jul 2006 04:02:20 GMT, Nick Theodorakis wrote:

>
> I think you got a "white space bug" problem. Remove the carriage returns
> between your <img> elements.

Doh! Bingo. It makes sense, as Markus points out - if IMG is inline,
carraige returns become spaces. The proof: setting the font-size to
x-large makes the space bigger!

Thanks a bunch. I knew it had to be something simple.

Jay