/    Sign up×
Community /Pin to ProfileBookmark

hover & background image

Copy linkTweet thisAlerts:
Feb 02.2006

Hello

the site is [url]http://djshawnmichaels.com/new_site/[/url]

On the navigation area, I have the hover set to a red texture. When I hover it, it turns white before it turns red.

Is that normal?

Here is the code that I am using:

[code=html]
ul#menu li a:hover {
/* background: #eee; */
background: url(‘http://djshawnmichaels.com/new_site/images/texture.jpg’) repeat bottom right;
}[/html

Thanks

to post a comment
CSS

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@terrawolfFeb 02.2006 — It turns white first because the background picture is loading.

In IE, when caching is not turned on for every change in state of an element (eg on mouse over and on mouse out) the browser will go and fetch the graphic.

It's an absolute pain in the arse, but the below link should help you out a lot ?

http://www.fivesevensix.com/studies/ie6flicker/
Copy linkTweet thisAlerts:
@ray326Feb 02.2006 — Shawn, I just wanted to say, "Good job on the redesign!"
Copy linkTweet thisAlerts:
@KravvitzFeb 02.2006 — More information: [url=http://www.dynamicsitesolutions.com/css/background_image_switching/]CSS Background Image Switching[/url]
Copy linkTweet thisAlerts:
@comptech520authorFeb 02.2006 — This is what I have tried from gathering info from one of the websites listed. I am still getting a little bit of white before it turns to red: http://djshawnmichaels.com/new_site

Does anyone have any other ideas?

ul#menu li a {

background: #EB7500;

background-position: 0 0;

background: url('http://djshawnmichaels.com/new_site/images/texturemain.jpg') repeat bottom right;

color: #000;

display: block;

padding: 4px 0;

position: relative;

text-align: center;

text-decoration: none;

width: 100%;

}

ul#menu li a:hover {

/* background: #eee; */

background-position: 0 -28px;
Copy linkTweet thisAlerts:
@KravvitzFeb 02.2006 — Check out the links at the bottom of the page I linked to.
Copy linkTweet thisAlerts:
@comptech520authorFeb 03.2006 — Hi again,

I have the navigation area working so when you hover the background position changes.

The question is,

On my programming computer, there is a white flash inbetween the image moving

On my other computer, it acts as it is suppose to with the image moving.

how come that is?

When this command is used, like I am doing background-position: 0 0;

where is the 0 on the image?

thanks
Copy linkTweet thisAlerts:
@KravvitzFeb 03.2006 — [url=http://www.w3.org/TR/REC-CSS2/colors.html#propdef-background-position]The "0 0" means it starts from top left.[/url]

The white flicker is an IE6 bug. Read the links that I suggested -- there are a few solutions available.
×

Success!

Help @comptech520 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.29,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...