No replies
five40
Offline
newbie
Last seen: 17 years 47 weeks ago
Joined: 2004-11-11
Posts: 1
Points: 0

I have a table that appears in an ASP.NET site that I would like to replace with CSS.

I have got to the point where it looks correct in IE but it is wrong in Netscape and Opera (all latest versions).

Here is the code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="/ORStore/ORStore.css" rel="stylesheet" type="text/css">
<link href="/ORStore/site.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
.psBorder {
	border-width: 1px;
	border-style: solid;
	border-top-color: #999966;
	border-bottom-color: #666633;
	border-right-color: #666633;
	border-left-color: #999966;
	width: 375;
	padding: 5px;
	position: absolute;
}
.psColor {
	background-color: #666633;
	position: relative;
	height: 100%;
}
.psGuts {
	padding-top: 5px;
	padding-right: 8px;
	padding-left: 8px;
	padding-bottom: 3px;
	font-family: Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #CCCC99;
	position: relative;
	font-size: 11px;
}
.psPic {
	height: 100px;
	float: left;
	margin-right: 5px;
	background-color: #000000;
	border-right-width: 5px;
	border-right-style: solid;
	border-right-color: #000000;
}
.psPrice {
	float: right;
	padding-top: 10px;
	padding-right: 10px;
	width: 150px;
	font-size: 12px;
	color: #FFFFCC;
	text-align: right;
}
.psButton {
	float: left;
	clear: none;
	width: 65px;
}
.ModelName, a.ModelName:link, a.ModelName:visited, a.ModelName:active{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight: bolder;
	color: #FFFFCC;
	text-decoration: none;
	padding-left: 4px;
	left: -5px;
	text-indent: -5px;
}
a.ModelName:hover {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight: bolder;
	text-decoration: none;
	color:#FFFFCC;
	background-color:#CC6600;
}
-->
</style>
</head>

<body bgcolor="#000000">
	
<div class="psBorder">
  <div class="psColor"> 
    <div class="psPic"> <img name="picture" src="" width="100" height="100" alt="Picture of product for sale goes here"> 
    </div>
    <div class="psGuts"> <a class="ModelName" href="#">TYPICAL MODEL NAME </a> 
      <br>
      Model information here. This is info, test stuff. Wow, very cool... <br>
      <div style="position:absolute; bottom:0px; left: 0px; width: 260"> 
        <div class="psPrice">PRICE: $19.00</div>
        <div class="psButton"><img name="button" src="" width="63" height="25" alt="More Info jpeg image goes here"></div>
      </div>
    </div>
  </div>
</div>
</body>
</html>

Thank you for any help!!

Rick D.

PS- I forget to mention that the picture height will change depending on the product. The minimum height is 100px, the maximum is up to about 250px. The picture width is always 100px.

You can see a live version of this page with the old style TABLES here: http://secure.rollerwarehouse.com/orstore/productsearch.aspx?CategoryID=180&txtsearch=180MGM