CODEWITHSUNDEEP
cssinternet-explorerinternet-explorer-7internet-explorer-6
CyberK
CyberK

Reputation: 1578

CSS li item not showing correct in IE7

I have a < ul > element with the following CSS class:

.css_admin_ul {
    background-color: #ffffff;
    padding: 12px;
}

There are 2 < li > elements with the following CSS:

.css_admin_li {
    display: inline-block;
    width: 50%;
    vertical-align: top;
    margin: 0;
    padding: 0;
}

The problem is that the elements show fine in IE8 and Firefox, but not in IE7.

The layout supposed to be like this:

-------------------------------------------
|     CONTENT LI 1    |    CONTENT LI 2   |
-------------------------------------------

That's the case in IE8, Firefox and Safari, but in IE7 this shows up like:

-----------------------
|     CONTENT LI 1    |
-----------------------
|     CONTENT LI 2    |
-----------------------

So they are not in 1 line next to eachother.

Who knows what's causing this issue and how I can fix this?

Thanks in advance!

EDIT:

The css where the UL is in is:

.css_div_tabcontrol_content{
 padding: 12px;
}

Upvotes: 0

Views: 1375

Answers (3)

nivanka
nivanka

Reputation: 1372

you should make it such I think.

.css_admin_ul {
    background-color: #ffffff;
    padding: 12px;
    overflow: hidden;
}

.css_admin_li {
    float: left;
    width: 50%;
    vertical-align: top;
    margin: 0;
    padding: 0;
}

there is no point in adding float: left; and display: block to the same element.

Upvotes: 0

annakata
annakata

Reputation: 75794

inline-block is buggy in IE7.

I would advise you to use either float:left; as the simple solution (probably then applying overflow:auto; to the UL), or use display: inline; and some other property which confers the magical voodoo hasLayout - traditionally zoom:1 or a fixed height/width dimension.

Upvotes: 1

Aditya Manohar
Aditya Manohar

Reputation: 2274

Possibly,

display:inline;

should do the trick.

Or you could float:left; the <UL> and also float:left; all <LI>s within.

You can have a look at it here.

Upvotes: 0

Related Questions