Google Groups no longer supports new Usenet posts or subscriptions. Historical content remains viewable.
Dismiss

Trying to replace html table (box with rounded corners) with css equivalent.

0 views
Skip to first unread message

Chuck

unread,
Aug 10, 2004, 11:13:21 AM8/10/04
to
Hi!

I am obviously new to CSS.

I am trying to replace the below listed html table with its CSS equivalent.

Existing HTML:

<table border="0" cellpadding="0" cellspacing="0" width="99%" id="table5">
<tr>
<td bgcolor="#FFFFFF">
<img name="content_r1_c1" src="web/images/content_r1_c1.gif"
width="16" height="17" border="0" alt=""></td>
<td background="web/images/content_r1_c2.gif"></td>
<td bgcolor="#FFFFFF">
<img name="content_r1_c3" src="web/images/content_r1_c3.gif"
width="19" height="17" border="0" alt=""></td>
</tr>
<tr>
<td background="web/images/content_r2_c1.gif">&nbsp;</td>
<td bgcolor="#FFFFFF" align="left" valign="top" width="100%"
style="font-family: Tahoma; font-size: 10pt; color: #000000">
<!-- #BeginEditable "Main" -->&nbsp;<!-- #EndEditable --></td>
<td background="web/images/content_r2_c3.gif">&nbsp;</td>
</tr>
<tr>
<td>
<img name="content_r3_c1" src="web/images/content_r3_c1.gif"
width="16" height="25" border="0" alt=""></td>
<td background="web/images/content_r3_c2.gif">&nbsp;</td>
<td>
<img name="content_r3_c3" src="web/images/content_r3_c3.gif"
width="19" height="25" border="0" alt=""></td>
</tr>
<tr>
<td colspan="3">
<!--webbot bot="Include" U-Include="bottomnavigationbar.htm"
TAG="BODY" --></td>
</tr>
</table>

Attempt at CSS:

/* Beginning of Rounded Cornered Main Table */

.roundcont {
width: 99%;
height: 500px;
padding: 0;
background-color: white;
color: #ffffff;
}

.roundcont p {
margin: 0 10px;
}

.roundtop {
background: url(web/images/content_r1_c2.gif) no-repeat top right;
}

.roundbottom {
background: url(web/images/content_r3_c2.gif) no-repeat top right;
}

img.corner {
width: 15px;
height: 15px;
border: none;
display: block;
}

New html:

<html>
<head>
<title></title>
</head>
<body>
<div class="roundcont">
<div class="roundtop">
<img src="web/images/content_r1_c1.gif" alt=""
width="15" height="15" class="corner"
style="display: none" />
</div>

<p></p>

<div class="roundbottom">
<img src="web/images/content_r3_c3" alt=""
width="15" height="15" class="corner"
style="display: none" />
</div>
</div>
</body>
</html>

Any ideas would be appreciated...

0 new messages