p width in ie6? [css]

Dj_Jestar · 18 Sep 2007 at 13:31

Hello,

I have a series of lists (ul's) which I am trying to display as shown in this screen shot (ff/opera/safari/ie7 display):

The style sheet:

Code:

ul.articlelist {
	width: 100%;
	display: table;
	list-style: none;
}

ul.articlelist li.articleitem {
	border: 1px dotted #5A2815;
	margin-top: 5px;
}

ul.articlelist ul.articleinner {
	display: table-row;
}

ul.articleinner li {
	display: table-cell;
	padding: 2px;
}
li.date span {
	text-align: center;
}
li.date span p {
	width: 14em;
}
li.headline {
	font-weight: bold;
}

A snippet from the markup:

Code:

<ul class="articlelist">
  <li class="articleitem type4">
    <ul class="articleinner">
      <li class="date">
        <span>
          <p>1 June 2007</p>
        </span>
      </li>
      <li class="headline">
        <a href="http://localhost/articles?_s=pwDDJAwYLaKpFaGm&_k=KdcPSbVi&15">Special Report: UPS REMAINS A LOW-KEY PLAYER IN THE MIDDLE EAST</a>
      </li>
    </ul>
  </li>
</ul>

(class type'x' is only for highlighting using background-color: blah)

But in ie6:

Any ideas?

Many thanks.

simisker · 18 Sep 2007 at 13:52

Have you globally reset your padding and margins?

Also, though this is not directly related to your problem: if you've only got "date" and "headline" to list, then might a definition list be more elegant than nesting unordered lists?

Dj_Jestar · 18 Sep 2007 at 15:41

What's a "definition list" when it's at home?

LazyManc · 18 Sep 2007 at 15:57

Dj_Jestar said:
What's a "definition list" when it's at home?

http://www.w3schools.com/tags/tag_dl.asp

Boov · 18 Sep 2007 at 17:51

or why not use a table? it is tabular data after all.

if it has only two columns of data, then a definition list might me more appropriate.

Dj_Jestar · 19 Sep 2007 at 10:17

I've opted for float left on all the p's. Did try out a small example of DL's and it sort of works, but I have to have each dt/dd within it's own dl, and a br between dl's to make it tabular, which is not ideal.

The reason not for tables is because it isn't actually tabular data, it is a menu list. (The headlines are links to other pages)