Tuesday, September 12, 2006

IE CSS Rollovers - Revisited

Haven't had much to say lately, as I have been busy trying to wrap a project. However, I felt like this was worth taking some time to share it.

Basically, the IE Rollover Cache Bug came back to bite me today. Now, there are many documented solutions to avoiding that annoying flicker in IE when you change the background image of a hyperlink. My personal favorite is this one. But what about the browser activity indicators that are stopped and reset when you mouse out of the button? I see far less discussion of that issue, and know of no solution expect for the one I'm about to document.

Let me describe this in a little more detail. If you click a hyperlink that has a background image, all of Internet Explorer's browser activity indicators will be stopped and reset when you move your mouse off of that hyperlink. By 'browser activity indicators' I mean the 'spinner' (wavy window animation) in the upper right corner of the browser, as well as the status bar at the bottom of the browser (in WinXP, this is green & segmented). This gives the impression that the page load is complete when in fact it is not - the requested page will be displayed eventually. This happens regardless of whether you are changing the background-image property. If you change ANYTHING about that hyperlink (border-colors, sizes, text-decoration) the activity indicators will be interrupted. I can readily confirm this on IE 6, and I'm pretty sure it happens in IE 5.5. IE 5 seems to be immune. I hope to god it's fixed in IE 7.

Typically, this is not a problem because page loads happen pretty quickly these days. But if your link is submitting a form and the server takes some time responding, this can get to be quite a problem. Thinking the form submission has quietly failed, the user will click the button repeatedly, badgering your server with extra requests. Bad for the user, bad for you.

Onward to the solution. I was almost ready to give up and ban image rollovers entirely, when it occured to me that there was one last trick I hadn't tried yet. All you have to do is display the image using Microsoft's proprietary DirectX filters instead of the normal browser pipeline. Here's what you do:

/* Set up your rollover as normal */
a.MyButton{

background:url('Images/MyButton.gif');
}

a.MyButton:hover{
background:url('Images/MyButtonOver.gif');
}

/* Now hack for IE (using star hack for brevity here)*/

* html a.MyButton{
background:none;

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='Images/MyButton.gif',
sizingMethod='image');
position:relative;
cursor:hand;
}

* html a.MyButton:hover{
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='Images/MyButtonOver.gif', sizingMethod='image');
}


That's basically it. Since the problem only occurs in IE, I'm fine with using a Microsoft proprietary solution. Now, AlphaImageLoader comes with its own set of caveats and gotchas, not the least of which is that you can't position the image at all. Sometimes I need to. As a workaround for that, I put an empty div in my hyperlink to which I apply the image instead, and then position the div with absolute positioning. Another point to be aware of is that sometimes hyperlinks will not function if they have an image applied in this way. However, position:relative should cure that.

I hope this helps some poor frustrated soul. As always, please post any questions or comments, and I'll do my best to find the answers.

Was this post helpful to you? If so, please consider making a small donation to keep this blog going.

38 Comments:

Anonymous Anonymous said...

There's a simple JS fix for this ie6 bug.

Check my blog http://misterpixel.blogspot.com/2006/08/title-well-its-done-my-ie6-background.html

and my site http://www.mister-pixel.com
for details.

1:32 PM  
Blogger tom said...

Thanks Dan, and well done!! Does your solution fix the interruption of browser activity indicators?

7:19 AM  
Anonymous Asa Hicks said...

Absolutely brilliant – thanks for the solution! This has been a pain on several developments I’ve done and I’ve been very frustrated by the lack of write-up about this problem…until now! Personally though, I found sizingMethod='scale' is a good one for 1px width repeating images which can be stretched to fill the element.

8:24 AM  
Blogger tom said...

Asa, thanks for pointing out sizingMethod = 'scale'. That's quite a useful twist on the technique!

8:31 AM  
Anonymous Anonymous said...

Check my site http://www.mapmyevent.com/

It uses css

