Gap between images in Firefox

zeeeej

Hi,

I have a couple of images in my page header that I want to sit
directly on top of each other. However, I'm getting a small gap
between them when I view the page in Firefox and Safari. It looks OK
in IE7 and Opera. You can see the problem at:
http://tag.dreamhosters.com/public_h...bb3/portal.php

I created the header and rollover buttons in Adobe ImageReady. As you
probably know, ImageReady breaks the original image into smaller
pieces and then generates simple HTML to put them all back together.
This simple HTML looks fine - it's when I stick them into this site
that the problem happens. I'm sure it's some inherited problem from a
style somewhere, but I can't figure out what it is.

I'm pretty new to web design, so sorry in advance for any stupid
questions. And thanks in advance for you help.

Aug 4 '07 #1

Follow Post Reply

5885

Ben C

On 2007-08-04, zeeeej <zj*******@gmail.comwrote:

Hi,

I have a couple of images in my page header that I want to sit
directly on top of each other. However, I'm getting a small gap
between them when I view the page in Firefox and Safari. It looks OK
in IE7 and Opera. You can see the problem at:
http://tag.dreamhosters.com/public_h...bb3/portal.php

I created the header and rollover buttons in Adobe ImageReady. As you
probably know, ImageReady breaks the original image into smaller
pieces and then generates simple HTML to put them all back together.
This simple HTML looks fine - it's when I stick them into this site
that the problem happens. I'm sure it's some inherited problem from a
style somewhere, but I can't figure out what it is.

I'm pretty new to web design, so sorry in advance for any stupid
questions. And thanks in advance for you help.

Add table#TAG_Header img { display: block; }

It's the often observed problem that since an img is by default inline
and since the default vertical alignment of a table cell is baseline,
the img sits on the baseline with a small gap underneath it
corresponding roughly to the space required for descenders in the
current font. That's what inline boxes are supposed to do.

Making the images display: block is therefore the simple fix.

In quirks mode browsers will usually not leave those gaps if there are
only images on the line and no normal characters. But never mind about
that, you don't want to use quirks mode.

What's the point though, why not just use one big image? Is the idea
that over a slow connection you will see the image appear in slices?

Aug 4 '07 #2

Beauregard T. Shagnasty

zeeeej wrote:

"Beauregard T. Shagnasty" wrote:
>You have CSS in the <body>.

Can you point out what it is and how to best fix it?

Search the source for:

<style type="text/css">
<!--
#Menu,
....etc

And you don't need the HTML comment marks in CSS.

>Use one image, save a ton of download time...

Do you mean in the header? How can I do that and get the rollover
effect I'd like?

Yes, I meant in the header. What "rollover" do you mean? The links
changing from white to black when hovered? I do that with CSS and text
links. That will also work for the ~10% who have JavaScript disabled.

--
-bts
-Motorcycles defy gravity; cars just suck

Aug 4 '07 #3

dorayme

In article <sl*********************@bowser.marioworld>,
Ben C <sp******@spam.eggswrote:

What's the point though, why not just use one big image? Is the idea
that over a slow connection you will see the image appear in slices?

As I understand it, slicing was partly touted as a way of
reducing file sizes because some parts can be more compressed
than other parts without unduly compromising the overall look.

It can also be a deliberate strategy to make a pic appear in
jigsaw bits for purely aesthetic reasons. There are umpteen ways
to make the opening credits of films, and so too introducing folk
to a website (the worst imaginable way is to make them wait for
Flash movie to load, a picture loading in jigsaws is almost
rivetting by comparison!)

I usually prefer to prepare pics as progressive loading, so they
appear sharper and sharper with each "pass" for the slow
connections.

--
dorayme

Aug 4 '07 #4

David

dorayme wrote:

In article <sl*********************@bowser.marioworld>,
Ben C <sp******@spam.eggswrote:

>What's the point though, why not just use one big image? Is the idea
that over a slow connection you will see the image appear in slices?

As I understand it, slicing was partly touted as a way of
reducing file sizes because some parts can be more compressed
than other parts without unduly compromising the overall look.

It can also be a deliberate strategy to make a pic appear in
jigsaw bits for purely aesthetic reasons. There are umpteen ways
to make the opening credits of films, and so too introducing folk
to a website (the worst imaginable way is to make them wait for
Flash movie to load, a picture loading in jigsaws is almost
rivetting by comparison!)

