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

Set background-position in class and background-image in id.

P: n/a
I want to set a background-image with an id and use class to create
the rollover effect by altering background-position.

It wont work in either IE or FF. Any suggestions?

HTML
<a href="#" id="knappKalender" class ="knapp" (...)
CSS
a.knapp {
height:105px;
width:105px;
background-position: top left;
}

a.knapp:hover, a.knapp:focus {
background-position:center left;
}

a.knapp:active {
background-position:bottom left;
}

a#knappKalender {
background:url(../images/knapp_kalender.jpg) no-repeat;
}
Nov 30 '07 #1
Share this Question
Share on Google+
3 Replies


P: n/a
On Fri, 30 Nov 2007 15:30:00 +0100, <to*******************@gmail.com
wrote:
I want to set a background-image with an id and use class to create
the rollover effect by altering background-position.

It wont work in either IE or FF. Any suggestions?

HTML
<a href="#" id="knappKalender" class ="knapp" (...)
CSS
a.knapp {
height:105px;
width:105px;
background-position: top left;
}

a.knapp:hover, a.knapp:focus {
background-position:center left;
}

a.knapp:active {
background-position:bottom left;
}

a#knappKalender {
background:url(../images/knapp_kalender.jpg) no-repeat;
}
I you use 'background-image:url(..);' instead of 'background:' it will
work in Opera & FF, MSIE (7) will not cooperate it seems.
--
Rik Wasmus
Nov 30 '07 #2

P: n/a
On 30 Nov, 19:14, "Rik Wasmus" <luiheidsgoe...@hotmail.comwrote:
On Fri, 30 Nov 2007 15:30:00 +0100, <tor.brekke.skjotsk...@gmail.com>
wrote:


I want to set a background-image with an id and use class to create
the rollover effect by altering background-position.
It wont work in either IE or FF. Any suggestions?
HTML
<a href="#" id="knappKalender" class ="knapp" (...)
CSS
a.knapp {
height:105px;
width:105px;
background-position: top left;
}
a.knapp:hover, a.knapp:focus {
background-position:center left;
}
a.knapp:active {
background-position:bottom left;
}
a#knappKalender {
background:url(../images/knapp_kalender.jpg) no-repeat;
}

I you use 'background-image:url(..);' instead of 'background:' it will
work in Opera & FF, MSIE (7) will not cooperate it seems.
--
Rik Wasmus- Skjul sitert tekst -

- Vis sitert tekst -
Thanks!

Actually it worked with IE7 as well. I'm yet to test with IE6 and I do
not have high expectations :-)

Regards
Tor
Nov 30 '07 #3

P: n/a
On Fri, 30 Nov 2007 22:24:00 +0100, <to*******************@gmail.com
wrote:
On 30 Nov, 19:14, "Rik Wasmus" <luiheidsgoe...@hotmail.comwrote:
>On Fri, 30 Nov 2007 15:30:00 +0100, <tor.brekke.skjotsk...@gmail.com>
wrote:
I want to set a background-image with an id and use class to create
the rollover effect by altering background-position.
It wont work in either IE or FF. Any suggestions?
HTML
<a href="#" id="knappKalender" class ="knapp" (...)
CSS
a.knapp {
height:105px;
width:105px;
background-position: top left;
}
a.knapp:hover, a.knapp:focus {
background-position:center left;
}
a.knapp:active {
background-position:bottom left;
}
a#knappKalender {
background:url(../images/knapp_kalender.jpg) no-repeat;
}

I you use 'background-image:url(..);' instead of 'background:' it will
work in Opera & FF, MSIE (7) will not cooperate it seems.

Thanks!

Actually it worked with IE7 as well. I'm yet to test with IE6 and I do
not have high expectations :-)
D'oh! Offcourse, in MSIE 7 it does work, provided the <ahas an href
attribute..
--
Rik Wasmus
Dec 1 '07 #4

This discussion thread is closed

Replies have been disabled for this discussion.