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 2 of 2
  1. #1
    Regular Coder
    Join Date
    Mar 2006
    Posts
    478
    Thanks
    3
    Thanked 0 Times in 0 Posts

    please help me convert tables to CSS

    i have this last piece of code to convert, please can someone tell me the correct way to code this in CSS.

    thank you


    Code:
    #index-container {
    border: 1px solid #fff;
    background: #507bcd;
    }
    
    #index-content {
    margin: 8px;
    }
    
    <table width="319" align="center" style="border-collapse:collapse;">
      <tr>
        <td width="311" height="126" valign="top" bgcolor="#000000">
          <table width="100%" cellpadding="8" style="border-collapse:collapse;">
            <tr>
              <td valign="top">
                  <div align="center" id="index-container">
                        <div>a</div>
                  </div>
               </td>
              <td rowspan="3" valign="top" nowrap>b</td>
            </tr>
          </table>
        </td>
      </tr>
    </table>

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Here you go, IE6 has a 3px margin bug that can be fixed. This is why I used conditional comments.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    #container {
    width:303px;
    padding:8px;
    background:#000;
    margin:auto;
    }
    #side {
    border:1px solid #FFF;
    background:#507bcd;
    float:left;
    width:136px;
    text-align:center;
    padding:4px
    }
    #main {
    margin-left:150px;
    color:#FFF;
    }
    .clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    }
    .clearfix {
    display: inline-block;
    }
    /* Hides from IE-mac \*/
    * html .clearfix {
    height: 1&#37;;
    }
    .clearfix {
    display: block;
    }
    /* End hide from IE-mac */
    </style>
    <!--[if IE]>
    <style type="text/css">
    #side {
    margin-right:-3px;
    }
    #main {
    margin-left:147px;
    height:1%;
    }
    </style>
    <![endif]-->
    </head>
    <body>
    <div id="container" class="clearfix">
    	<div id="side">a</div>
    	<div id="main">b</div>
    </div>
    </body>
    </html>
    You also need to clear any floats. I've done this by using the fix at http://www.positioniseverything.net/easyclearing.html
    ||||If you are getting paid to do a job, don't ask for help on it!||||


  •  

    Posting Permissions

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