...

View Full Version : please help me convert tables to CSS



jasonc310771
02-22-2008, 09:50 PM
i have this last piece of code to convert, please can someone tell me the correct way to code this in CSS.

thank you




#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>

_Aerospace_Eng_
02-23-2008, 01:16 AM
Here you go, IE6 has a 3px margin bug that can be fixed. This is why I used conditional comments (http://quirksmode.org/css/condcom.html).

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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum