SitePoint Sponsor |
|
User Tag List
Results 1 to 5 of 5
-
Oct 15, 2007, 16:21 #1
- Join Date
- Oct 2007
- Posts
- 2
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
HOW TO: display inline block question
Dear All,
I am developing a sample site:
http://orbitalnets.com/previews/orbitalnets/
In IE6 and IE7 the 4 blue right top menu icons are displaying fine but in Firefox and Safari that part is just not being displayed.
#helpnav
This is a list item with the display set at inline-block. With background-images and background position hovers.
The only way to make this appear is to change the display property from display: inline-block to display: block. But then the list will not appear inline. It will then be displayed vertically. Is there a way to make them appear as inline-block in FF and safari just as it it displaying now in IE6 and 7?
Let me know.
Regards,
Dwayne
-
Oct 15, 2007, 18:04 #2
- Join Date
- May 2007
- Location
- Newcastle, Australia
- Posts
- 3,718
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
How about :
Code:#helpnav { width: 120px; height: 23px; float: right; clear:right; } #helpnav ul li { margin: 2px; float:left; list-style: none; } #helpnav ul li a { float: left; width: 20px; height: 20px; border: none; }
-
Oct 15, 2007, 20:51 #3
The CSS 'inline-block' does not work in Firefox, and I guess Safari, but you can try -moz-inline-block but that's not exactly the same as the CSS version so see if that works. If not, I can look up my work-alike later.
-
Oct 16, 2007, 00:55 #4
- Join Date
- Oct 2007
- Posts
- 2
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Dear Centairi,
This worked! So in the future to have image inline lists always float them to the left instead of dislplaying the <a> inline-block?
Thx again,
Dwayne
-
Oct 16, 2007, 05:37 #5
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Hi Dwayne,
This needs clearing up a little(although it is complicated)
As the Dr said above Firefox doesn't support display:inline-block although Opera and Safari do, but Firefox does have a "Vendor Specific extension "which works similarly as already pointed out above..
IE only supports inline block on inline-elements such as anchors.
Block level elements can be made to behave like inline-block in IE by declaring them as inline and then forcing "hasalyout" (e.g. zoom:1.0).
In fact it seems the only thing that display:inline-block does in IE is to force "haslayout" on the element anyway as inline elements can be made display:inline-block simply by applying "haslayout" to them without even using display:inline-block.
Most time authors who use display:inline-block are merely forcing "haslayout" on the element and not really wanting inline block behaviour anyway.
The simplest solution is to float the element instead and forget about display:inline-block unless you have understood all I said above in full
Is that clear as mud
Bookmarks