CSSPLAY
Doing it with style
Doing it with style
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.
You may use this method on your personal 'non-profit' web site without seeking my permission.
A link back to CSS PLAY 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 CSS PLAY.
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.
Your donations keep CSS PLAY running.
If your donation is for the use of a demo then please email me with the demo url after making your donation.
