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

[tor.brekke.skjotskift]

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;
}

[Rik Wasmus]

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

[tor.brekke.skjotskift]

On 30 Nov, 19:14, "Rik Wasmus" <[e-mail]:

On Fri, 30 Nov 2007 15:30:00 +0100, <[e-mail]>
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

[Rik Wasmus]

On Fri, 30 Nov 2007 22:24:00 +0100, <to*******************@gmail.com
wrote:

On 30 Nov, 19:14, "Rik Wasmus" <[e-mail]:

>On Fri, 30 Nov 2007 15:30:00 +0100, <[e-mail]>
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