Question

I have the code, as below. It’s a bit annoying to have the text not align (it affects other li elements). How can I make it a fixed-width? I’ve tried width=XYZpx but that did nothing.

<li class="date">2/28/2010 9:37:38 AM</li>
...
<li class="date">3/1/2010 9:37:38 AM</li>

css

li.date
{ 
  background : url(/icons/date.png) no-repeat left top;
}

Answer 1

Assuming the following (x)html:

<div id="navigation">
  <ul>
    <li class="date">List item One</li>
    <li class="date">List item Two</li>
  </ul>
</div>

The width of the li elements can be set by either setting the width of the div#navigation (as the ul and li will default to display: block at 100% width + padding + border-widths):

div#navigation {width: 200px; }

Or by setting the width of the ul

div#navigation > ul {width: 200px; }

Or by setting the width of the li elements themselves:

div#navigation > ul > li.date {width: 200px; }

I think, unless there was a major typo in your question, that you’re trying to assign the width incorrectly, certainly as regards the width=XYZpx that you posted. To assign the width this way you should quote the value, so it becomes:

...width="XYZpx"...

But bear in mind that this is html/xhtml, not css. To set the width with css you should use either:

...style="width: 200px;"...

If you want to use inline-styles, or, in the stylesheet, use the form (as above):

element.selector {width: 200px; }

Your comments regarding the text’s alignment suggests that your li elements are perhaps inheriting padding, or a text-indent from somewhere, so you might want to add the styles:

div#navigation > ul > li.date {
  text-indent: 0;
  padding: 0;
}

Hope this helps. If I’ve misunderstood your question, or problem, please feel free to drop a comment to my answer, or revise/edit/clarify your question, and I’ll try to be more useful.