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. 8  6088 
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?
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
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
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"
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.
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?
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
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 This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics
by: Alex |
last post by:
Hi all,
I'm using the following code in my website, and it's looking totally
different on IE and Firefox. It actually works on IE while Firefox is
weird.
In CSS:
img.left_nav_1 {background:...
|
by: Trent |
last post by:
Hey All,
I am new to javascript and currently coding a site with scripts that
are beyond my level of understanding. The problematic page has
thumbnail images that can be clicked on to zoom in....
|
by: Mark Allison |
last post by:
Hi,
Newbie here, please bear with me.
I have a C# project which implements a tree view control. I want to add
some images to this tree view control. The tree view control represents
the tree...
|
by: Alex D. |
last post by:
Hi, I have a frame in one of my pages that I use to show diferent pages each
time. I am experiencing an weird behaviour in Mozilla and Firefox, when the
frame's source is specified in the server...
|
by: phil-news-nospam |
last post by:
Why does SVG need a different tag than other images?
IMHO, SVG should be implemented as an image type just like any other image
type, allowing it to work with <img> tags, and ... here is the...
|
by: Jay Levitt |
last post by:
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...
|
by: littleark |
last post by:
Hi everybody,
I have a typical javascript images preloader, it works fine both on
Firefox and on IE in my intranet (local server).
It works fine on the Internet (remote server) in IE.
In...
|
by: obstinate |
last post by:
hello all,
i'm a newbie in ajax. now i work in team that developed an online map site which is similar like google map.
we use <div> to contain the map.
This div contains map image tiles and...
|
by: rosaryshop |
last post by:
I'm working a jewelry/rosary design web site at http://www.rosaryshop.com/rosariesAndKits2.php.
As the user makes selections, it updates images of various parts, giving them a preview of the...
|
by: matheussousuke |
last post by:
Hello, I'm using tiny MCE plugin on my oscommerce and it is inserting my website URL when I use insert image function in the emails.
The goal is: Make it send the email with the URL...
|
by: Charles Arthur |
last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
|
by: emmanuelkatto |
last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud.
Please let me know.
Thanks!
Emmanuel
|
by: BarryA |
last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
|
by: nemocccc |
last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
|
by: Oralloy |
last post by:
Hello folks,
I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>".
The problem is that using the GNU compilers,...
|
by: jinu1996 |
last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
|
by: agi2029 |
last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...
|
by: isladogs |
last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM).
In this session, we are pleased to welcome a new...
| |