I usually prefer to prepare pics as progressive loading, so they
appear sharper and sharper with each "pass" for the slow
connections.

Another nice thing would be to put your text in a color easily seen!
That bit of dark blue text on the black background is a bitch to see for
sure. For you that did not see it the text is on the lower left side
across from the search box it says "Skip to content"

Aug 4 '07 #5

Ben C

On 2007-08-04, dorayme <do************@optusnet.com.auwrote:

In article <sl*********************@bowser.marioworld>,
Ben C <sp******@spam.eggswrote:

>What's the point though, why not just use one big image? Is the idea
that over a slow connection you will see the image appear in slices?

As I understand it, slicing was partly touted as a way of
reducing file sizes because some parts can be more compressed
than other parts without unduly compromising the overall look.

Unless you manually make the compression more lossy for some slices,
slicing is always going to make the total bigger. Each slice will need
its own headers and in general compression works better the more data
you give it to work with at a time.

[...]

I usually prefer to prepare pics as progressive loading, so they
appear sharper and sharper with each "pass" for the slow
connections.

Yes, that used to be done quite often. The downside is that a
progressive jpeg is a bit bigger in total file size and slower to load
completely.

Aug 5 '07 #6

zeeeej

On Aug 4, 5:06 pm, Ben C <spams...@spam.eggswrote:

On 2007-08-04, zeeeej <zjenni...@gmail.comwrote:

Add table#TAG_Header img { display: block; }

Ben: Thank you! That was what I needed! But now I would like to do it
"right" using a single image, text and a hover effect.

Beauregard (or anyone else): What's the best way to get the text as
close (appearance and positioning) to what it looks like now? Am I
right in thinking I use position:absolute and a:hover?

I'm going to apologize again for my stupid questions before
proceeding. This really is the first time I've done any of this.

The font in use there is Futura Bold Condensed. Is that a font I can
safely call in a web page? If not, what commonly used font would you
recommend to get a look similar to what's there?

Aug 5 '07 #7

dorayme

In article <sl*********************@bowser.marioworld>,
Ben C <sp******@spam.eggswrote:

On 2007-08-04, dorayme <do************@optusnet.com.auwrote:
In article <sl*********************@bowser.marioworld>,
Ben C <sp******@spam.eggswrote:

What's the point though, why not just use one big image? Is the idea
that over a slow connection you will see the image appear in slices?
As I understand it, slicing was partly touted as a way of
reducing file sizes because some parts can be more compressed
than other parts without unduly compromising the overall look.

Unless you manually make the compression more lossy for some slices,
slicing is always going to make the total bigger. Each slice will need
its own headers and in general compression works better the more data
you give it to work with at a time.

Of course, that is the idea, you are right, manually. Otherwise,
it would have to be a pretty clever program to know what was
important in a pic. I am not, of course, endorsing the
practicality of it. When it comes down to it, it is almost never
worth the bother.

>
[...]
I usually prefer to prepare pics as progressive loading, so they
appear sharper and sharper with each "pass" for the slow
connections.

Yes, that used to be done quite often. The downside is that a
progressive jpeg is a bit bigger in total file size and slower to load
completely.

Not bigger but smaller in my experience and practice. As for
slower loading to finality, I take your word for this and must
schedule some experiments to see for myself sometime.

The other motivation I might mention about slicing is to
introduce a bit of actual html text into the pic area. It is
mostly a ghastly thing to do, but a few clicks either way of text
upping or downing can be not too disruptive in certain types of
largish pics (the pic remains the same, the slice behind the text
being specially prepared to have the expected background of that
part of the picture, the text is slightly easier to read within a
narrow range). This is an accessibility argument. I do not
endorse it.

--
dorayme

Aug 5 '07 #8

Beauregard T. Shagnasty

zeeeej wrote:

The font in use there is Futura Bold Condensed. Is that a font I can
safely call in a web page?

No. You should only use fonts found on a standard distribution of the
major operating systems. "Futura Bold Condensed" is not on any of my
computers; maybe it's a Mac font? (Don't have a Mac.)

If not, what commonly used font would you recommend to get a look
similar to what's there?

This is still for the same link you posted? I normally use:
font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;

--
-bts
-Motorcycles defy gravity; cars just suck

Aug 5 '07 #9

Gap between images in Firefox

This discussion thread is closed

Similar topics