Have Geek Brain

How to remove margin from last li, in pure CSS with IE 6 support?

In this condition, it is possible not to apply margin-right

to the latter li

.

I need a clean css way and support in IE6 and 7, and also no HTML change . is there any way to achieve this.

ul li {display:inline;margin-right:10px}

<ul id="nav">
    <li><a href="#nowhere" >Lorem</a></li>
    <li><a href="#nowhere" >Aliquam</a></li>
    <li><a href="#nowhere" >Morbi</a></li>
    <li><a href="#nowhere" >Praesent</a></li>
    <li><a href="#nowhere" >Pellentesque</a></li>
</ul>
+2


a source to share


4 answers


You can use IE CSS expressions to achieve this.

ul#nav li {
    margin-right: 10px;
    /* for IE only: */
    margin-right: expression(this.nextSibling == null ? '0' : '10px' );
}

/* for standards browsers: */
ul#nav li:last-child {
    margin-right: 0;
}


Tested and works in IE7. I don't have access to IE6, but it should work the same way.

If possible it would be better to put the expression rule in an IE-only style sheet.

+5


a source


You can put a negative bottom margin in the tag. I don't even know if this will work, but it's worth trying.



+1


a source


Give the last class <li>

a and then apply margin-right: 0px

to the class.

There is a :last-child

pseudo-class in CSS3 in CSS3, but will not work in IE 6 or 7.

0


a source


I would normally advise using a selector :last-child

, but IE 6 and 7 don't support that.

You can add a class to the last element li

and apply a type style to it margin-right: 0

.

Without changing the HTML, I am not aware of a pure css way to make this work in IE 6 or 7.

0


a source






More articles:


All Articles