We help IT Professionals succeed at work.

CSS problem with Definition List


Hello Experts,

Im getting crazy trying to solve this staircase effect only on IE7 and IE6 as usual.(on FF and Safari and IE8 looks very good)
For example my data output is suppose to look like the following:

person-name            company-name
person-name            company-name
person-name            company-name
person-name            company-name
person-name            company-name


But on IE7 looks like this:

person-name            company-name
                        person-name            company-name
                                                person-name            company-name
                                                                        person-name            company-name
                                                                        
                                                                        
Here is how my html and styles looks like:
<ul class="clients">
      <li>
            <dl>
                  <dt><a href="#">person-name</a></dt>
                  <dt><a href="#">person-name</a></dt>
                  <dt><a href="#">person-name</a></dt>
                  <dt><a href="#">person-name</a></dt>
                  <dt><a href="#">person-name</a></dt>
                  <dt><a href="#">person-name</a></dt>
                  <dt><a href="#">person-name</a></dt>
                  <dd>
                        <ul>
                              <li><a href="#">company-name</a></li>
                              <li><a href="#">company-name</a></li>
                              <li><a href="#">company-name</a></li>
                              <li><a href="#">company-name</a></li>
                              <li><a href="#">company-name</a></li>
                              <li><a href="#">company-name</a></li>
                              <li><a href="#">company-name</a></li>
                        </ul>
                  </dd>
            </dl>
      </li>
</ul>

ul li {
margin:0;
padding:0;
}

ul li {
float:left;
margin-right:47px;
width:150px;
}

ul a {
display:block;
margin:0;
padding-bottom:3px;
text-decoration:none;
}

ul li dd {
width:120px;
}


I would realy appreciate any type of help and advice to solve this problem.

thanks,

Winter
Comment
Watch Question

Commented:
I think the problem has to do with the clear property. Any elements that need to wrap completely to the next line may require the clear: left; property.

Also, note that when block elements have only children that are float:left; or float:right;, the height of that element does not automatically contain the floating elements unless you add to it the overflow:auto; property.

I think the way you have approached this problem is somewhat unorthodox, though I could be mistaken. I would try something like this...


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<title>CSS Problem</title>
		<style type="text/css">

ul.client li {
	display: block;
	float: left;
	margin: 5px;
	padding: 0;
}
ul.client {
	list-style: none;
	overflow: auto;
	clear: left;
	margin: 0;
	padding: 0;
}

</style>
	</head>
	<body>
	
<div class="clients">
	<ul class="client">
		<li><a href="#">person-name</a></li>
		<li><a href="#">company-name</a></li>
	</ul>
	<ul class="client">
		<li><a href="#">person-name</a></li>
		<li><a href="#">company-name</a></li>
	</ul>
	<ul class="client">
		<li><a href="#">person-name</a></li>
		<li><a href="#">company-name</a></li>
	</ul>
	<ul class="client">
		<li><a href="#">person-name</a></li>
		<li><a href="#">company-name</a></li>
	</ul>
</div>

	</body>
</html>

Open in new window

Dave BaldwinFixer of Problems
Most Valuable Expert 2014
Commented:
You're going thru a lot of trouble to avoid a table which is perfectly suited to what you're doing.  A table like below will line up on all browsers.  You can add width and styling to the <td> cells to make it look like you want.
<table border="0" cellpadding="0" cellspacing="0" summary="">
<tr><td><a href="#">person-name</a></td><td><a href="#">company-name</a></td></tr>
<tr><td><a href="#">person-name</a></td><td><a href="#">company-name</a></td></tr>
<tr><td><a href="#">person-name</a></td><td><a href="#">company-name</a></td></tr>
<tr><td><a href="#">person-name</a></td><td><a href="#">company-name</a></td></tr>
<tr><td><a href="#">person-name</a></td><td><a href="#">company-name</a></td></tr>
</table>

Open in new window

i see that you want to align the data in a proper tabular format.  if that is the case, Using table property is well suited for that.

try avoiding CSS in this case, as it can be achieved in table property in HTML
Yes tables are ideal for this but why use a definition list with a regular <LI> under it?  Why not just use two <LI> lists in separate DIVs side by side?

Author

Commented:
Thanks guys, I do was complicating myself and chock was right, my list looked somehow unorthodox. I implemented what he said and in five minutes i have my list resolved. Thanks

Winter