Hi,
I'm a newbie and can't get the background images in the left and right cells to display in firefox or netscape.
They display fine in ie.
below is code, then css.
Any help would be apprediated. It seems like is should be an easy fix, if I knew what I was doing
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<meta name="keywords" content="basketball,coach,basketball camp"/>
<meta name="description" content="Academy1 basketball camp"/>
<META name="revisit-after" content="15 days"/>
<META name="robots" content="index, follow"/>
<META name="Rating" content="General"/>
<META name="Robots" content="All"/>
<style type="text/css">
<!--
td {
background-attachment: fixed;
background-repeat: no-repeat;
background-position: top;
}
-->
</style>
<link href=http://www.webdeveloper.com/forum/archive/index.php/"academy.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<table width="100%" cellspacing="0" cellpadding="20">
<tr bgcolor="#000000">
<td> </td>
<td> <img src=http://www.webdeveloper.com/forum/archive/index.php/"images/spacer.gif" height="50" width="1"/> </td>
<td></td>
</tr>
<tr bgcolor="#FFFFFF">
<td background="images/indexbackl.gif" align="top" height="382" width="220">
<div align="right"><a href=http://www.webdeveloper.com/forum/archive/index.php/"index.shtml" title="Return Home"> <img src="images/logo.gif" valign="top" border="0" /> </a> </div>
<!--#include file="nav.ssi" --> </td>
<td valign="top"> <h1>Mission
</h1>
<p> text here
</p> </td>
<td background="images/backrt.jpg" width="60" ></td>
</tr>
<tr bgcolor="#000000">
<td><img src=http://www.webdeveloper.com/forum/archive/index.php/"images/spacer50.gif" /> </td>
<td> </td>
<td></td>
</tr>
</table>
</body>
</html>
CSS-------------------------------------------------------------------
body{background: #000000;
}
table{
border: none;
}
td {
font-family: Arial, sans-serif;
font-size: 14px;
font-style: normal;
font-weight: normal;
color: #000000;
border: none;
}
td.cell {background-attachment: fixed;
background-repeat: no-repeat;
background-position: center;
}
a:link {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: normal;
font-weight: bold;
color: #000000;
text-decoration: none;
border: none;
}
a:visited {
font-family: Arial, sans-serif;
font-size: 14px;
font-style: normal;
font-weight: bold;
color: #666666;
text-decoration: none;
border: none;
}
a:hover {
font-family: Arial, sans-serif;
font-size: 14px;
font-style: underline;
font-weight: bold;
color: #CC0000;
text-decoration: none;
border: none;
}
a:active {
font-family: Arial, sans-serif;
font-size: 14px;
font-style: normal;
font-weight: bold;
font-variant: bold;
color: #000000;
text-decoration: none;
border: none;
}
H1 {
font-family: Arial, sans-serif;
font-size: 20px;
font-style: normal;
font-weight: bold;
color: #333399;
}
H2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
color: #000000;
}
H3 {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
color: #0000C0;
}
H4 {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: bold;
color: #C00000;
}Does it validate?Whereever you are currently using <td background="x">, try using this instead:
<td style="background-image:url(x)">
Firefox follows the rules of XHTML much more strictly than IE and therefore does not support the background attribute for the <td> tag. This fix should work. Good luck with it.
I'm a newbie and can't get the background images in the left and right cells to display in firefox or netscape.
They display fine in ie.
below is code, then css.
Any help would be apprediated. It seems like is should be an easy fix, if I knew what I was doing
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<meta name="keywords" content="basketball,coach,basketball camp"/>
<meta name="description" content="Academy1 basketball camp"/>
<META name="revisit-after" content="15 days"/>
<META name="robots" content="index, follow"/>
<META name="Rating" content="General"/>
<META name="Robots" content="All"/>
<style type="text/css">
<!--
td {
background-attachment: fixed;
background-repeat: no-repeat;
background-position: top;
}
-->
</style>
<link href=http://www.webdeveloper.com/forum/archive/index.php/"academy.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<table width="100%" cellspacing="0" cellpadding="20">
<tr bgcolor="#000000">
<td> </td>
<td> <img src=http://www.webdeveloper.com/forum/archive/index.php/"images/spacer.gif" height="50" width="1"/> </td>
<td></td>
</tr>
<tr bgcolor="#FFFFFF">
<td background="images/indexbackl.gif" align="top" height="382" width="220">
<div align="right"><a href=http://www.webdeveloper.com/forum/archive/index.php/"index.shtml" title="Return Home"> <img src="images/logo.gif" valign="top" border="0" /> </a> </div>
<!--#include file="nav.ssi" --> </td>
<td valign="top"> <h1>Mission
</h1>
<p> text here
</p> </td>
<td background="images/backrt.jpg" width="60" ></td>
</tr>
<tr bgcolor="#000000">
<td><img src=http://www.webdeveloper.com/forum/archive/index.php/"images/spacer50.gif" /> </td>
<td> </td>
<td></td>
</tr>
</table>
</body>
</html>
CSS-------------------------------------------------------------------
body{background: #000000;
}
table{
border: none;
}
td {
font-family: Arial, sans-serif;
font-size: 14px;
font-style: normal;
font-weight: normal;
color: #000000;
border: none;
}
td.cell {background-attachment: fixed;
background-repeat: no-repeat;
background-position: center;
}
a:link {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: normal;
font-weight: bold;
color: #000000;
text-decoration: none;
border: none;
}
a:visited {
font-family: Arial, sans-serif;
font-size: 14px;
font-style: normal;
font-weight: bold;
color: #666666;
text-decoration: none;
border: none;
}
a:hover {
font-family: Arial, sans-serif;
font-size: 14px;
font-style: underline;
font-weight: bold;
color: #CC0000;
text-decoration: none;
border: none;
}
a:active {
font-family: Arial, sans-serif;
font-size: 14px;
font-style: normal;
font-weight: bold;
font-variant: bold;
color: #000000;
text-decoration: none;
border: none;
}
H1 {
font-family: Arial, sans-serif;
font-size: 20px;
font-style: normal;
font-weight: bold;
color: #333399;
}
H2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
color: #000000;
}
H3 {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
color: #0000C0;
}
H4 {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: bold;
color: #C00000;
}Does it validate?Whereever you are currently using <td background="x">, try using this instead:
<td style="background-image:url(x)">
Firefox follows the rules of XHTML much more strictly than IE and therefore does not support the background attribute for the <td> tag. This fix should work. Good luck with it.