Creating lists in IE 8 with CSS

Question

I am new to CSS and I am running into this problem with lists in IE8. I am creating an unordered list with several li elements with two divs called left and right.

HTML code -

    <ul>
        <li>
             <div class="left">
                 <p>ONE</p>
             </div>
             <div class="right">
                 <p>TWO</p>
             </div>
        </li>
        <li>
             <div class="left">
                 <p>THREE</p>
             </div>
             <div class="right">
                 <p>FOUR</p>
             </div>
        </li> 
   </ul>

I essentially want to create a list with two columns. My CSS -

    ul {
       list-style-type: none;
       padding: 0px;
       margin: 0px;
   }

    ul li {
      height: 40px;
      width: 800px;
      border: 1px solid;
   }



ul li div.left, div.right {
      display: inline-block;
      *display: inline;
      zoom: 1;
   }

Using the above CSS and html, I get a list with two columns with a height a 40px. In firefox and chrome, it shows up just as I wanted, but in IE it is a different story.

In IE, I see the same list but the only problem is spacing. In IE, the divs left and right sit at the top of its parent li whereas in Chrome and Firefox they elements sit in the middle which I is what I want.

How do I get this to happen in IE? In IE, my divs cling to the top of the li element, with no padding in between. Do I need to add something else in my CSS? If anyone can help, it would be great.

Thanks.

Looks identical in FF and IE on Win. Did you check if compatibility mode is enabled on your IE browser? — Hazem Salama, Sep 20 '12 at 02:47
I am using Windows also, but how do you check if compatibility mode is enabled? — user1684636, Sep 20 '12 at 04:05
You may be using `quirks mode` which is the main reason for compatible issues in IE. http://stackoverflow.com/questions/6529728/html5-doctype-putting-ie9-into-quirks-mode — Mr_Green, Sep 20 '12 at 04:52
Make sure you have a valid doctype at the top of your HTML which should force your browser to load the code in standards mode and it shold be ok — Andrew, Sep 20 '12 at 08:34
@user1684636 there is an icon that would appear next to the reload and cancel load buttons to the right of the URL bar, like a torn paper — Hazem Salama, Sep 20 '12 at 12:08

score 0 · Answer 1 · answered Sep 20 '12 at 08:37

0

You could also float you boxes, and give them a height matching the li. Inline block doesn't work as expected in all browsers/versions.

ul li div.left,
ul li div.right {
    float: left;
    height: 40px;
    width: 400px;
}

answered Sep 20 '12 at 08:37

Andrew

12,212
1
30
45

Creating lists in IE 8 with CSS

1 Answers1