skip to content
Website Builder

100% clickable Sliding doors - centered

2nd February 2007

CSS play Support


CSS play Recommend

Free, practical CSS menus, layouts, and examplesPSD to HTMLSitegrinderuk white label shopping carts for resellers



Information

Since putting up my previous demonstration I have had many requests asking 'how do I center this menu on my page'.

With it being a float-left menu this is a little more difficult than normal, and requires two different methods, one for Firefox, Opera, Safari, etc., and of course another for IE (including IE7).

Non-IE browsers use display:table and table-cell, whereas IE uses display:inline-block and display:inline.

We use display:inline-block; but then declare display:inline; becauset IE only recognises the inline-block style on inline elements. Try leaving out the display:inline; in the IE style to see what happens.

I have moved the IE only style into conditional comments which target all IE versions less than and equal to IE7, you never know IE8 may work with display:table; and also to make the css validate as the w3.org validator does not yet recognise display:inline-block; as a valid style.

Please note that this is based on the 'A List Apart' sliding doors and the :hover state does not work in IE5.x or IE6. There is a workaround to this on the ALA website but it does require extra markup.




Copyright

You may use this method on your personal 'non-profit' web site without seeking my permission. A link back to CSSplay is always appreciated.

Commercial usage is also permitted without seeking approval, but I would ask that a donation is considered to support my work on CSSPlay.

If you are having problems integrating any of my demonstrations into your website then I now offer a service to fault find and correct any errors that you may have introduced. Please email me for more information.




CSS play Recommend

CSS play Testimonial

"The citroen.co.uk web site uses
CSS play code for the site drop down menus.
This code works seamlessly in IE 6 & 7, and is an excellent solution to the Creative requirements of the site."

Damon Clark - Brandwidth