SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Oct 2007
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy 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

  2. #2
    SitePoint Wizard bronze trophy Centauri's Avatar
    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;
    }

  3. #3
    SitePoint Wizard drhowarddrfine's Avatar
    Join Date
    Aug 2005
    Posts
    3,438
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  4. #4
    SitePoint Member
    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

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    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

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •