...

View Full Version : Listed layout problem



PaulC2K
05-06-2009, 03:01 AM
Hi,

I recently had a mate explain how to do layouts using lists as opposed to tables which have been sufficient if not perfect for a few years now.
So im now replacing tables with lists, and now trying to replicate an existing site using css and browser friendly html... or at least that was what i thought i was doing.

Last night i hit upon an issue which has been driving me mad, nothing seems to remove the spacing between lists/columns and as a result it looks stupid.


<dl>
<dd>
<dl>
<dd class="header">A</dd>
</dl>
</dd>
<dd>
<dl>
<dd class="column1">B</dd>
<dd class="column2">C</dd>
</dl>
</dd>
<dd>
<dl>
<dd class="column1">D</dd>
<dd class="column2">E</dd>
</dl>
</dd>
</dl>


dd {
list-style:none;
display: block;
vertical-align:top;
}

dd dd {
list-style:none;
display: inline-block;
vertical-align:top;
}

.header {
margin: 0px;
width: 100px;
line-height: 20px;
background-color: #666;
}

.column1 {
margin: 0px;
width: 50px;
line-height: 20px;
background-color: #777;
}

.column2 {
margin: 0px;
width: 50px;
line-height: 20px;
background-color: #888;
}



http://mercuryracingteam.com/example.html


I cannot understand why there is a forced space between the columns, on this instance ive used multiple level lists to create rows & columns, but while trying to figure this out ive also tried the same using div's and that was no different.

Its a complete shambles in IE, chances are im doing something wrong with the lists, but thats something else to correct, its this damn spacing between columns which i need to understand, i'll deal with IE later! :mad:

Any suggestions as to what could be causing it, ive tried alsorts without knowing whether they'll help (my usual method, try anything & everything, then seek help) and so im looking for help from you kind folks :).

Paul
p.s. If anyone has a suggestion for somewhere which rather than lists every option and leaves you to figure out what can be done with it (such as using lists to replace tables), actually brings methods like this to your attention and explains it, everywhere i look seems to cater to n00bs or pro's, never the people looking to improve their knowledge and approach.

---- edits ----
1) replaced unordered list for definition list layout

twodayslate
05-06-2009, 03:13 AM
2 column lists should really use a definition list

PaulC2K
05-06-2009, 03:25 AM
My original attempt was actually done using Definition Lists, i probably have the reason for it wrote down, but ive tried a few different ways and that gap always seems to be there.

Whether its been div tags, unordered list, or definition list, that gap has been there and seems unshiftable. Differing results, but still the gap holds strong :(


I'll update the OP and upload the DL/DD version after swapping out the UL/LI tags.

twodayslate
05-06-2009, 03:48 AM
http://www.maxdesign.com.au/presentation/definition/



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum