473,320 Members | 1,802 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

Re: Rollover problem with text anchor

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
8 2593
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
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
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
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
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
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
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
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
by: domeceo | last post by:
I'm currently in the process of replacing a few rollover images, use for anchors, with text. I know how to change the hover and link colo attribute for all <a> hyperlink tags, but I don't want to...
0
by: Stuart Scharf | last post by:
I have tried to implement a link rollover as described in: http://www.alistapart.com/articles/sprites/ and other references posted on this newsgroup. My attempt resulted in grossly mangled...
1
by: nick | last post by:
I have the following code: <style> #item1 { DISPLAY: block; BACKGROUND: url(ProjMenuImgs/ProjBtn.gif) no-repeat 0px 0px; WIDTH: 87px; HEIGHT: 94px; } #item1:hover { background-position: 0...
5
by: jedbob | last post by:
I used Adobe Imageready to build a simple rollover navigation bar, where the text will change color on a mouse over. The working example can be found at:...
3
by: JOSEPHINE ALVAREZ | last post by:
I have this code that I want to use to do a rollover. However, because the company I am doing it for is continually changing the text, I want to be able to use dynamic text to change the text on...
2
by: Blake | last post by:
Can someone point me to a good article or online tutorial or sample app that explains how to create rollover effects *without* using JavaScript to swap out images? Thanks!
2
by: Doug | last post by:
Using ASP.NET, is this possible? All I want is something simple, like bold-facing the text. An alternative would be to use plain text links (IE 6.0, so we can rely on CSS and the anchor hover). ...
2
by: eholz1 | last post by:
Hello CSS and StyleSheet members, I have decided to move away from Dreamweaver javascript rollover buttons, in favor of a CSS type rollover button. (hope that is ok). I plan to use PHP to...
19
by: Dave Rado | last post by:
On 15 Apr, 23:23, John Hosking <J...@DELETE.Hosking.name.INVALID> wrote: A lot of my pages wouldn't display correctly in IE6 if I did that. IE6 didn't implement the w3c rules properly and as...
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
0
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.