Comments on: Bulletproof CSS Sliding Doors

By: Adrian von Gegerfelt

Adrian von Gegerfelt — Wed, 03 Feb 2010 15:06:04 +0000

Use Adobe Fireworks to save the PNG-8 images with alpha transparency instead (photoshop can only save with index transparency). Then the semi-transparent pixels will be ignored in IE6.

This way you only need one image that will work on all browsers, just look slightly jaggy in IE6.

By: Brad

Brad — Wed, 30 Sep 2009 18:08:59 +0000

I just used your sliding door solution with transparent images, and it worked like a charm! Thank you so much for posting this; it honestly made my day.

By: Techflaps | 15 Tutorials on Creating CSS Navigaton Menus with Sliding Doors Effect

Thu, 20 Aug 2009 14:30:49 +0000

[...] Bulletproof CSS Sliding Doors [...]

By: Brandon

Brandon — Sun, 16 Aug 2009 18:34:22 +0000

I cannot seem to get the hover (swapped images) to work.

What happens is that the natural state do not line up with the hover state (in fact the image for the hover state is pushed a ways to the right. (additionally the left side hover image; my special shape corner; does not even become placed.)

Am I suppose to add a Display: block or something to get both the images to align without any issue?

Thanks,
B

By: 75 Amazing CSS Navigations and Jquery Examples | Design Dazzling

75 Amazing CSS Navigations and Jquery Examples | Design Dazzling — Sat, 08 Aug 2009 21:56:45 +0000

[...] Bulletproof CSS Sliding Doors [...]

By: Richard

Richard — Thu, 23 Jul 2009 04:53:16 +0000

Hello, when I try the code on my WordPress, everything works fine except that the current page is not highlighted. More detail here: http://wordpress.org/support/topic/292830?replies=1#post-1148263
What am I doing wrong?

By: Jonathan Shroyer

Jonathan Shroyer — Wed, 15 Jul 2009 02:25:54 +0000

Very nicely done. If you want to take it one step further (which I plan on doing soon) is to remove the flicker in IE6. You can do that by loading the hover state under it and doing display:none when hovered over to reveal the hover state. Hopefully it can be done with this method since it’s so clean.

By: letscounthedays

letscounthedays — Mon, 22 Jun 2009 21:14:31 +0000

Great article, thank you for sharing. I've used the sliding doors technique quite a bit in my freelance web design work over the past few years and it is definitely a trick of the trade. Highly recommend to anyone new to web design or CSS.

By: 24 CSS (in some cases with jQuery) Navigation and Menu Tutorials : Speckyboy Design Magazine

Mon, 08 Jun 2009 14:14:42 +0000

[...] Bulletproof CSS Sliding Doors [...]

By: Erick

Erick — Thu, 04 Jun 2009 20:55:44 +0000

Question. Have you ever tried adding a down effect using :active ?
I tried what is shown on the link below.
It works great but it has a problem on IE8. I know IE8 sucks but I kinda need some help resolving this.
Give it a try on FF and see how it works as it should there. On IE8 it does not respond when you press on it, actually it you press on the right end of the button you’ll notice how it goes down when you press it. The problem seems to be the tag, that’s where IE8 doesn’t want to respond as it should.
http://www.chidissimmo.com/myButton

Thanks in advanced for any help. =)