SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Enthusiast KingOfMyCastle's Avatar
    Join Date
    May 2005
    Posts
    91
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    From table to list. Can you solve this small problem?

    Hi! After reading the sitepoint 101 CSS tips and hacks I decided to replace a table that contained three columns of images and links into a list that floated left. After cribbing the code from the book I came up with this:

    http://www.kingofmycastle.freeserve....outheight.html

    This puts the table data into a list:
    <li><a href="ebay/05feb/benhur.htm" target="_blank">
    <img src="ebay/05feb/thumb/benhur.jpg" alt="Ben-Hur" />
    Ben-Hur Original Sound-<br />track LP (OST)</a></li>

    This uses this simple CSS:

    #lots {
    list-style-type: none;
    }

    #lots li {
    float: left;
    width: 32%;
    margin-right: 6px;
    margin-bottom: 10px;
    font: 0.70em Verdana, Geneva, Arial, helvetica, sans-serif;
    color: #000000;
    }

    #lots img {
    display: block;
    }

    As you can see, if you stretch the screen to the right the fourth list item appears on its own line and the fifth and sixth appear on a third line. This happens on both Firefox and IE 6.0.

    Now I tried to fix it using "height: 200px" in the "li" set and it worked!

    http://www.kingofmycastle.freeserve....ithheight.html

    But, although it works for these examples I have some images that are over 200px tall which would overlap the other list items. Is there a fix?

    Thanks in advance.

    John King..

  2. #2
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  3. #3
    SitePoint Enthusiast KingOfMyCastle's Avatar
    Join Date
    May 2005
    Posts
    91
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So is there any solution? Can I sent height attributes to my 'a's? I'm trying to be table free.

    What method would you recommend if you had to present that type of information without tables?

    JK..

  4. #4
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I would set heights on the <li>s and/or <a>s. They would need to be display:block to have heights set on them. Floated elements are automatically display:block.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    If your are images are grouped in 3 then the solution is easy

    You just wrap each set of 3 images in a div and set that div to clear;both and then each block of three will clear the previous block of three. You would probably be better off floating the containing div as well and that will contain the floats without needing an extra clearer. If you don't want to float the container then you will need to add a clearing div before the closing div of the container (see faq on floats if you are not sure).

    If you are not able to wrap 3 images in a div (for whatever reason (dynamic etc)) then the easiest solution would be a table.

    Hope that's what you wanted.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Roughly like this:
    Code:
    .lots {
     list-style-type: none;
     clear:both
    }
    .lots li {
     float: left;
     width: 32%;
     margin-right: 6px;
     margin-bottom: 10px;
     font: 0.70em Verdana, Geneva, Arial, helvetica, sans-serif;
     color: #000000;
    }
    .lots img {
     display: block;
    }

    Code:
      <ul class="lots">
    	<li><a href="ebay/05feb/benhur.htm" target="_blank"> <img src="http://www.kingofmycastle.freeserve....umb/benhur.jpg" alt="Ben-Hur" /> 
    	  Ben-Hur Original Sound-<br />
    	  track LP (OST)</a></li>
    	<li><a href="ebay/05feb/chaka.htm" target="_blank"> <img src="http://www.kingofmycastle.freeserve....humb/chaka.jpg" alt="Chaka Khan" /> 
    	  Chaka Khan - Life's A<br />
    	  Dance Remixes 2xLP"</a></li>
    	<li><a href="ebay/05feb/doioing.htm" target="_blank"> <img src="http://www.kingofmycastle.freeserve....mb/doioing.jpg"
    alt="Doi-oing"> Doi-oing - Beach Remixes<br />
    	  inc. Dave Angel mix</a></li>
      </ul>
      <ul class="lots">
    	<li><a href="ebay/05feb/floris.htm" target="_blank"> <img src="http://www.kingofmycastle.freeserve....umb/floris.jpg" alt="floris" /> 
    	  Floris - Shake It<br />
    	  Inland Knights mix 12"</a></li>
    	<li><a href="ebay/05feb/kashmir.htm" target="_blank"> <img src="http://www.kingofmycastle.freeserve....mb/kashmir.jpg" alt="kashmir"> 
    	  Kashmir<br />
    	  Headbangers EP</a></li>
    	<li><a href="ebay/05feb/man.htm" target="_blank"> <img src="http://www.kingofmycastle.freeserve..../thumb/man.jpg" alt="Man Called Adam"> 
    	  A Man Called Adam<br />
    	  I Want To Know 12" promo</a></li>
      </ul>

  7. #7
    SitePoint Enthusiast KingOfMyCastle's Avatar
    Join Date
    May 2005
    Posts
    91
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What you're saying makes total sense. So I've tried it:

    http://www.kingofmycastle.freeserve....oatedrows.html

    This has the lists nested like this:

    <div id="thumbtable">

    <div class="thumbrow">
    <ul class="lots">
    <li>...</li>
    <li>...</li>
    <li>...</li>
    </ul>
    </div>

    </div>

    and the added CSS of:

    #thumbtable {
    width: 100%;
    float: left;
    }

    .thumbrow {
    float: left;
    clear: both;
    }


    This is, surprise surprise, fine in Firefox. Alas, IE is giving me trouble by squeezing the second row into one column. I read the FAQ but I didn't see how the float information would apply to my design.

    Any ideas?

    John King..

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    HI,

    It looks like you just need a width in the thumbrow;
    [code]
    .thumbrow {
    float: left;
    clear: both;
    width: 100%;
    }

    [.code]

    However the two new containers are actually unnecessary as it could all be combined into the ul as in my example in the other post without requiring much extra markup

  9. #9
    SitePoint Enthusiast KingOfMyCastle's Avatar
    Join Date
    May 2005
    Posts
    91
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul, I replied without seeing your last entry. You can see how convoluted my method was. I've tried to implement the method you've described above in your second post and come up with a problem (which at least is the same in Firefox as it is in IE).

    Take a look at the result here:

    http://www.kingofmycastle.freeserve....paulclear.html

    The thumbtable is starting just below the right bar which is floated. Floating the bars seemed like the only way to get the overall effect I wanted with the resizing of the window. This is just the same as your example with the clear:both; added to my .lots

    John King..

  10. #10
    SitePoint Enthusiast KingOfMyCastle's Avatar
    Join Date
    May 2005
    Posts
    91
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    And I added the width css too but with no luck:

    http://www.kingofmycastle.freeserve....learwidth.html

    John King..

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    There are a couple of little bugs to sort out. One is IE's layout bug and that can be fixed by giving #content a 1% height.

    The other is to contain all floats within a floated parent so that any clears are contained within that element.

    Heres the html.
    Code:
    <div id="content"> 
    <div id="content-wrapper"> 
    	<p>ddddd dddddd ddddd dddddd ddddd dddddd ddddd dddddd ddddd dddddd ddddd 
    	 ddddd dddddd ddddd dddddd ddddd dddddd ddddd dddddd ddddd dddddd </p>
    	<ul class="lots">
    	 <li><a href="ebay/05feb/benhur.htm" target="_blank"> <img src="http://www.kingofmycastle.freeserve....umb/benhur.jpg" alt="Ben-Hur" /> 
    		Ben-Hur Original Sound-<br />
    		track LP (OST)</a></li>
    	 <li><a href="ebay/05feb/chaka.htm" target="_blank"> <img src="http://www.kingofmycastle.freeserve....humb/chaka.jpg" alt="Chaka Khan" /> 
    		Chaka Khan - Life's A<br />
    		Dance Remixes 2xLP"</a></li>
    	 <li><a href="ebay/05feb/doioing.htm" target="_blank"> <img src="http://www.kingofmycastle.freeserve....mb/doioing.jpg" alt="Doi-oing" /> 
    		Doi-oing - Beach Remixes<br />
    		inc. Dave Angel mix</a></li>
    	</ul>
    	<ul class="lots">
    	 <li><a href="ebay/05feb/floris.htm" target="_blank"> <img src="http://www.kingofmycastle.freeserve....umb/floris.jpg" alt="floris" /> 
    		Floris - Shake It<br />
    		Inland Knights mix 12"</a></li>
    	 <li><a href="ebay/05feb/kashmir.htm" target="_blank"> <img src="http://www.kingofmycastle.freeserve....mb/kashmir.jpg" alt="kashmir" /> 
    		Kashmir<br />
    		Headbangers EP</a></li>
    	 <li><a href="ebay/05feb/man.htm" target="_blank"> <img src="http://www.kingofmycastle.freeserve..../thumb/man.jpg" alt="Man Called Adam" /> 
    		A Man Called Adam<br />
    		I Want To Know 12" promo</a></li>
    	</ul>
    	<hr />
    	<p>ddddd dddddd ddddd dddddd ddddd dddddd ddddd dddddd ddddd dddddd ddddd 
    	 dddddd ddddd dddddd ddddd dddddd ddddd dddddd ddddd dddddd ddddd dddddd 
    	 ddddd dddddd ddddd dddddd ddddd dddddd ddddd dddddd ddddd dddddd ddddd dddddd 
    	 ddddd dddddd </p>
    </div>
    <div class="clearer"></div>
    </div>
    CSS:

    Code:
    .lots {
    list-style-type: none;
    clear: both;
    }
    .lots li {
    float: left;
    width: 32%;
    margin-right: 6px;
    margin-bottom: 10px;
    font: 0.70em Verdana, Geneva, Arial, helvetica, sans-serif;
    color: #000000;
    }
    .lots img {
    display: block;
    }
    /* mac hide \*/
    * html #content{height:1%}
    /* end hide */
    #content-wrapper{
    width:100%;
    float:left;
    }
    .clearer{
    height:1px;
    overflow:hidden;
    margin-top:-1px;
    clear:both;
    }
    hr {clear:both;}/* to clear floated list*/
    Tried and tested

  12. #12
    SitePoint Enthusiast KingOfMyCastle's Avatar
    Join Date
    May 2005
    Posts
    91
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul, thank you very much. I really appreciate your help. I'm almost finished converting my tabled site to CSS and I thank you for all your support.

    But, I'm having trouble with the solution you gave. Here it is:
    http://www.kingofmycastle.freeserve....lsolution.html

    In Firefox this works fine but I'm still having trouble in IE. When you resize the window smaller the content seems to jump down as if its floating below the nav bar or the right bar. Good news though, I fixed it! I changed the content-wrapper width to 99% and it worked fine in IE.

    http://www.kingofmycastle.freeserve....lutionfix.html

    But (he says again), now my funky nav bar with my dashed edges on the hover doesn't attach itself to the content on IE (does on Firefox). Is there a way of shifting the content over by a few pixels on IE only? I've tried a few methods using margins and padding but they don't seem to work.

    All is not lost though as I can always go back to setting a fixed height for the list items which seemed to work okay before. I'd just have to resize any images that were over the set height.

    This has been a real learning exercise and just by reading this site I've managed to solve 80% of problems on my own. Thanks everybody for a great zone for us newbies.

    John King..

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    HI,

    The problem with the dashed border is mainly the three pixel jog on floats (see faq)which needs to be catered for. The dropping of the floats in iE can also be cured by setting a 99% width as you found out or by using a 100% width and overflow:hidden.

    Use this css instead.
    Code:
    /* mac hide \*/
    * html #content{height:1%;margin-left:176px;margin-right:137px}
    * html #leftbar {margin-right:-3px;position:relative;left:1px;}
    * html #rightbar {margin-left:-3px;}
    * html #content-wrapper{overflow:hidden;}
    /* end hide */
    #content-wrapper{
    width: 100%;
    float: left;
    }
    I'm sure you will find that it works as expected (unless you have changed something else meanwhile ).


    here's the whole code I used.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
       "http:///www.w3.org/TR/xhtml1/DTD/xht...ansitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>KingOfMyCastle</title>
    <meta http-equiv="content-type"
       content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    html, body {
     margin: 0;
     padding: 0;
     color: #000000;
     font-size: 1em;
     font: 1em helvetica, Geneva, Verdana, Arial, sans-serif;
    }
    #header { 
     padding-left: 20%; 
     background-color: #FFFFFF;
    }
    body { 
     background-image: url(http://www.kingofmycastle.freeserve....5/morelogo.jpg);
     background-repeat: repeat;
     min-width: 870px;
     width:expression( documentElement.clientWidth < 870 ? (documentElement.clientWidth == 0 ? (body.clientWidth < 870 ? "870px" : "auto") : "870px") : "auto" );
    }
     
    p {
     color: #000000;
     font-size: 0.75em;
     text-align: justify;
    }
    h1 {
     font: bold 2em arial, helvetica, sans-serif;
     margin-bottom: -10px;
    }
    h3 {
     font: bold 1em arial, helvetica, sans-serif;
     margin-bottom: -10px;
    }
    a {
     color: #005599;
    }
    img {
     border: none;
     }
    em {
      font: bold 1em arial, helvetica, sans-serif;
    }
    #leftbar {
      float: left;
     top: 100px;
     left: 0px;
     width: 180px;
     font: bold 0.75em arial, helvetica, sans-serif;
     margin-top: 20px;
    }
    #leftbar ul {
     width: 175px;
     margin: 0;
     display: block;
     list-style-position: outside; 
     margin-left: 0px; 
     padding-left: 5px; 
     list-style: none; 
     vertical-align: sub;
    }
    #leftbar li {
     height: 100%;
     margin: 0;
     padding: 0;
     border-left: 1px solid #000000;
     border-top: 1px solid #000000;
     border-bottom: 1px solid #000000;
    }
    #leftbar li a:link, #leftbar li a:visited {
     display: block;
     height: 100%;
      border-left: 19px solid #3399CC;
     background-color: #000000;
     color: #FFFFFF;
     text-decoration: none;
     border-right: 1px solid #000;
     padding: 10px 0px 10px 5px;
    } 
    #leftbar li a:hover {
     border-left: 19px solid #000000;
     border-right: 1px dashed #DDFFFF;
     background-color: #3399CC;
     color: #000000;
    }
    body#current li.current a:link, body#current li.current a:visited,
    body#music li.music a:link, body#music li.music a:visited,
    body#id li.id a:link, body#id li.id a:visited, 
    body#photo li.photo a:link, body#photo li.photo a:visited,
    body#links li.links a:link, body#links li.links a:visited {
     border-left: 19px solid #BBFFFF;
      border-right: 1px solid #DDFFFF;
     color: #000000;
     background-color: #DDFFFF;
    }
     
    #content {
     margin-top: 8px;
      margin-left: 179px;
      margin-right: 140px;
     border: 1px solid #000000;
     background-color: #DDFFFF;
     padding: 5px 15px 10px 15px;
     min-width: 500px;
    }
    #rightbar {
      float: right;
      text-align: center;
     width: 135px;
     border: 2px solid #000000;
    }
    #counter {
     bottom: 1em;
     left: 1em;
     width: 140px;
     border: 2px solid #000000;
     }
      
    .musicforsale {
     font: 0.70em Verdana, Geneva, Arial, helvetica, sans-serif;
      border-collapse: collapse;
      border: 0px solid #000000;
     border-width: 1px 1px 0px 1px;
    }
    .musicforsale td {
      background-color: #BBFFFF;
      border-bottom: 1px solid #000000;
    }
    .lots {
    list-style-type: none;
    clear: both;
    }
    .lots li {
    float: left;
    width: 32%;
    margin-right: 6px;
    margin-bottom: 10px;
    font: 0.70em Verdana, Geneva, Arial, helvetica, sans-serif;
    color: #000000;
    }
    .lots img {
    display: block;
    }
    /* mac hide \*/
    * html #content{height:1%;margin-left:176px;margin-right:137px}
    * html #leftbar {margin-right:-3px;position:relative;left:1px;}
    * html #rightbar {margin-left:-3px;}
    * html #content-wrapper{overflow:hidden;}
    /* end hide */
    #content-wrapper{
    width: 100%;
    float: left;
    }
    .spacer {
    height: 1px;
    overflow: hidden;
    margin-top: -1px;
    clear: both;
    }
    hr {clear:both;}/* to clear floated list*/
    </style>
    </head>
    <body id="current">
    <div id="header"> </div>
    <div id="leftbar"> 
      <ul>
    	<li class="current"><a href="index.html">Current eBay Auctions</a></li>
    	<li class="music"><a href="music.html">House Records For Sale</a></li>
    	<li class="id"><a href="id.html">ID These Tunes</a></li>
    	<li class="photo"><a href="photo.html">Photo Album</a></li>
    	<li class="links"><a href="links.html">Links</a></li>
      </ul>
    </div>
    <div id="rightbar"> <br/>
      <br/>
      <br/>
      <a href="http://www.netsounds.com/nsr.cgi?affiliate=KOMC" target="_blank"> <img src="http://www.kingofmycastle.freeserve....und/button.jpg" alt="Netsounds Logo" /></a> 
      <a href="http://www.netsounds.com/nsr.cgi?affiliate=KOMC" target="_blank"> <img src="http://www.kingofmycastle.freeserve....und/button.jpg" alt="Netsounds Logo" /></a> 
      <a href="http://www.netsounds.com/nsr.cgi?affiliate=KOMC" target="_blank"> <img src="http://www.kingofmycastle.freeserve....und/button.jpg" alt="Netsounds Logo" /></a> 
      <a href="http://www.netsounds.com/nsr.cgi?affiliate=KOMC" target="_blank"> <img src="http://www.kingofmycastle.freeserve....und/button.jpg" alt="Netsounds Logo" /></a> 
      <a href="http://www.netsounds.com/nsr.cgi?affiliate=KOMC" target="_blank"> <img src="http://www.kingofmycastle.freeserve....und/button.jpg" alt="Netsounds Logo" /></a> 
      <a href="http://www.netsounds.com/nsr.cgi?affiliate=KOMC" target="_blank"> <img src="http://www.kingofmycastle.freeserve....und/button.jpg" alt="Netsounds Logo" /></a> 
      <a href="http://www.netsounds.com/nsr.cgi?affiliate=KOMC" target="_blank"> <img src="http://www.kingofmycastle.freeserve....und/button.jpg" alt="Netsounds Logo" /></a> 
      <a href="http://www.netsounds.com/nsr.cgi?affiliate=KOMC" target="_blank"> <img src="http://www.kingofmycastle.freeserve....und/button.jpg" alt="Netsounds Logo" /></a> 
      <a href="http://www.netsounds.com/nsr.cgi?affiliate=KOMC" target="_blank"> <img src="http://www.kingofmycastle.freeserve....und/button.jpg" alt="Netsounds Logo" /></a> 
      <a href="http://www.netsounds.com/nsr.cgi?affiliate=KOMC" target="_blank"> <img src="http://www.kingofmycastle.freeserve....und/button.jpg" alt="Netsounds Logo" /></a> 
      <a href="http://www.netsounds.com/nsr.cgi?affiliate=KOMC" target="_blank"> <img src="http://www.kingofmycastle.freeserve....und/button.jpg" alt="Netsounds Logo" /></a> 
      <a href="http://www.netsounds.com/nsr.cgi?affiliate=KOMC" target="_blank"> <img src="http://www.kingofmycastle.freeserve....und/button.jpg" alt="Netsounds Logo" /></a> 
      <a href="http://www.netsounds.com/nsr.cgi?affiliate=KOMC" target="_blank"> <img src="http://www.kingofmycastle.freeserve....und/button.jpg" alt="Netsounds Logo" /></a> 
    </div>
    <div id="content"> 
      <div id="content-wrapper"> 
    	<p>ddddd dddddd ddddd dddddd ddddd dddddd ddddd dddddd ddddd dddddd ddddd 
    	  dddddd ddddd dddddd ddddd dddddd ddddd dddddd ddddd dddddd ddddd dddddd 
    	  ddddd dddddd ddddd dddddd ddddd dddddd ddddd dddddd ddddd dddddd ddddd dddddd 
    	  ddddd dddddd ddddd dddddd ddddd dddddd ddddd dddddd ddddd dddddd ddddd ddd 
    	  ddddd dddddd ddddd dddddd ddddd dddddd ddddd dddddd ddddd dddddd ddddd dddddd 
    	  ddddd dddddd ddddd dddddd ddddd dddddd ddddd dddddd ddddd dddddd ddddd ddd 
    	  ddddd dddddd ddddd dddddd ddddd dddddd ddddd dddddd ddddd dddddd </p>
    	<ul class="lots">
    	  <li><a href="ebay/05feb/benhur.htm" target="_blank"> <img src="http://www.kingofmycastle.freeserve....umb/benhur.jpg" alt="Ben-Hur" /> 
    		Ben-Hur Original Sound-<br />
    		track LP (OST)</a></li>
    	  <li><a href="ebay/05feb/chaka.htm" target="_blank"> <img src="http://www.kingofmycastle.freeserve....humb/chaka.jpg" alt="Chaka Khan" /> 
    		Chaka Khan - Life's A<br />
    		Dance Remixes 2xLP"</a></li>
    	  <li><a href="ebay/05feb/doioing.htm" target="_blank"> <img src="http://www.kingofmycastle.freeserve....mb/doioing.jpg" alt="Doi-oing" /> 
    		Doi-oing - Beach Remixes<br />
    		inc. Dave Angel mix</a></li>
    	</ul>
    	<ul class="lots">
    	  <li><a href="ebay/05feb/floris.htm" target="_blank"> <img src="http://www.kingofmycastle.freeserve....umb/floris.jpg" alt="floris" /> 
    		Floris - Shake It<br />
    		Inland Knights mix 12"</a></li>
    	  <li><a href="ebay/05feb/kashmir.htm" target="_blank"> <img src="http://www.kingofmycastle.freeserve....mb/kashmir.jpg" alt="kashmir" /> 
    		Kashmir<br />
    		Headbangers EP</a></li>
    	  <li><a href="ebay/05feb/man.htm" target="_blank"> <img src="http://www.kingofmycastle.freeserve..../thumb/man.jpg" alt="Man Called Adam" /> 
    		A Man Called Adam<br />
    		I Want To Know 12" promo</a></li>
    	</ul>
    	<hr>
    	<p>ddddd dddddd ddddd dddddd ddddd dddddd ddddd dddddd ddddd dddddd ddddd 
    	  dddddd ddddd dddddd ddddd dddddd ddddd dddddd ddddd dddddd ddddd dddddd 
    	  ddddd dddddd ddddd dddddd ddddd dddddd ddddd dddddd ddddd dddddd ddddd dddddd 
    	  ddddd dddddd ddddd dddddd ddddd dddddd ddddd dddddd ddddd dddddd ddddd ddd 
    	  ddddd dddddd ddddd dddddd ddddd dddddd ddddd dddddd ddddd dddddd ddddd dddddd 
    	  ddddd dddddd ddddd dddddd ddddd dddddd ddddd dddddd ddddd dddddd ddddd ddd 
    	  ddddd dddddd ddddd dddddd ddddd dddddd ddddd dddddd ddddd dddddd ddddd dddddd 
    	  ddddd dddddd ddddd dddddd ddddd dddddd ddddd ddd ddddd dddddd ddddd dddddd 
    	  ddddd dddddd ddddd dddddd ddddd dddddd ddddd dddddd ddddd dddddd ddddd dddddd 
    	  ddddd dddddd ddddd dddddd ddddd dddddd ddddd dddddd ddddd ddd ddddd dddddd 
    	  ddddd dddddd ddddd dddddd ddddd dddddd ddddd dddddd ddddd dddddd ddddd dddddd 
    	  ddddd dddddd ddddd dddddd ddddd dddddd ddddd dddddd ddddd dddddd ddddd dd 
    	  ddddd dddddd ddddd dddddd ddddd dddddd ddddd dddddd ddddd dddddd ddddd dddddd 
    	  dddddd ddddd dddddd ddddd dddddd ddddd dddddd ddddd dddddd ddddd dddddd 
    	  ddddd dddddd ddddd dddddd ddddd dddddd ddddd dddddd ddddd dddddd ddddd dddddd 
    	  ddddd dddddd ddddd dddddd ddddd dddddd ddddd dddddd ddddd dddddd ddddd dddddd 
    	  ddddd dddddd ddddd dddddd ddddd dddddd ddddd dddddd ddddd dddddd ddddd dddddd 
    	  ddddd dddddd ddddd dddddd ddddd dddddd ddddd dddddd ddddd dddddd ddddd dddddd 
    	  ddddd dddddd ddddd dddddd ddddd dddddd ddddd dddddd ddddd dddddd ddddd dddddd 
    	  ddddd dddddd ddddd dddddd ddddd dddddd ddddd dddddd ddddd dddddd ddddd dddddd 
    	  ddddd dddddd ddddd dddddd ddddd dddddd ddddd dddddd ddddd dddddd ddddd dddddd 
    	  ddddd dddddd ddddd dddddd ddddd dddddd ddddd dddddd ddddd dddddd ddddd dddddd 
    	  ddddd dddddd ddddd dddddd ddddd dddddd ddddd dddddd ddddd dddddd ddddd dddddd 
    	  ddddd dddddd ddddd dddddd ddddd dddddd ddddd dddddd ddddd dddddd ddddd dddddd 
    	  ddddd dddddd </p>
      </div>
      <div class="spacer"></div>
    </div>
    <div id="counter"> 
      <script language="JavaScript" type="text/javascript" 
    src="<A href="http://pub20.bravenet.com/counter/code.php?id=350881&usernum=1638130996&cpv=2"></script">http://pub20.bravenet.com/counter/code.php?id=350881&usernum=1638130996&cpv=2"></script>
    </div>
    </body>
    </html>

  14. #14
    SitePoint Enthusiast KingOfMyCastle's Avatar
    Join Date
    May 2005
    Posts
    91
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You sir, are a fine gentleman!

    Getting to grips with those margin changes does make my head hurt but the stuff that seemed hard last week now makes total sense today, and I'm sure all this extra CSS you've given me will make total sense in a weeks time.

    Thanks for your perseverance. I really, really appreciate it.

    John King.. Extremely happy to have this solved before the weekend!


Bookmarks

Posting Permissions

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