What am I doing wrong? Need help with table/css

Maurovz Peon

Messages:: 116

Likes Received:: 0

Best Answers:: 0

Trophy Points:: 0

#1

I'm doing an assignment from a tutorial in a book. Here is how the final site should look like:

http://mark.byethost6.com/tables/site.jpeg

And this is what I got so far:

http://mark.byethost6.com/tables/dhome.htm

I'm not sure why is the table not floating to the right, or has the correct dimensions (1 & 2 column: 22% and middle columns: 28%) or displaying the background images.

Here is the html code for the table:

<table class="Domespecs" 
     summary="A table describing six dome models sold by dHome, Inc">
<caption>Building Models</caption>
<colgroup>
  <col class="firstColumn" />
  <col class="middleColumns" span="2" />
  <col class="lastColumn" />
</colgroup>

<thead>
 <tr>
  <th id="topleft">Model</th>
  <th>Total Sq.</th>
  <th>Total Ft.</th>
  <th>Sphere Size</th>
  <th id="topRight">Price</th>
</thead>

<tfoot>
  <tr>
   <td id="bottomleft"></td>
   <td span="2">Call us about custom pricing!</td>
   <td id="bottomright"></td>
</tfoot>
<tbody>
  <tr>
    <td>Class IA</td>
    <td>4700 square ft.</td>
    <td>50 ft. 5/8 sphere</td>
    <td>$115,000</td>
  </tr>
  <tr>
    <td>Class IB</td>
    <td>4100 square ft.</td>
    <td>35 ft. 5/8 sphere</td>
    <td>$95,000</td>
  </tr>
  <tr>
    <td>Class IIA</td>
    <td>3700 square ft.</td>
    <td>50 ft. 5/8 sphere</td>
    <td>87,000</td>
  </tr>
  <tr>
    <td>Class IIB</td>
    <td>3100 square ft.</td>
    <td>35 ft. 5/8 sphere</td>
    <td>77,000</td>
  </tr>
  <tr>
    <td>Class IIIA</td>
    <td>2600 square ft.</td>
    <td>45 ft. 5/8 sphere</td>
    <td>69,000</td>
  </tr>
  <tr>
    <td>Class IIIB</td>
    <td>2200 square ft.</td>
    <td>35 ft. 5/8 sphere</td>
    <td>63,000</td>
  </tr>
</tbody>
</table>

Code (markup):

Here is the css code for the site's layout:

body             {margin: 0px; padding: 0px; font-size: 15px; 
                  font-family: Arial, Helvetica, sans-serif;
                  background: url(domepaper.jpg) no-repeat 0% 0%}
#head            {position: absolute; top: 0px; left: 0px}
#links           {position: absolute; top: 60px; left: 5px; width: 750px;
                  border-bottom: 2px solid rgb(132,208,195)}
#links li        {list-style: none; padding: 0px; margin-top: 5px; 
                  margin-left: 5px; margin-right: 0px; margin-bottom: 0px}

#pageContent     {position: absolute; top: 115px; left: 15px; width: 750px}
#pageContent p b {color: rgb(82,158,145); letter-spacing: 3px}
address          {font-style: normal; font-variant: small-caps; text-align: center;
                  border-top: 2px solid rgb(132,208,195)}


li               {display: inline; float: left; font-size: 14px; margin-right: 5px; 
                  background: url(rightbox.jpg) right no-repeat}
li a             {display: block; text-decoration: none; color: black;
                  background: url(leftbox.jpg) left no-repeat;
                  padding-bottom: 10px; padding-top: 10px; padding-left: 15px;
                  padding-right: 15px}

ul a:hover    {color: blue}

Code (markup):

And this is the code for the table:

table      {float: right; font: 12px; margin-top: 0px; margin-right: 0px;
                      margin-bottom: 10px; margin-left: 20px; border-collapse: collapse}
table.domeSpecs caption {font-size: 16px; letter-spacing: 5px; text-align: center}

table.domeSpecs col.firstColumn   
                        {width: 22%}
table.domeSpecs col.lastColumn    
                        {width: 22%}
table.domeSpecs col.middleColumns 
                        {width: 28%}


table.domeSpecs thead             {border-bottom: 2px solid gray}
table.domeSpecs tfoot             {border-top: 2px solid gray; text-align: center}
table.domeSpecs tbody tr            {border: 1px dotted gray}

table.domeSpecs td       {padding-top: 0px; padding-right: 5px; padding-left: 5px; padding-bottom: 5px}
table.domeSpecs thead tr {letter-spacing: 2px}
table.domeSpecs tr       {height: 30px}

.left                    {background: url(left.jpg) repeat-y left}
.right                   {background: url(right.jpg) repeat-y right}

Code (markup):

As you can see the background images are not there and the table position is all messed up. Can someone point me in the right direction?

Maurovz, Apr 9, 2009 IP