Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    Jul 2005
    Posts
    131
    Thanks
    21
    Thanked 0 Times in 0 Posts

    Listed layout problem

    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.

    Code:
    <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>
    Code:
    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!

    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
    Last edited by PaulC2K; 05-06-2009 at 03:27 AM.

  • #2
    Senior Coder twodayslate's Avatar
    Join Date
    Mar 2007
    Location
    VA
    Posts
    1,042
    Thanks
    67
    Thanked 39 Times in 39 Posts
    2 column lists should really use a definition list
    twitter | Quality Hosting - $5.95/mo*
    Feel free to PM me!

  • #3
    Regular Coder
    Join Date
    Jul 2005
    Posts
    131
    Thanks
    21
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Senior Coder twodayslate's Avatar
    Join Date
    Mar 2007
    Location
    VA
    Posts
    1,042
    Thanks
    67
    Thanked 39 Times in 39 Posts
    twitter | Quality Hosting - $5.95/mo*
    Feel free to PM me!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •