p width in ie6?

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
Jenk
DevNet Master
Posts: 3587
Joined: Mon Sep 19, 2005 6:24 am
Location: London

p width in ie6?

Post 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.
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post by matthijs »

IE6 does not support display:table and related. Your problem is probably related to that.
User avatar
Jenk
DevNet Master
Posts: 3587
Joined: Mon Sep 19, 2005 6:24 am
Location: London

Post 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. :)
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post 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; }
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Post 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; }
Post Reply