CODEWITHSUNDEEP
cssbrowserinternet-explorer-7
Pavan Kumar
Pavan Kumar

Reputation: 1686

Floated:right li element is breaking in the ie7 navigation

This the link http://jsfiddle.net/a6K3f/1/.

I need to have one link in right aligned in the navigation menu. Below code is fine in all major browser except in ie7. Right aligned 'Link4' is breaking down. I know it works if i add floated:right li as first li in ul. But i cannt add as first li. Becasue i have written pseduo classes first-child for that.

I tried many trials but not yet resolved. Can anybody please help in my concern issue. Thanks

HTML:

<ul>
    <li>Link1</li>
    <li>Link2</li>
    <li>Link3</li>
    <li class="f-Right">Link4</li>
</ul>

CSS:

body {
    font-family: arial;
    font-size: 13px
}
ul {
    list-style: none;
    margin: 0;
    padding: 0
}
ul li {
    display: inline-block;
*display:inline;
    zoom: 1;
    border: 1px solid #ccc;
    margin: 0 1px;
    padding: 3px
}
.f-Right {
    float: right
}

Upvotes: 0

Views: 33

Answers (1)

Falguni Panchal
Falguni Panchal

Reputation: 8981

Like this

please write *float:left; and remove 

*display:inline;

demo

css

body {
    font-family: arial;
    font-size: 13px
}
ul {
    list-style: none;
    margin: 0;
    padding: 0
}
ul li {
    display: inline-block;
    *float:left; /* <--hack for IE **/
    zoom: 1;
    border: 1px solid #ccc;
    margin: 0 1px;
    padding: 3px
}
.f-Right {
    float: right
}

Upvotes: 1

Related Questions