 | |
Gap between images in Firefox
Cascading Style Sheets Layout/presentation on the WWW (comp.infosystems.www.authoring.stylesheets)
 |
| | Thread Tools | Display Modes |
#1
 
| |||
| |||
|
Gap between images in Firefox -
08-04-2007
, 01:47 PM
#2
| ||||||||
| ||||||||
|
|
zeeeej wrote: |
not the only person working on the site, and it's still a work in
progress, so clearly this is not the only problem we have. It's just
the one I'm most confused by.
The page templates are a variant of a standard PhpBB style, after some
really inexperienced folks have messed around with them (some, not a
lot).
Also, as I get more experienced, I'll worry more about standards
compliance. For now though, I'd like to focus on the images.
Quote:
|
It looks the same to me in Firefox and Opera. |
actually look myself.
Quote:
|
I would start here if I were you: http://validator.w3.org/check?verbos...2Ftag.dreamhos... "Sorry! This document can not be checked." "Failed validation" If you would set your font size to 100%, instead of body { font-size: 10px; ..you could get rid of the rest of the style sheets (A+, A++) etc, and it would display in everyone's chosen size.http://k75s.home.att.net/fontsize.html I'll take a look at the problem with utf-8 and font sizes next. |
Quote:
|
Why so much JavaScript? Not really sure. Mostly (on my part) for the rollover buttons in the |
- like I said, I'm a newbie.
Quote:
|
It won't fit in my browser window. It wants to install plugins. I think there are some script links broken at the moment. |
Quote:
|
You have CSS in the <body>. Can you point out what it is and how to best fix it? |
Quote:
|
Use one image, save a ton of download time... Do you mean in the header? How can I do that and get the rollover |
Quote:
|
-- -bts -Motorcycles defy gravity; cars just suck |
#3
| |||
| |||
|
|
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. |
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?
#4
| |||
| |||
|
|
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? |
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
#5
| |||
| |||
|
|
In article <slrnfb9qip.5jj.spamspam (AT) bowser (DOT) marioworld>, Ben C <spamspam (AT) spam (DOT) eggs> wrote: 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"
#6
| |||
| |||
|
|
In article <slrnfb9qip.5jj.spamspam (AT) bowser (DOT) marioworld>, Ben C <spamspam (AT) spam (DOT) eggs> wrote: 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. |
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.
[...]
Quote:
|
I usually prefer to prepare pics as progressive loading, so they appear sharper and sharper with each "pass" for the slow connections. |
progressive jpeg is a bit bigger in total file size and slower to load
completely.
#7
| |||
| |||
|
|
On 2007-08-04, zeeeej <zjenni... (AT) gmail (DOT) com> wrote: Add table#TAG_Header img { display: block; } |
"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?
#8
| |||
| |||
|
|
On 2007-08-04, dorayme <doraymeRidThis (AT) optusnet (DOT) com.au> wrote: In article <slrnfb9qip.5jj.spamspam (AT) bowser (DOT) marioworld>, Ben C <spamspam (AT) spam (DOT) eggs> wrote: 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. |
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.
Quote:
|
[...] 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. |
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
|
« Previous Thread
|
Next Thread »
| Thread Tools | |
| Display Modes | |
Linear Mode
| |
Powered by vBulletin Version 3.5.4
Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.