Don't get me wrong, I love the DL. I've been accused of abusing it way too
many times :)
However, I think you should simply use a data table for this. The table will
solve many of your layout questions. It also provides more structural
feedback for screen reader users.
For CSS
table
http://jsbin.com/emiye5/4/
The DD and DT are floated, when a DD has more content, the next set can't
stayed align horizontally.
P/s. I only use DL because LI doesn't make sense here and I can't get the
visual result I wanted.
#data-attribute {width:700px;background:#f9f9f9;overflow:hidden;}
1. I think you invented a new property overholow:hidden. Supposed to be
overflow: hidden; ?
2. If you place the borders on top of the elements, you have no lining up
issues:
#data-attribute dt, #data-attribute dd
{
float: left;
padding: 5px 0;
margin: 0;
Hi Tee,
In your case, clear: right wont help, since you have independent element
like DT, DD, dont apply the border- bottom for all, just give border-bottom
for the DL just having the markup like
dl
dt class=labelSummary/dt
dd class=dataThe finest of Japanese teas, Gyokuro bushes are covered for
On Mar 31, 2011, at 4:56 AM, Russ Weakley wrote:
1. I think you invented a new property overholow:hidden. Supposed to be
overflow: hidden; ?
Typo.
2. If you place the borders on top of the elements, you have no lining up
issues:
I believe I didn't asked the question correctly. Too
