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

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

On Fri, 30 Nov 2007 15:30:00 +0100, <tor.brekke.skjotskift (AT) gmail (DOT) 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

On 30 Nov, 19:14, "Rik Wasmus" <luiheidsgoe... (AT) hotmail (DOT) com> wrote:

On Fri, 30 Nov 2007 15:30:00 +0100, <tor.brekke.skjotsk... (AT) gmail (DOT) 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

On Fri, 30 Nov 2007 22:24:00 +0100, <tor.brekke.skjotskift (AT) gmail (DOT) com>
wrote:

On 30 Nov, 19:14, "Rik Wasmus" <luiheidsgoe... (AT) hotmail (DOT) com> wrote:
On Fri, 30 Nov 2007 15:30:00 +0100, <tor.brekke.skjotsk... (AT) gmail (DOT) 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 <a> has an href
attribute..
--
Rik Wasmus