SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    Motivated Procrastinator seriocomic's Avatar
    Join Date
    Jan 2003
    Location
    Outside the bubble
    Posts
    1,275
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS hover image not cached in IE?

    I have a CSS class set for when people mouseover some menu headers, the background image is meant to change when they hover their mouse.

    In FireFox, the background image is retreived from the browser's cache, but it is loaded individually each time in Internet Explorer.

    The CSS for the rollover is:
    Code:
    a.switch,
    a.switch:link,
    a.switch:visited {
    	height: 17px;
    	text-align: right;
    	color: #EFE8DD;
    	background-color: #5C4733;
    	font-size: 11px;
    	font-weight: normal;
    	margin: 0;
    	padding: 2px;
    	text-transform: lowercase;
    	text-decoration: none;
    	cursor: pointer;
    	background-image: url(/global/styles/barshade.jpg);
    	background-position: center;
    	background-repeat: repeat-x;
    }
    a.switch:hover,
    a.switch:active {
    	color: #000;
    	background-color: #A47C5B;
    	text-decoration: none;
    	background-image: url(/global/styles/barshade_h.jpg);
    	background-position: center;
    	background-repeat: repeat-x;
    	}
    The problem can be seen one the right hand menu at http://seriocomic.com/rhetoric

    Hopefully somebody can tell me where I am going wrong or explain the bug.

    M.

  2. #2
    SitePoint Addict Brak's Avatar
    Join Date
    Jul 2004
    Location
    Central Coast, CA
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The solution is to create one rollover image. With the hover/regular right on top of each other. Then, instead of chaning the background-image, change the background-position. Keep it at top left with your regular at top left, then for hover, change it to bottom left with your hover state on the bottom.

    Confused? Check it in action at www.neathdesign (navigation bar, example image here, or a quick tut I found at http://www.tanfa.co.uk/css/examples/...no-preload.asp
    Studio Rockstar's Blog - A journey to quitting the dayjob.

  3. #3
    Motivated Procrastinator seriocomic's Avatar
    Join Date
    Jan 2003
    Location
    Outside the bubble
    Posts
    1,275
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks, I tried all the methods, but still no dice, mostly due to the reasons shown at the bottom half of this page:

    http://www.fivesevensix.com/studies/ie6flicker/

    I have temporarily suspended any background images from IE using the child selector hack until I can get this sorted...

  4. #4
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Tried clearing out your cache for IE?

  5. #5
    SitePoint Member webler's Avatar
    Join Date
    Jan 2004
    Location
    Niterói
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Explorer was requesting the same image, used as a "background sprite", ALA-style, multiple times to build a menu in a website my company's been working on.

    Apparently it's a feature, not a bug. The article below offers (meager) explanations and a (pitiful, but working) solution.

    http://support.microsoft.com/default...b;en-us;319546


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •