Mysterious margin around images in Firefox?

[Jay Levitt]

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]

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 <imgelements.

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 <imgelements on one line with no space between the
elements.
Nick

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

[Markus Ernst]

Nick Theodorakis schrieb:

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 <imgelements.

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]

On Thu, 20 Jul 2006 04:02:20 GMT, Nick Theodorakis 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 <imgelements.

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