nice hover-effect for images

tomasio

Dear Pros,

How can I achieve a nicer hover-effect for the image tomasio.design on
the bottom-right of my webpage? I am using the class ".footer a:hover"
for a CSS-based mouseover-effect but this causes an ugly green block
to the left of the image while hovering the mousepointer over it. I
just want to link that image to my index-page, without any mouseover
effect if possible. Any hints?

Plus I get an error message from the w3-validator that my file does
not validate against X-html transitional.This is the result I got:
http://validator.w3.org/check?uri=ht...%2FUs_p12.html
So I am doing something wrong here, but google could not provide me
with satisfying answers. Can you?

Third: Firefox does not display my<titletags. Does anybody know why?

An example of the site can be found here:
http://tomasio.at/referenzen/Us_p12.html

the linked stylesheet can be found there:
http://tomasio.at/stylesheet3.css

Thank you in advance for your help.

kind regards,
--
tomasio
"Describing an issue reveals the way of solving it. At least I hope so."

Mar 30 '07 #1

Els

tomasio wrote:

How can I achieve a nicer hover-effect for the image tomasio.design on
the bottom-right of my webpage? I am using the class ".footer a:hover"
for a CSS-based mouseover-effect but this causes an ugly green block
to the left of the image while hovering the mousepointer over it. I
just want to link that image to my index-page, without any mouseover
effect if possible. Any hints?

For .footer a:link you have a background-color defined:
background-color:#FAFAFA;

For the image you have a left margin of 11px. What you are seeing is
the background of the link which is 11px wider to the left than the
image. (if you image would be transparent, you'd see the colour on the
entire link, not just the 11px on the left)

Plus I get an error message from the w3-validator that my file does
not validate against X-html transitional.This is the result I got:
http://validator.w3.org/check?uri=ht...%2FUs_p12.html
So I am doing something wrong here, but google could not provide me
with satisfying answers. Can you?

You are having this in the source on line 327:
<a href="../index.html"><a href="../index.html">
You can't nest <aelements.

Third: Firefox does not display my<titletags. Does anybody know why?

What do you mean it doesn't display them? My title bar at the top of
my Firefox window shows "tomasio.referenzen". That's what's in your
<titleelement.

An example of the site can be found here:
http://tomasio.at/referenzen/Us_p12.html

--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/

Mar 30 '07 #2

tomasio

On Fri, 30 Mar 2007 16:04:05 +0200, Els <el*********@tiscali.nl>
wrote:

>For the image you have a left margin of 11px. What you are seeing is
the background of the link which is 11px wider to the left than the
image. (if you image would be transparent, you'd see the colour on the
entire link, not just the 11px on the left)

thank you, I just extended the image width to the full width of the
surrounding block element, so the background-color is not visible
anymore.

>You are having this in the source on line 327:
<a href="../index.html"><a href="../index.html">
You can't nest <aelements.

damn. sometimes I'm blinded by code :)

>

>Third: Firefox does not display my<titletags. Does anybody know why?

What do you mean it doesn't display them? My title bar at the top of
my Firefox window shows "tomasio.referenzen". That's what's in your
<titleelement.

maybe I did not make myself clear enough: I was referring to the
title-attribute inside the <imgtag. if I put something like <img
scr="someimage.gif" width="100" height="20" alt="image" title="text
which appears while hovering above an image" /inside the <imgtag,
then the text inside the "title"-attribute should pop up when my
mousepointer stays above the image for a few seconds. Below is a link
what IE does:
http://tomasio.at/temp/title_attr.png
(popup appears on the right of the image-section)

I would like to make firefox do the same and thought that it has been
like this in earlier versions, but maybe I'm wrong.

Mar 30 '07 #3

Els

tomasio wrote:

>>Third: Firefox does not display my<titletags. Does anybody know why?

What do you mean it doesn't display them? My title bar at the top of
my Firefox window shows "tomasio.referenzen". That's what's in your
<titleelement.

maybe I did not make myself clear enough: I was referring to the
title-attribute inside the <imgtag.

Maybe that's because you wrote "<title>", and not just title.

if I put something like <img
scr="someimage.gif" width="100" height="20" alt="image" title="text
which appears while hovering above an image" /inside the <imgtag,
then the text inside the "title"-attribute should pop up when my
mousepointer stays above the image for a few seconds. Below is a link
what IE does:
http://tomasio.at/temp/title_attr.png
(popup appears on the right of the image-section)

My firefox shows exactly that.

I would like to make firefox do the same and thought that it has been
like this in earlier versions, but maybe I'm wrong.

Earlier versions? What version are you using now? I have 1.5.0.11, and
the title attributes show up fine.

--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/

Mar 30 '07 #4

Bergamot

tomasio wrote:

On Fri, 30 Mar 2007 16:04:05 +0200, Els <el*********@tiscali.nl>
wrote:

>>You are having this in the source on line 327:
<a href="../index.html"><a href="../index.html">
You can't nest <aelements.

damn. sometimes I'm blinded by code :)

If you validated your code before posting, you would have found that
error yourself. ;)
http://validator.w3.org/
http://jigsaw.w3.org/css-validator/

--
Berg

Mar 30 '07 #5

Els

Bergamot wrote:

tomasio wrote:

>On Fri, 30 Mar 2007 16:04:05 +0200, Els <el*********@tiscali.nl>
wrote:

>>>You are having this in the source on line 327:
<a href="../index.html"><a href="../index.html">
You can't nest <aelements.

damn. sometimes I'm blinded by code :)

If you validated your code before posting, you would have found that
error yourself. ;)
http://validator.w3.org/
http://jigsaw.w3.org/css-validator/

Not quite. Read his first post - he did validate the code, found the
error, but didn't see the mistake that caused the error :-)

--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/

Mar 30 '07 #6

Bergamot

Els wrote:

Bergamot wrote:

>If you validated your code before posting

Not quite. Read his first post

The subject line didn't give me cause to read more than your reply.

didn't see the mistake that caused the error :-)

Happens to all of us. :)

--
Berg

Mar 30 '07 #7

Els

Bergamot wrote:

The subject line didn't give me cause to read more than your reply.

I suppose I should be flattered then, that my name on a post makes you
read it in spite of the subject line ;-)

--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/

Mar 30 '07 #8

Bergamot

Els wrote:

Bergamot wrote:

>The subject line didn't give me cause to read more than your reply.

I suppose I should be flattered then, that my name on a post makes you
read it in spite of the subject line ;-)

Not everyone has that honor. :-)

--
Berg

Mar 31 '07 #9

tomasio

On Sat, 31 Mar 2007 00:16:17 +0200, Els <el*********@tiscali.nl>
wrote:

>

>I would like to make firefox do the same and thought that it has been
like this in earlier versions, but maybe I'm wrong.

Earlier versions? What version are you using now? I have 1.5.0.11, and
the title attributes show up fine.

I am using 2.0.0.3 – maybe the developers changed something.

Apr 2 '07 #10

Bergamot

tomasio wrote:

>>

>>I would like to make firefox do the same and thought that it has been
like this in earlier versions, but maybe I'm wrong.

I am using 2.0.0.3 – maybe the developers changed something.

re: http://tomasio.at/referenzen/Us_p12.html

Firefox 2.0 on W2K shows the title attributes on the navigation menu
just fine. BTW, your alt text on those buttons is incorrect. What you
have for the title attributes is what should be in the alt text.

--
Berg

Apr 2 '07 #11