Rounded Rectangle Table IE and Netscape - HTML forum at WebmasterWorld - WebmasterWorld

Forum Moderators: open

Message Too Old, No Replies

Rounded Rectangle Table IE and Netscape

sbeausol

1:50 am on Oct 3, 2003 (gmt 0)

10+ Year Member

The page linked below resolves right in mozilla/netscape, but not in IE6.... can't figure out why. any thoughts?

Thanks...

The link: <sorry, no personal URLs>

The Code:

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="css/style.css">
</head>

<body>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td rowspan="2" colspan="2" align="left" valign="top"><img src="/images/topleft_corner.gif" width="9" height="10"></td>
<td height="2" bgcolor="#C6AC6F" ><img src="/images/spacer.gif" width="1" height="2"></td>
<td rowspan="2" colspan="2" align="right" valign="top"><img src="images/topright_corner.gif" width="9" height="10"></td>
</tr>
<tr>
<td bgcolor="#E8F6FE"><img src="images/spacer.gif" height="1" width="8"/></td>
</tr>
<tr>
<td bgcolor="#C6AC6F" width="2"><img src="/images/spacer.gif" width="2" height="1"></td>
<td bgcolor="#E8F6FE"><img src="images/spacer.gif" width="7" height="1"></td>
<td width="680" height="600" >
</td>
<td bgcolor="#E8F6FE"><img src="images/spacer.gif" width="7" height="1"></td>
<td bgcolor="#C6AC6F" width="2"><img src="/images/spacer.gif" width="2" height="1"></td>
</tr>
<tr>
<td rowspan="2" colspan="2" valign="bottom" align="left"><img src="images/bottomleft_corner.gif" width="9" height="10"></td>
<td bgcolor="#E8F6FE"><img src="images/spacer.gif" width="1" height="1"></td>
<td rowspan="2" colspan="2" align="right" valign="bottom"><img src="images/bottomright_corner.gif" width="9" height="10"></td>
</tr>
<tr height="2">
<td bgcolor="#C6AC6F"><img src="images/spacer.gif" width="1" height="2"></td>
</tr>
</table>
</body>
</html>

[edited by: tedster at 3:38 am (utc) on Oct. 3, 2003]

lorax

2:01 am on Oct 3, 2003 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

sbeausol,
Welcome to WebmasterWorld.

It rendered fine in my IE6.0.

sbeausol

2:22 am on Oct 3, 2003 (gmt 0)

10+ Year Member

sorry I had it mixed up... IE works, Moz/Netscape don't...

sbeausol

2:22 am on Oct 3, 2003 (gmt 0)

10+ Year Member

that is, when the rounded rectangle is nested in another table.... see the link if you can help

thanks....

DrDoc

3:19 am on Oct 3, 2003 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

It doesn't work how?

sbeausol

2:50 pm on Oct 3, 2003 (gmt 0)

10+ Year Member

When the table on its own, it renders perfectly in both browsers. When the table (rounded rectangle) is nested in another table, IE renders find, but Moz/Netscape fail to render the top and bottom borders (there are set at 2px but render quite larger). The borders are done using cells bgcolors and the corners are gif from photoshop...

anythoughts...

I can email the link if you like or I can send a zipped file.

thanks again

DrDoc

5:40 pm on Oct 3, 2003 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Maybe you should consider the 'bulletproof rounded corners' on albin.net?

BjarneDM

9:50 pm on Oct 3, 2003 (gmt 0)

10+ Year Member

get rid of the table, and do this instead:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#contents
{
border-color: #0F0 #F00 #0F0 #F00;
border-width: 10px;
border-style: solid;
padding: 10px;
}
</style>
</head>
<body>
<div id="contents">
<img style="position: absolute; top: 0px; left: 0px;" src="/images/topleft_corner.gif" width="9" height="10">
<img style="position: absolute; top: 0px; right: 0px;" src="images/topright_corner.gif" width="9" height="10">
<img style="position: absolute; bottom: 0px; left: 0px;" src="images/bottomleft_corner.gif" width="9" height="10"></td>
<img style="position: absolute; bottom: 0px; right: 0px;" src="images/bottomright_corner.gif" width="9" height="10"></td>
your text goes here
</div>
</body>
</html>

you'll have to mess around with the values, but you ought to get my drift :-)