Question

CSS

I have some simple CSS to apply a negative text-indent value on the li in an ul:

<style type="text/css">
    ul.indent li { text-indent: -20px; padding-left: 20px; }
</style>

<!--[if lte IE 8 ]>
<style type="text/css">
    ul.indent li { text-indent: -20px; padding-left: 0; margin-left: 20px; }
</style>
<![endif]-->

Since Internet Explorer 8 and lower deal with list item margins and padding differently than modern browsers, I’m using a conditional comment for IE8 and below to apply different padding and margin values. (Side note: If anyone knows of a universal, cross-browser CSS solution to get consistent margins/padding without using conditional comments, I’m all ears. I need to support IE6 and up, Chrome, Firefox, Safari, and Opera.)

HTML

This is my HTML:

<ul>
    <li>Lorem ipsum...</li>
</ul>

<ul class="indent">
    <li>Lorem ipsum...</li>
</ul>

The first list is completely unstyled (as a control for the experiment), and the second list uses the CSS class defined above (class="indent").

The result

Here’s the problem: The HTML/CSS above produces a consistent result in every browser except IE8. This is what I’m seeing in the browsers:

I see what’s on the left side in IE6, IE7, IE9, Chrome, Firefox, Safari, and Opera.

I see what’s on the right side in IE8. Notice the area highlighted in red. As soon as a negative text-indent value is added to the CSS, IE8 seems to throw a bunch of extra pixels between the list item bullet and the list item text.

How can I prevent IE8 from adding those extra pixels?

You can see the code in action here: http://jsfiddle.net/Kxb8v/

Answer 1

UL and LI elements are block level elements… that’s probably why its unpredictable on a browser level. How about wrapping that text in a p tag and then applying the text-indent since it’s not intended for block level elements.

<style type="text/css">
    .indent { text-indent: -20px; padding-left: 20px; }
</style>


<ul>
    <li><p class="indent">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce venenatis mi sit amet mauris varius ut viverra magna eleifend. Aliquam viverra, magna sed mollis adipiscing, libero mi adipiscing ante, ut hendrerit lacus leo id elit. Nulla commodo mi nec nulla ornare congue.</p></li>
</ul>

EDIT

So just in case my response was unclear… list items are used for a number of things besides containing text. Some sites use them for layout. List items also have padding and properties like list-style which allow you to control the image used for each list item.

So with that being known, it would seem that asking a list item to text-indent could be handled a couple ways. You could indent any containing text or maybe the indent is referring to the list item itself, including the image 😉 I bet this decision is left up to the browser and therefore is subject to be handled differently between versions.

Hope that helps to clarify where I was going with that.