Re: Rollover problem with text anchor

[Dave Rado]

Hi Roderik

On 15 Apr, 23:44, Roderik <[e-mail]:

However this can be done with CSS only (background property) these days,
so there is no need to complicate things with javascript.

a {...}

a:hover {...}

The image's position is defined relative to the right hand edge of the
text, and depending on the what fonts the user has installed and what
browser and OS the are using, that position would vary; how can one
give text a background image that is 3px to the right of that text?

Dave

[Bergamot]

Dave Rado wrote:

>
how can one
give text a background image that is 3px to the right of that text?

<span>text</spanor whatever element suits you

span {
padding-right: [img width + 3px];
background: #fff url(img.png) right center no-repeat;
}

adjust to taste

--
Berg

[Dave Rado]

Hi Bergamot

On 16 Apr, 00:38, Bergamot <[e-mail]:

<span>text</spanor whatever element suits you

span {
padding-right: [img width + 3px];
background: #fff url(img.png) right center no-repeat;

}

adjust to taste

I've updated the mock-up at http://tinyurl.com/5vbko5 with my
understanding of your suggestion, and it half works in standards-
compliant browsers, and doesn't work at all in IE6, regardless of
whether it's in strict or quirks mode.

I've also made the text, the image and the padding much larger,
because as John said, it's only the principle that's important.

In standards-compliant browsers, if you hover over the text in my mock-
up, the text and the image both change colour, which is great; but if
you hover over the image, only the image changes colour and not the
text. Did I implement your suggestion incorrectly in some way; or if
not, is there a fix for this?

In IE6, the image doesn't change colour at all. Is there any way of
doing this that is cross-browser compatible? Much as I wish it weren't
the case, around a third of all users are still using IE6. And I have
seen sites that do achieve the effect I'm trying to achieve in IE6,
but I don't know how they did it.

Dave

[John Hosking]

Dave Rado wrote:

>
On 16 Apr, 00:38, Bergamot wrote:

><span>text</spanor whatever element suits you

span {
padding-right: [img width + 3px];
background: #fff url(img.png) right center no-repeat;
}

adjust to taste

I've updated the mock-up at http://tinyurl.com/5vbko5 with my
understanding of your suggestion, and it half works in standards-
compliant browsers, and doesn't work at all in IE6, regardless of
whether it's in strict or quirks mode.

....and with the <span*inside* the <a>?

<p>
<a class="Footer" href="#Top">
<span class="Test">Some text</span>
</a>
</p>

--
John
Pondering the value of the UIP: http://improve-usenet.org/

[Dave Rado]

Hi John

On 16 Apr, 01:21, John Hosking <[e-mail]>
wrote:

...and with the <span*inside* the <a>?

<p>
<a class="Footer" href="#Top">
<span class="Test">Some text</span>
</a>
</p>

I didn't realise spans were allowed inside anchors, thanks.

That works great in standards-compliant browsers but still not in IE6.
Does anyone know of a way of achieving this that works in IE6?

Dave

[John Hosking]

John Hosking wrote:

Dave Rado wrote:

>>
On 16 Apr, 00:38, Bergamot wrote:

>><span>text</spanor whatever element suits you

span {
padding-right: [img width + 3px];
background: #fff url(img.png) right center no-repeat;
}

adjust to taste

I've updated the mock-up at http://tinyurl.com/5vbko5 with my
understanding of your suggestion, and it half works in standards-
compliant browsers, and doesn't work at all in IE6, regardless of
whether it's in strict or quirks mode.

...and with the <span*inside* the <a>?

<p>
<a class="Footer" href="#Top">
<span class="Test">Some text</span>
</a>
</p>

Replying to my own post, and further to your latest trial (with error),
IE6 doesn't recognize :hover on elements other than <a>. So your
span.Test:hover won't do anything. But you've seen that already. ;-)

So maybe something like:

<p class="Footer">
<a href="#Top">
<span>Some text</span>
</a>
</p>

with

p {font-size: 30px; }
..Footer a:link,
..Footer a:visited { color:red; text-decoration:none; font-weight:bold; }
..Footer a:hover { color:green}
span { padding-right: 40px;
background:#fff url('../images/Test.gif') no-repeat right center; }
a:hover span {
background:#fff url('../images/TestHover.gif') no-repeat right center; }

?

--
John
The UIP: http://improve-usenet.org/

[Bergamot]

John Hosking wrote:

Dave Rado wrote:

>>
On 16 Apr, 00:38, Bergamot wrote:

>><span>text</spanor whatever element suits you

span {
padding-right: [img width + 3px];
background: #fff url(img.png) right center no-repeat;
}

adjust to taste

I've updated the mock-up at http://tinyurl.com/5vbko5 with my
understanding of your suggestion, and it half works in standards-
compliant browsers, and doesn't work at all in IE6, regardless of
whether it's in strict or quirks mode.

...and with the <span*inside* the <a>?

Drop the span altogether. Put those rules on the <aelement.

--
Berg

[Dave Rado]

On 16 Apr, 01:53, John Hosking <[e-mail]>
wrote:

<p class="Footer">
<a href="#Top">
<span>Some text</span>
</a>
</p>

with

p {font-size: 30px; }
.Footer a:link,
.Footer a:visited { color:red; text-decoration:none; font-weight:bold; }
.Footer a:hover { color:green}
span { padding-right: 40px;
background:#fff url('../images/Test.gif') no-repeat right center; }
a:hover span {
background:#fff url('../images/TestHover.gif') no-repeat right center; }

That works - many thanks!

Dave

[Dave Rado]

HI Berg

On 16 Apr, 04:39, Bergamot <[e-mail]:

Drop the span altogether. Put those rules on the <aelement.

--
Berg

That also works, thanks. In the current context I prefer the span
method though, because it means I don't have to define an anchor style
purely for use in this one context (the current one is used in other
contexts). It's useful to know one can also do it that way though.

Dave