Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Banned
    Join Date
    Mar 2007
    Posts
    1,523
    Thanks
    116
    Thanked 0 Times in 0 Posts

    Internet Explorer display:inline-block; not working in IE7

    hi,

    I have a list:

    Code:
    <style>
    ul li { display:inline-block; }
    </style>
    
    <ul>
    <li>link 1</li>
    <li>link 2</li>
    <li>link 3</li>
    </ul>
    the inline-block makes my list appear in a horizontal line (on the same line)
    whereas in IE my list is is on separate lines?!

  • #2
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Does your page have a correct DOCTYPE declaration?

    Have you validated the HTML and CSS?
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #3
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,694
    Thanks
    0
    Thanked 232 Times in 227 Posts
    Hi there jarv,

    I believe that this is the "hack" for IE7...
    Code:
    element {
        display:inline-block;
        *display:inline;
        zoom:1;
     }
    
    ...but haven't tested it recently, as IE8 is as far back as I normally go.

    If that does not work, try swapping the positions of "display:inline-block;" and "*display:inline;"

    coothead
    Last edited by coothead; 08-09-2012 at 03:01 PM. Reason: added an afterthought


  •  

    Posting Permissions

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