CSS Forum

**fiveacehosting** · 11-09-2008, 03:32 PM

Hi i created my template and sliced it then exported it using photoshop (please everyone thats going to post "dont use photoshop start from scratch" please dont ive heard it before :P) Then i went into dreamweaver and converted it to CSS. The only problem is its not working in firefox
www.wildgraphics.info
www.wildgraphics.info/landing.html
www.techsupportgonebad.com
These are all the templates i have made that are not working in firefox

Html (for www.wildgraphics.info):

Code:

<!DOCTYPE HTML SYSTEM>
<head>
<title>Untitled-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
	background-image: url(back.png);
}
-->
</style>
<link href="css/main.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
.style1 {
	font-family: "arial rounded MT Bold";
	font-size: large;
	color: #FFFFFF;
}
-->
</style></head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div align="center">
  <!-- ImageReady Slices (Untitled-1) -->
  <table id="Table_01" width="750" height="887" border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td colspan="2">&nbsp;</td>
	    <td colspan="3"><div id="header"></div></td>
	    <td colspan="2">&nbsp;</td>
	  </tr>
    <tr>
      <td rowspan="6"><img src="images/index_04.jpg" width="103" height="643" alt=""></td>
	    <td colspan="5"><div id="title"></div></td>
	    <td rowspan="6">
		    <img src="images/index_06.jpg" width="81" height="643" alt=""></td>
    </tr>
    <tr>
      <td>
        <img src="images/index_07.jpg" width="2" height="7" alt=""></td>
	    <td colspan="3"><div id="seperator"></div></td>
	    <td>
		    <img src="images/index_09.jpg" width="2" height="7" alt=""></td>
	  </tr>
    <tr>
      <td colspan="5"><div id="nav"></div></td>
    </tr>
    <tr>
      <td>
        <img src="images/index_11.jpg" width="2" height="442" alt=""></td>
	    <td><div id="left"></div></td>
	    <td><div id="content">Hello and welcome to wild graphics. We aim to give out the highest quality graphic design on the web as well as keeping our prices rock bottom. All our work can be viewed in the "work" page on the navigation bar. This template was designed by us. We will design any web graphic you wish, from web templates to corperate logos. We do the lot

Using our expert knowledge and high quality computer programs such as photoshop, we can deliver your website perfectly. We also offer hosting services for $5 a month, Domains for $9 a year and even dedicated hosting for you.

If you wish to resell our services you may. Contact us about the control panel we are working on for resellers. Soon resellers will be able to sell web hosting, logos and keep the profits to themselves. All you have to do is get a quote off us and purchase the work (10% reseller discount) And pass it on to your customer. We even give you master reseller rights so you can claim it as your own

If this doesn't persuade you we are the right people to go with why not email us here

 

Thanks

Andrew hamilton, Administrator and CEO of Wildgraphics.info</div></td>
	    <td><div id="right"></div></td>
	    <td>
		    <img src="images/index_15.jpg" width="2" height="442" alt=""></td>
    </tr>
    <tr>
      <td colspan="5"><div id="footer"></div></td>
    </tr>
    <tr>
      <td colspan="5">&nbsp;</td>
    </tr>
  </table>
  <!-- End ImageReady Slices -->
</div>
</body>
</html>

CSS (wildgraphics.info):

Code:

#content {
	background-image: url(../images/index_13.jpg);
	height: 442px;
	width: 537px;
	background-repeat: repeat-y;
	display: block;
	a:active;
	a:link;
	}
#spacer { 
  clear: both; 
  overflow: hidden; 
}
#header {
	background-image: url(../images/index_02.jpg);
	height: 244px;
	width: 562px;
	display: block;
}
#title {
	background-image: url(../images/index_05.jpg);
	height: 86px;
	width: 566px;
	display: block;
}
#seperator {
	background-image: url(../images/index_08.jpg);
	height: 7px;
	width: 562px;
	display: block;
}
#nav {
	background-image: url(../images/index_10.jpg);
	height: 50px;
	width: 566px;
	display: block;
}
#footer {
	background-image: url(../images/index_16.jpg);
	height: 30px;
	width: 566px;
	background-repeat: repeat;
	display: block;
}
#right {
	background-image: url(../images/index_14.jpg);
	background-repeat: repeat-y;
	float: right;
	display: block;
	height: 442px;
	width: 14px;
}
#left {
	background-image: url(../images/index_12.jpg);
	background-repeat: no-repeat;
	background-attachment: scroll;
	float: left;
	display: block;
	height: 442px;
	width: 11px;
}

Thanks

**LadynRed** · 11-10-2008, 04:19 PM

Well, for one thing you don't have a valid DOCTYPE, start there, it's something you MUST have if you expect ANY kind of cross-browser compatibility.

**fiveacehosting** · 11-17-2008, 09:10 AM

Found the solution. You was right. Adding the XHTML transitional 1.0 Doctype:
<!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">
At the top works