By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
449,079 Members | 927 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 449,079 IT Pros & Developers. It's quick & easy.

Mysterious margin around images in Firefox?

P: n/a
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
Jul 20 '06 #1
Share this Question
Share on Google+
3 Replies


P: n/a
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
Jul 20 '06 #2

P: n/a
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
Jul 20 '06 #3

P: n/a
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
Jul 20 '06 #4

This discussion thread is closed

Replies have been disabled for this discussion.