Would like CSS rollover like this

[Mr. Clean]

http://www.masterstouchremodeling.com/

Would like the same effect but in cross-browser CSS Only.

Anyone know how to do it? I don't really want to use images, either.

[Steve Pugh]

"Mr. Clean" <mrclean@p&g.com> wrote:

http://www.masterstouchremodeling.com/

Would like the same effect but in cross-browser CSS Only.

Anyone know how to do it? I don't really want to use images, either.

Roughly as follows:

a {padding-right: 20px;}
a:link {text-decoration: none}
a:hover {text-decoration: underline overline; background-image:
url(arrow.gif); background-repeat: no-repeat; background-location:
right center;}

Tweak and add other styles as needed.

If there's a chance that your link text may wrap then things become
slightly more complicated.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>

[Brian]

Mr. Clean wrote:

http://www.masterstouchremodeling.com/

Would like the same effect but in cross-browser CSS Only.

a:hover {
/* styles when a pointer is hovered over a link */
}

You should be nice and add focus to that as well. Example:

a:link {
color: blue;
background-color: white;
}

a:hover, a:focus {
color: #999;
background-color: blue;
border-top: 1px solid #999;
}

See url in sig for more examples.

--
Brian (remove ".invalid" to email me)
http://www.tsmchughs.com/

[Mr. Clean]

Steve Pugh wrote:

"Mr. Clean" <mrclean@p&g.com> wrote:

http://www.masterstouchremodeling.com/

Would like the same effect but in cross-browser CSS Only.

Anyone know how to do it? I don't really want to use images, either.

Roughly as follows:

a {padding-right: 20px;}
a:link {text-decoration: none}
a:hover {text-decoration: underline overline; background-image:
url(arrow.gif); background-repeat: no-repeat; background-location:
right center;}

Tweak and add other styles as needed.

If there's a chance that your link text may wrap then things become
slightly more complicated.

Works fine except that the graphic doesn't show at all no matter what I try.

[Steve Pugh]

"Mr. Clean" <mrclean@p&g.com> wrote:

Steve Pugh wrote:

"Mr. Clean" <mrclean@p&g.com> wrote:

http://www.masterstouchremodeling.com/

Would like the same effect but in cross-browser CSS Only.

Anyone know how to do it? I don't really want to use images, either.

Roughly as follows:

a {padding-right: 20px;}
a:link {text-decoration: none}
a:hover {text-decoration: underline overline; background-image:
url(arrow.gif); background-repeat: no-repeat; background-location:
right center;}

Works fine except that the graphic doesn't show at all no matter what I try.

URL of your page so we try to debug it?

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>

[Mr. Clean]

Steve Pugh wrote:

"Mr. Clean" <mrclean@p&g.com> wrote:

Steve Pugh wrote:

"Mr. Clean" <mrclean@p&g.com> wrote:
http://www.masterstouchremodeling.com/

Would like the same effect but in cross-browser CSS Only.

Anyone know how to do it? I don't really want to use images, either.

Roughly as follows:

a {padding-right: 20px;}
a:link {text-decoration: none}
a:hover {text-decoration: underline overline; background-image:
url(arrow.gif); background-repeat: no-repeat; background-location:
right center;}

Works fine except that the graphic doesn't show at all no matter what I try.

URL of your page so we try to debug it?

Must've been something wrong. It works now...

http://www.austinmetrobaseball.com/rollovertest.html

[Mr. Clean]

Mr. Clean wrote:

Steve Pugh wrote:

"Mr. Clean" <mrclean@p&g.com> wrote:

Steve Pugh wrote:

"Mr. Clean" <mrclean@p&g.com> wrote:
> http://www.masterstouchremodeling.com/
>
> Would like the same effect but in cross-browser CSS Only.
>
> Anyone know how to do it? I don't really want to use images, either.
Roughly as follows:

a {padding-right: 20px;}
a:link {text-decoration: none}
a:hover {text-decoration: underline overline; background-image:
url(arrow.gif); background-repeat: no-repeat; background-location:
right center;}
Works fine except that the graphic doesn't show at all no matter what
I try.

URL of your page so we try to debug it?

Must've been something wrong. It works now...

http://www.austinmetrobaseball.com/rollovertest.html

Anyway to make the space between the text and the overline and underline
more pronounced?

[Harlan Messinger]

"Mr. Clean" <mrclean@p&g.com> wrote in message
news:85******************************@news.teranew s.com...

Mr. Clean wrote:

Steve Pugh wrote:

"Mr. Clean" <mrclean@p&g.com> wrote:

Steve Pugh wrote:

> "Mr. Clean" <mrclean@p&g.com> wrote:
>
>
>> http://www.masterstouchremodeling.com/
>>
>> Would like the same effect but in cross-browser CSS Only.
>>
>> Anyone know how to do it? I don't really want to use images, either.
>
>
> Roughly as follows:
>
> a {padding-right: 20px;}
> a:link {text-decoration: none}
> a:hover {text-decoration: underline overline; background-image:
> url(arrow.gif); background-repeat: no-repeat; background-location:
> right center;}
>

Works fine except that the graphic doesn't show at all no matter what
I try.

URL of your page so we try to debug it?

Must've been something wrong. It works now...

http://www.austinmetrobaseball.com/rollovertest.html

Anyway to make the space between the text and the overline and underline
more pronounced?

In terms of feasibility, I'm afraid that falls into the same category as
wanting to specify the angularity of your italics. :-)

[Neal]

On Tue, 06 Jul 2004 21:12:40 GMT, Mr. Clean <mrclean@p&g.com> wrote:

http://www.austinmetrobaseball.com/rollovertest.html

Anyway to make the space between the text and the overline and underline
more pronounced?

You could replace it with top and bottom borders. 1px solid.

To do this right, you need to set the same border on the a:link too - but
use the background color.

[brucie]

in post: <news:85******************************@news.terane ws.com>
"Mr. Clean" <mrclean@p&g.com> said:

http://www.austinmetrobaseball.com/rollovertest.html

Anyway to make the space between the text and the overline and underline
more pronounced?

a:hover{text-decoration:none;border-top:2px solid red;border-bottom:2px dotted green;}

not supported by IE

--
b r u c i e

[e n | c k m a]

> a:hover{text-decoration:none;border-top:2px solid red;border-bottom:2px
dotted green;}

not supported by IE

What makes you say that?
I've implemented that before and it works fine in IE...

www.webmarkdesigns.com.au

Except I think the code was more like:

a{text-decoration:none}

a:hover{border:solid #fff;border-width:1px 0}

But there's only really two differences between my code and yours: The
dotted/solid line specified and the colours.

[brucie]

in post: <news:eV*******************@news-server.bigpond.net.au>
e n | c k m a <bo*@marley.com> said:

a:hover{text-decoration:none;border-top:2px solid red;border-bottom:2px
dotted green;}

not supported by IE

What makes you say that?

its unreliable. sometimes the top border doesn't appear and sometimes
the bottom doesn't appear. its depends where/how its used.
--
b r u c i e

[e n | c k m a]

> its unreliable. sometimes the top border doesn't appear and sometimes

the bottom doesn't appear. its depends where/how its used.

Fair enough - I haven't come across any situation yet where it hasn't
worked... but I've only used it on that one site, so I guess I wouldn't
know. Interesting to hear, though.