6:32 PM  
Blogger Tom said...

.....(\_........_/)
......)..(.......)..(
......(...(......)..)
.......)....(....)..(
.......(....(....)..)
.........(\\.--.//)
.......O))`.6..6.'((O
........../.........\
..........(..)....(..)
.........`(_c__c_)`
.............`\T/`

He likes this site !

6:32 AM  
Anonymous Anonymous said...

u could try this solution:
Use a div to wrap the background images like:
<div class="imgLoader"><img src="xxxx" alt="" /></div>
and put the div out of the page to make it disappeared(Do not use display:none)
.imgLoader{
position:absolute;
top:-1000px;
left:-1000px
}
I don't know if it works.

10:32 PM  
Blogger hax said...

AlphaImageLoader can cause a issue for the users who need IME (Input method editor) such as Chinese, Japanese...

12:32 AM  
Blogger kevio said...

威創牙醫診所除了提供優質的植牙技術外還提供假牙|矯正|牙周病治療,是值得您信賴的牙醫診所

獅王紋身工作室提供專業的無痛刺青技術,獅王紋身在世界TATTOO大賽中,獲獎無數,獅王紋身給您最時尚的作品。

陳駿逸皮膚科診所提供了治療痘痘的服務,皮膚雷射權威,包括雷射脈衝光除斑等,讓您回復青春蘋果臉。

ck皮件處理棧提供專業洗包包|洗鞋子|各式皮件修理保養疑難雜症都有服務,清洗包包專門店讓您的包包、鞋子、永遠保持最新的況態唷。

杏儒中醫診所提供了糖尿病的治療。

seo大師e王國幫您的網站輕鬆在您的行業裡站上第一頁,e王國的關鍵字行銷是您的好幫手,包括關鍵字自然排序、都能讓您獲得完美的效果,以目前的網路行銷不外乎是關鍵字自然排序為主、而關鍵字行銷seo又是e王國的強項讓e王國幫您征服網海。

4:15 AM  
Anonymous 花蓮民宿 said...

花蓮|花蓮民宿|花蓮|花蓮民宿|花蓮旅遊|花蓮民宿|花蓮美食|花蓮旅遊|花蓮黃頁網路電話簿|花蓮入口網|花蓮民宿黃頁
花蓮旅遊|花蓮美食|花蓮飯店|花蓮住宿|花蓮民宿|花蓮民宿|花蓮|花蓮|
花蓮|花蓮民宿|花蓮旅遊|花蓮美食|花蓮住宿|花蓮飯店|花蓮旅館|花蓮|花蓮民宿|花蓮民宿推薦|花蓮民宿市區|花蓮民宿王|花蓮民宿網|花蓮民宿資訊網|花蓮民宿悠遊網|花蓮民宿交流網|花蓮海景民宿|花蓮海邊民宿|花蓮海岸民宿|花蓮旅遊民宿|花蓮|花蓮旅遊|花蓮廣告|花蓮民宿|花蓮房屋|花蓮汽車旅館|花蓮派報|花蓮飯店|花蓮派報|花蓮旅館|花蓮美食|花蓮餐廳|花蓮小吃|花蓮名產|花蓮工作|花蓮新聞|花蓮租車|花蓮入口網|花蓮旅遊|花蓮旅遊|花蓮旅遊景點|花蓮旅遊|花蓮旅遊景點|花蓮民宿|花蓮旅遊|花蓮房仲|花蓮旅遊景點|花蓮美食|花蓮餐廳|花蓮小吃|花蓮名產|花蓮縣長|花蓮租車旅遊網|花蓮行易旅遊資訊網|

2:00 AM  
Blogger kiloi said...

nike tnEnter the necessary language
translation, up to 200 bytes winter, moves frequently in Chinanike chaussures showing that the deep strategy of the Chinese market. Harvard Business School, tn chaussures according to the relevant survey data show that in recent years the Chinese market three brands, Adidas, mens clothingpolo shirts Li Ning market share at 21 percent, respectively, 20%, 17%. The brand is first-line to three lines of urban competition for mutual penetration. Side of theworld,announced layoffs, while China's large-scale facilities fists. The sporting goods giant Nike's every move in the winter will be fully s strategy. Years later, the Nike, Inc. announced the world's Fan

9:01 PM  
Blogger bing shen said...

Men's Lacoste Polo Shirts Men's RL Striped Polo Shirts Women's Lacoste Polo Shirts Men's polo shirts Men's polo shirts Men's polo shirts 4 polo shirts Women's polo shirts 21 polo shirts Men's polo shirts Women's LACOSTE 5 PCS of Ralph Women's lacoste polo shirts

5:52 PM  
Blogger bing shen said...

Fendi handbags Givenchy handbags Gucci handbags Hermes handbags Jimmy Choo handbags Juicy Couture handbags lsabella Fiore handbags Miu Miu handbags Mulberry handbags Prada handbags Tods handbags Versace handbags Yves Saint Laurent handbags

5:53 PM  
Blogger bing shen said...

handbags Louis Vuitton Vuitton handbags Balenciaga Balenciaga Bally handbagsBottega Veneta handbagsCartier handbagsChanel handbagsChloe handbagsChristian Dior handbagsCoach handbagsDolce Gabanna handbags

5:53 PM  
Blogger bing shen said...

hair straightenersugg bootscheap handbagscheap bagscheap pursetntattoo wholesalejackets worldjackets cartmen's clothingwomen's clothing

5:53 PM  
Blogger bing shen said...

cheap hair straightenerscheap flat ironsexy lingerie storepolo shirtsnorth face jacketschi straightenerpink chichaussures puma chaussure puma

5:53 PM  
Blogger miyuki said...

ralph lauren polo shirtssport shoes
18boots
clothes sportspolos shirtgilletteclothes sportspolos shirtgillettetrade chinaHAIR STRAIGHTENERS
wedding dresses
英文推广men's jacketpoloshirtsstortKTO

1:45 AM  
Blogger miyuki said...

chaussures pumaquelle paire de chaussures pour hommes choisir?!? La réponse est toute simple:chaussures nike une paire de baskets en partie vernies. du 17ème au 5ème rang, qui lui offre une place dans un top 5 largement tn requindominé par les sites de vente de produits high-tech. Le site de réservation d'hôtels Bookings.com gagne pour sa part 47 places et atteint le 8ème rang.

1:45 AM  
Blogger miyuki said...

puma basketBlack is lubricious, can match, but young people don't want to match with brunetpuma femmes, can try even cardigan knitting coat will appear lively cap. Boys and girls, puma CATcan choose to choose self-cultivation

1:46 AM  
Blogger miyuki said...

mens clothing men's sweate, cheap columbia jackets, lacoste sweater, ralph lauren polo shirts,ski clothing. Free Shipping, PayPal Payment. Enjoy your shopping experience on mensclothingstore.Us
nike max shoes, one of the world's three major brands of Puma shoes, will build its factory in Lanshan county next year, Hunan province. Taiwan Diamond Group of Footwear production chooses its base in Lanshan county, which is one of top 500 companies in the world.

1:46 AM  
Blogger miyuki said...

Paypal payment. Free shipping. cheap ugg boots ,UGG Online Store,australian cheap ugg boots ,ugg boots australia,UGG Online Store,black ugg boots,ugg boots on sale,cheap uggs. Very Cheap!Vente en ligne de discount chaussure sport : chaussure puma, chaussure nike, chaussure tn, nike tn,nike requin, puma future cat, nike shox torch, ugg boots et plus.

1:46 AM  
Blogger miyuki said...

ralph Lauren polo shirts , Lacoste Polo Shirts, Burberry Polo Shirts.wholesale Lacoste polo shirts and polo ralph laurenwith great price. clothingol.com offers lot of 10 lacoste polo shirts and lot of 20 cheap polo shirts. clothingol.com offers classic fit polo shirts. polo clothingnike air max ltd is divided into sports life and NIKE NIKENIKE air shoes sports mark for a big hook (swoosh)NIKE life (NSW) mark is a hook NIKE swoosh (English) +Sometimes life will sell NIKE sports channel,cheap puma mens shoes , enjoy shopping!

1:46 AM  
Blogger j said...

ralph lauren poloburberry polo shirtthe north face jacketcolumbia jacketspyder jacketed hardy clothing ed hardy clothesed hardy shirts ed hardy t-shirts ed hardy sunglasses ed hardy mensed hardy womens Wholesale HandbagsCheap HandbagsWomens HandbagsCheap PursesDesigner HandbagsTennis RacquetTennis Racket
cheap tennis racquet
tennis racquet discount
cheap tennis racket
discount Tennis Rackethead junior tennis racketwilson tennis racquet
wilson tennis racket
head tennis racketbabolat tennis racket

1:56 AM  
Blogger polo shirt said...

Thank you so much!!polo shirt men'ssweate,cheap polo shirts cheap columbia jackets, lacoste sweater, ralph lauren polo shirts,ski clothing. Free Shipping, PayPal Payment. Enjoy your shopping experience on mensclothingus.com.We have mens polo shirts.

2:58 AM  
Blogger polo shirt said...

God bless you!I really agree with your opinions.Also,there are some new fashion things here,gillette razor blades.gillette mach3 razor bladesfor men.As for ladies,gillette venus razor blades must the best gift for you in summer,gillette fusion blades are all the best choice for you.

2:59 AM  
Blogger polo shirt said...

Awesome!!!Best wishes for you !!wholesale polo shirts is the father of the summer should be prepared to most commonly used item, it has both style and shape of polo clothing, and vest with a random function, so that in the short-sleeved apply to both on many occasions, the pink and black color men's polo shirts brought into effect, lightweight cotton, linen texture to demonstrate masculine temperament and sense of fashion exhaustively. polo shirts for sale

3:00 AM  
Blogger polo shirt said...

fantastic!God bless you!Meanwhile,you can visit my China Wholesale,we have the highest quality but the lowest price fashion products wholesale from China.Here are the most popular China Wholesale products for all of you.Also the polo clothing is a great choice for you.

3:01 AM  
Anonymous lljj said...

Wonderful!!You can find the father who desire fashionable, intellectual cheap polos simultaneously, you can find a psychologist to study the most harmonious of families should be pink mens clothing, so do not want to take the mature route for the father, buy cheap polos, the learn from such a walk in between the formal and casual styling, refined style to create a sense of mild authority.

3:02 AM  
Anonymous lljj said...

Men's polo shirts was the shirt of choice for diverse groups of teenagers
Brightly coloured polo shirts can make you look like a Day-glo dirigible.
Wonderful!You can find the father who desire fashionable eg,uggs fashion,you can enjoy uggs online here, intellectual polo shirt simultaneously

3:04 AM  
Anonymous lljj said...

Do not mean bad.Thank you so much!I just want to show some fashion things to all of you.I like ugg boots.black ugg boots,Loose T-shirt or super-size clothing are the best partners, it allows you to exercise in relax.The classic style cheap uggs may fit someone.You should never design yourself into a monster of no golden section point because beautiful cheap ugg boots.Also,for ladies, in winter sheepskin boots are the excellent choice.ugg boots on sale

3:06 AM  
Anonymous lljj said...

Perfect!!You are a outstanding person!Have you ever wore chaussures puma, puma CAT,Puma shoes store gives some preview of puma speed cat,puma basket, puma speed, puma speed and other puma shoes. These puma sport items are at store recently and available for anyone.

3:07 AM  
Blogger sky22d said...

For the polo shirts, many people loveralphlaurenpoloshirtscheappolos but hate it. This brand is favorite, products like his style; the same is hard not to develop the Lacoste polo shirts brand has been cheap lacoste polos the Asian market. There are stores to buy wholesale polo shirts, However, ralph lauren polo shirts is too many fakes. It will be out of shape cheap ralph lauren polos.

8:40 PM  
Blogger sky22d said...

discount ralph lauren polos are one of the highest in demand cheappolos because along with protecting your skin it also enhances your looks. These polo clothingare the in-thing in today's ralph lauren polo shirts fashion world and among the youngstersdiscount polossummer polospolo shirts whosale.

8:42 PM  
Blogger sky22d said...

It was just a ed hardy clothing with a colourful design of three wolves howling at the moon. Now, it’s a viral sensation with its own ed hardy clothes, videos and an exploding following that has swamped a tiny New ed hardy shirts. Longer arms extend the yoke farther up each side of the babolat pure drive. These arms - or Side Drivers wilson k six- create a stiffer construction and distribute maximum power from the base of the yoke to the middle of the head microgel.

8:43 PM  
Anonymous tea said...

Advanced precision comes from the connection of the Side prince-o3-tour to the cheap tennis racquets at three o'clock and nine o'clock, which results in less torque (or twisting) at polo logopolo shirts in voguepolo women clothinged-hardy shirtsed-hardy sunglassesimpact.

8:48 PM  
Blogger sky22d said...

In a womens clothing boutique store, several girls were trying on fashionable new polos men poloswomen polos. In addition to flower dresspolo fashionembroodered polostennis racketsclothing poloclothingedhardyshirtedhardyclothingedhardysummer ed hardy clothingcheap shirtsed hardy brandcheap ed hardypolo shirts cheapcheap tennis racketsdiscount tennis racketsralphlaurenpoloshirtscheappolospolo fashion, flower shirt, flower jacket, even with the scarf pattern is all kinds of flowers.

8:50 PM  
Blogger as said...

I like your blog. Thank you. They are really great . Ermunterung ++ .
Some new style Puma Speed is in fashion this year.
chaussure puma is Puma shoes in french . Many Franzose like seach “chaussure sport” by the internet when they need buy the Puma Shoes Or nike max shoes. The information age is really convenient .




By the way ,the nike max ltd is really good NIKE air shoes ,don’t forget buy the puma mens shoes and nike air max ltd by the internet when you need them . Do you know Nike Air Shoes is a best Air Shoes . another kinds of Nike shoes is better . For example , Nike Air Rift is good and Cheap Nike Shoes .the nike shox shoes is fitting to running.



Spring is coming, Do you think this season is not for Ugg Boots? maybe yes .but this season is best time that can buy the cheap ugg boots. Many sellers are selling discounted. Do not miss . Please view my fc2 blog and hair straighteners blog.
.thank you .


I like orange converse shoes ,I like to buy the cheap converse shoes by the internet shop . the puma shoes and the adidas shoes (or addidas shoes) are more on internet shop .i can buy the cheap nike shoes and cheap puma shoes online. It’s really convenient.
Many persons more like Puma basket shoes than nike air rift shoes . the Puma Cat shoes is a kind of Cheap Puma Shoes .
If you want to buy the Cheap Nike Air shoes ,you can buy them online. They are same as the Nike Air shoes authorized shop. Very high-caliber Air shoes and puma cat shoes . the cheap puma shoes as same as other.




polo shirts

ralph lauren polo shirts
chaussure puma

chaussure sport



chaussures puma

puma CAT

ed hardy clothing

ed hardy clothes



ed hardy womens

ed hardy sunglasses

ugg boots

cheap ugg boots

12:32 AM  
Blogger fdg said...

http://delii.blog.drecom.jp/
http://ameblo.jp/nikeairshoes
http://eretertyt.cocolog-nifty.com/blog/

7:07 AM  

Post a Comment

Links to this post:

Create a Link

<< Home