Category: CSS
Morph css background-position in Internet Explorer
If you try to set the CSS-property background-position in Internet Explorer (I tested with 7) and even use that with Mootools' morph/tween-functions, it will not work.
You can workaround that issue, if you set also background-position-x and background-position-y (actually ignored by my Firefox 3.0).
This is the code, I use at koala to move the background upwards.
2
3
4
'background-position':'0 -140px',
'background-position-y':'-140px',
});
Preloading CSS-images for :hover
The top navigation here at dracoblue.net is done with css images, which also have a :hover-effect (showing a lighter version of the image).
So there is a:
and a
In CSS it looked like that:
2
3
4
5
6
background: transparent url('menu_news.png') no-repeat;
}
a#newsLink:hover {
background: transparent url('menu_news_hover.png') no-repeat;
}
All this is quite common, but I was facing a usability problem here. The *hover.png files won't be loaded until one of the links got hover'd. In the perspective of the server owner, you might be happy about that. But for the user, the image is unavailable for nearly a second, because it takes time to deliver the image to the user.
So here is my solution to preload the image (without using javascript or stub-<img>'s).
2
3
4
5
6
7
8
9
10
11
12
13
background: transparent url('menu_news.png') no-repeat;
}
td#newsLink a:hover {
background: transparent url('menu_news_hover.png') no-repeat;
}
td#newsLink {
background:
transparent
url('menu_news_hover.png')
fixed no-repeat
-120px -120px;
}
I moved the #newsLink to the td surrouding the newsLink. And at the end, I added a new decleration for a non-repeating and - with coordinates -120x-120 - clearly invisible image.
