Question

I’m having problems getting a list formatted the way I want in Opera. I want any text which would wrap around to be indented a bit past the first line, and I have this working in Firefox/Chrome/Safari with the following code:

<ul>
<li><p style="text-indent: -2em; padding-left: 2em"> Long first item </p></li>
<li> Second list item </li>
</ul>

So the whole paragraph is shifted to the right by 2em, and the first line is shifted back to the left by the same amount, producing the effect I want: every line except the first indented.

However, in Opera this causes the first list bullet to be indented to the left. (The text is displayed as I wish, only the bullet seems incorrect!) Is there another way to get what I want? (And is it a bug in Opera? It seems to me that the styling of an element inside the li element shouldn’t effect bullet placement, but I don’t have very deep knowledge of these things…)

It looked at “list-style-position”, but it isn’t helpful because I want the second line of text to be indented past the first line.

Thanks for any help!

Answer 1

This seems to work in Firefox and Opera. I haven’t tested in the other browsers. Let me know if it works for you.

<style type="text/css">
      ul.mylist li p {position: relative; left: 2em; text-indent: -2em;}
   </style>
    <ul class="mylist">
      <li>
        <p>
          Long first item Long first item Long first item Long first itemLong first itemLong first item Long first item Long first item Long first item Long first itemLong first itemLong first itemLong first item Long first item Long first item Long first itemLong first itemLong first itemLong first item Long first item Long first item Long first itemLong first itemLong first itemLong first item Long first item Long first item Long first itemLong first itemLong first item
        </p>
      </li>
      <li>Second list item
      </li>
    </ul>

Edit:

I just noticed that the text flow off the page to the right when using this css. I modified the css in the following way to prevent this. It’s working in both Opera and Firefox.

ul.mylist li p {position: relative; left: 2em; text-indent: -2em; margin-right: 2em;}

And… I just checked this in Chrome. Sadly, It’s not working in Chrome.

Edit 2:

Is it necessary to have the <p>? I can’t seem to get it to work in ALL browsers with the <p> tag. That said – the following code is working for me in Opera, FF, and Chrome (without the <p> tag:

<style type="text/css">
      ul.mylist {list-style-position: inside;}
      ul.mylist li {text-indent: -2em; position: relative; left: 2em; margin-right: 2em;}
   </style>
    <ul class="mylist">
      <li>
          Long first item Long first item Long first item Long first itemLong first itemLong first item Long first item Long first item Long first item Long first itemLong first itemLong first itemLong first item Long first item Long first item Long first itemLong first itemLong first itemLong first item Long first item Long first item Long first itemLong first itemLong first itemLong first item Long first item Long first item Long first itemLong first itemLong first item
      </li>
      <li>Second list item long item long item Second list item long item long item Second list item long item long item Second list item long item long itemSecond list item long item long itemSecond list item long item long item

      </li>
    </ul>

If you find that you absolutely need the <p> tag I think you might consider using Conditional CSS to tweak the offending browsers CSS individually.

Edit:

Wow! I’m making a lot of edits on this. Alright – so the reason the <p> tag won’t work is because it is by default a block element. Block elements are automatically set to take up 100% of the available page width. Therefore – when adding the bullets via list-style-position:inside; Firefox renders a solitary bullet on one line followed by a paragraph on the next line. You can fix this so that the indent shows in Firefox as well as Chrome and Opera by making the paragraph inline.

<style type="text/css">
  ul.mylist {list-style-position: inside;}
  ul.mylist li {text-indent: -2em; position: relative; left: 2em; margin-right: 2em;}
  ul.mylist li p {display: inline;}
</style>

Alright! I’m done goodnight 🙂