SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Zealot
    Join Date
    Mar 2003
    Location
    Maryland, USA
    Posts
    107
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    replacing footer that uses tables

    Once again I find myself behind the eight ball with CSS. I am trying to duplicate the following tables in CSS and make it compatible with NS 4.7 and IE 4+ I have been through so many iterations that I don't know what I have and haven't tried. Here is the table, a mock up of the table can be found at http://home.comcast.net/~hatchtest/

    Here is the gist of the table though:

    HTML Code:
    <table width="100%" border="0">
      <tr>
       <td width="30%" align="left">line 1<br>line2<br>line3</td>
       <td width="40%">&nbsp;</td>
       <td width="30%" align="left">
        <table>
         <tr>
          <td>Reference:</td>
          <td>CIO 123A</td>
        </tr>
        <tr>
         <td>&nbsp;</td>
         <td>7 Mar 2003</td>
        </tr>
        <tr>
          <td>Policy Expires:</td>
         <td>7 Mar 2004</td>
        </tr>
       </table>
      </td>
     </tr>
     <tr>
      <td colspan='3'>
       <div class="centered">some text that has its own style to center it set background and foreground color</div>
      </td>
     </tr>
    </table>

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

    I don't know if something like this might work (you may have to tweak it for nn4 as it doesn't like to color backgrounds much.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    #floatl {
     float:left;
     width:30%;
    }
    #floatr {
     float:right;
     width:30%;
    }
    #floatr span.r {float:right;text-align:left;width:49%;}
    #floatr span.l {float:left;text-align:left;width:49%;}
    #floatl p, #floatr p {margin:0;clear:both;}
    p.base { 
     text-align:center;
     color: #FFFF00;
     background-color: #0000FF;
    }
    .clear {clear:both}
    </style>
    </head>
    <body>
    <div id="floatl"> 
      <p>Line 1</p>
      <p>Line 2</p>
      <p>Line 3</p>
    </div>
    <div id="floatr"> 
      <p><span class="l">Reference:</span><span class="r">C10 123A</span></p>
      <p><span class="l"></span><span class="r">7 Mar 2003</span></p>
      <p><span class="l">Policy Expires</span><span class="r">7 Mar 2004</span></p>
    </div>
    <br style="clear:both" />
    <p class="base">some text that has its own style to center it set background and 
      foreground color</p>
    </body>
    </html>
    Alternatively the data above is proabbly best suited to a table and if you want to support really old (and broken) browsers you may need to keep the table or reduce your expectations lol.

    Sorry I can't be more helpful towards nn4 but I don't support it and therefore haven't learned all its little problems.

    Paul


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
  •