By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,287 Members | 1,524 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,287 IT Pros & Developers. It's quick & easy.

Re: Rollover problem with text anchor

P: n/a
Hi Roderik

On 15 Apr, 23:44, Roderik <nos...@atall.nlwrote:
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
Jun 27 '08 #1
Share this Question
Share on Google+
8 Replies


P: n/a
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
Jun 27 '08 #2

P: n/a
Hi Bergamot

On 16 Apr, 00:38, Bergamot <berga...@visi.comwrote:
<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
Jun 27 '08 #3

P: n/a
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/
Jun 27 '08 #4

P: n/a
Hi John

On 16 Apr, 01:21, John Hosking <J...@DELETE.Hosking.name.INVALID>
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

Jun 27 '08 #5

P: n/a
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/
Jun 27 '08 #6

P: n/a
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
Jun 27 '08 #7

P: n/a
On 16 Apr, 01:53, John Hosking <J...@DELETE.Hosking.name.INVALID>
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
Jun 27 '08 #8

P: n/a
HI Berg

On 16 Apr, 04:39, Bergamot <berga...@visi.comwrote:
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
Jun 27 '08 #9

This discussion thread is closed

Replies have been disabled for this discussion.