Page 1 of 1

p width in ie6?

Posted: Tue Sep 18, 2007 7:00 am
by Jenk
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):
Image

The style sheet:

Code: Select all

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: Select all

<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:
Image

Any ideas?

Many thanks.

Posted: Tue Sep 18, 2007 7:55 am
by matthijs
IE6 does not support display:table and related. Your problem is probably related to that.

Posted: Wed Sep 19, 2007 4:14 am
by Jenk
Not sure if that was the actual problem or not, but I've started from scratch and gone for floating left p's. Not perfect, because if the screen is shrunk down, the text from the headline wraps underneath the date, but it'll do. :)

Posted: Wed Sep 19, 2007 4:20 am
by matthijs
You could also simplify the code

Code: Select all

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

Code: Select all

.date { width:14em; }

Posted: Wed Sep 19, 2007 6:59 am
by superdezign
You *could* just use a table in this case. Of course, matthijs suggestion is certainly a good one. The only probllem would be when users resize their screen and the data wraps around the bottom. To add to matthijs' suggestion, add this to the CSS:

Code: Select all

.headline a { display: block; margin-left: 14em; }