SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Addict Scott Blanchard's Avatar
    Join Date
    Sep 2010
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Inline-block workaround for IE7 list items

    In the markup below, I'm applying a display:inline-block to the list items to create a nice column layout.

    Since IE7 is does not obey inline-block, what's the required CSS to make this work in IE7?

    HTML Code:
    <ul class="column-grid" style="list-style-type:none;margin:0;padding:0">
    	<li style="display:inline-block;padding:10px 10px 10px 0;text-align:center;">
    		<a href="#" ><img src="" style="" class="ce4-cat-img" /></a>
    		<a  style="display:block;margin-top:5px;" href="#">Chai Tea</a>
    	</li>
    	<li style="display:inline-block;padding:10px 10px 10px 0;text-align:center;">
    		<a href="#" ><img src="" style="" class="ce4-cat-img" /></a>
    		<a  style="display:block;margin-top:5px;" href="#">Chai Tea</a>
    	</li>
    </ul>

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,339
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    IE6/7 understand inline-blocks on inline elements but not on block elements. For block elements you just need to set the element to display:inline and then apply a haslayout trigger for inline elements (such as zoom or strangely enough display:inline-block).

    However you can't apply display:inline and display:inline-block in the same rule as they cancel each other out

    You need first to declare display:inline-block and then subsequently declare display:inline.

    Code:
    .column-grid li{display:inline-block}
    *+html .column-grid li{display:inline}/* ie7 inline block fix - keep separate from other rules and follow original - not before it*/
    * html .column-grid li{display:inline}/* ie6 inline-block fix - keep separate from other rules/
    You can't do this in your inline styles so remove your inline styles to an external class.


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
  •