The main advantage of using the display: table method is that you don’t need to set a width on any of the elements which means that you can set a bit of margin or padding on the top level list items and you could then add and remove list items (within reason) without having to change any of your CSS.īut, of course, for the effect that I’ve been trying to achieve with these examples, I’ve had to set a width so that the top level list items and their dropdown submenus are the same width. Of course, if anyone has any thoughts on how to make it work better cross browser, I’d love to hear them. It also doesn’t look quite right in Mac browsers but as it doesn’t really have any practical, real world use due to its Opera limitations, I haven’t investigated ways to correct this. The solution there was to float the inline element but, of course, to do that means that the menu is no longer centred. I won’t go into too much detail about the workings of this example because, while it works fine in Firefox and IE6 & 7, it fails rather badly in Opera 8.5 & 9 (it’s actually better in 8.5) on Windows which seems due to a bug in Opera which affects absolutely positioned (the dropdowns) elements inside inline (the top level list items) and is similar to a problem I had with image replacement and buttons. …Elements having both hasLayout and display:inline work similarly to the standard inline-blocks: they flow horizontally like words in a paragraph, are sensitive to vertical-align, and apply a sort of shrink-wrapping to their contents (which can include block elements.)Īs mentioned, IE understands display: inline-block when applied to inline elements which is where #nav a The second one resets the display as desired, without taking back hasLayout… With IE, this only works for elements that are already inline, so what’s actually going on here is best described by Bruno Fassino: An inline block is one that is placed inline, on the same line as adjacent content, but behaves like a block.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |