5 replies [Last post]
Techbuilder
Techbuilder's picture
Offline
Regular
Last seen: 2 years 42 weeks ago
Timezone: GMT-8
Joined: 2011-01-06
Posts: 14
Points: 18

Here's how it's supposed to look
(this is how it looks in chrome and internet explorer Cool

Here's how it looks in firefox

Here's my code

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>CPDEngineering</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="style9.css" rel="stylesheet" type="text/css" media="screen">
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
 
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}
 
function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
 
 
 
<table id="Table_01" width="951" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td width="13" height="1311" rowspan="13">
			</td>
		<td width="937" height="19" colspan="13">
			</td>
		<td>
			</td>
	</tr>
	<tr>
		<td width="13" height="3">
			</td>
		<td colspan="10" rowspan="2">
			<img src="images/Banner.gif" width="897" height="158" alt=""></td>
		<td width="27" height="3" colspan="2">
			</td>
		<td>
			</td>
	</tr>
	<tr>
		<td width="13" height="1289" rowspan="11">
			</td>
		<td width="27" height="233" colspan="2" rowspan="4">
			</td>
		<td>
			</td>
	</tr>
	<tr>
		<td width="3" height="1134" rowspan="10">
			</td>
		<td width="890" height="14" colspan="8">
			</td>	</tr>
	<tr>
		<td colspan="2">
		  <a href="http://www.google.com" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Home','','../../Documents/CPD_Photoshop/Navbar1.1.jpg',0)"><img src="../../Documents/CPD_Photoshop/Navbar1.jpg" name="Home" width="126" height="51" border="0" alt=""></a></td>
		<td>
		  <a href="http://www.google.com" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Manufacturing','','../../Documents/CPD_Photoshop/Navbar2 (2).jpg',0)"><img src="../../Documents/CPD_Photoshop/Navbar2.jpg" name="Manufacturing" width="154" height="51" border="0" alt=""></a></td>
		<td>
		  <a href="http://www.google.com" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Services','','../../Documents/CPD_Photoshop/Navbar3 (2).jpg',0)"><img src="../../Documents/CPD_Photoshop/Navbar3.jpg" name="Services" width="121" height="51" border="0" alt=""></a></td>
		<td>
		  <a href="http://www.google.com" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('About Us','','../../Documents/CPD_Photoshop/Navbar4 (2).jpg',0)"><img src="../../Documents/CPD_Photoshop/Navbar4.jpg" name="About Us" width="129" height="51" border="0" alt=""></a></td>
		<td>
		  <a href="http://www.google.com" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Contact Us','','../../Documents/CPD_Photoshop/Navbar5 (2).jpg',0)"><img src="../../Documents/CPD_Photoshop/Navbar5.jpg" name="Contact Us" width="132" height="51" border="0" alt=""></a></td>
		<td colspan="2">
		  <a href="http://www.google.com" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('RequestforQoute','','../../Documents/CPD_Photoshop/Navbar6 (2).jpg',0)"><img src="../../Documents/CPD_Photoshop/Navbar6.jpg" name="RequestforQoute" width="228" height="51" border="0" alt=""></a></td>
		<td>
			</td>
	</tr>
	<tr>
		<td width="890" height="31" colspan="8" rowspan="2">
			</td>
		<td>
			</td>
	</tr>
	<tr>
		<td width="31" height="367" colspan="3" rowspan="2">
			</td>
		<td>
			</td>
	</tr>
	<tr>
		<td width="26" height="342">
			</td>
		<td colspan="6" rowspan="4">
<div style="position:relative; height:1000px">
<div style="position:absolute;z-index:1">
<img src="images/TemplateBack.jpg" alt="">
</div>
 
<div style="position:absolute;z-index:1"></div>
<div style="position:absolute; top:606px; left: 102px; width:643px; height:139px; z-index:7; color:#FFF; font:'Myriad Pro'; font-size:120%;">
  <div align="left">
    <p align="center">
 
    <p ALIGN="CENTER">
 
    <p ALIGN="CENTER">
 
    <p ALIGN="CENTER"><strong>Custom  Product Development Corporation offers complete mechanical  engineering and design/drafting support on its in-house Auto CAD,  Solid Works and Metalsoft Unfold/Fold CAD/CAM systems to help  customers develop new products and support the transition from  prototype through production runs.</strong></p>
  </div>
  </div>
  <div style="position:absolute; top:514px; left: 207px; width:457px; height:50px; z-index:8; color:#FFF; font:'Myriad Pro'; font-size:180%;">
  <div align="left">
    <p align="center">
 
    <p ALIGN="CENTER">
 
    <p ALIGN="CENTER">
 
    <p ALIGN="CENTER"><strong>Engineering  &amp; Design Support:</strong></p>
 
  </div>
</div>
</td>
		<td width="26" height="342">
			</td>
		<td>
			</td>
	</tr>
	<tr>
		<td width="26" height="4">
			</td>
		<td width="34" height="4" colspan="3">
			</td>
		<td width="23" height="689" rowspan="5">
			</td>
		<td>
			</td>
	</tr>
	<tr>
		<td width="26" height="265">
			</td>
		<td width="26" height="265">
			</td>
		<td width="8" height="265" colspan="2">
			</td>
		<td>
			</td>
	</tr>
	<tr>
		<td width="26" height="420" rowspan="3">
			</td>
		<td width="34" height="401" colspan="3" rowspan="2">
			</td>
		<td>
			</td>
	</tr>
	<tr>
		<td width="838" height="12" colspan="6">
			</td>
		<td>
			</td>
	</tr>
	<tr>
		<td width="872" height="19" colspan="9">
			</td>
		<td>
			</td>
	</tr>
	<tr>
		<td>
            <div style="position:absolute;top:1060px;left:750px; width:600px; height:430px; z-index:5;font-size:200%;">
      <a href="http://www.google.com" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Requestfor','','../../Documents/CPD_Photoshop/Request-for-qoute.png',0)"><img src="../../Documents/CPD_Photoshop/Requestqoute.png" name="Requestfor" width="176" height="31" border="0" alt=""></a>
      </div>
 
 
			<img src="images/spacer.gif" width="13" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="13" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="3" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="26" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="100" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="154" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="121" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="129" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="132" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="202" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="26" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="4" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="4" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="23" height="1" alt=""></td>
		<td></td>
	</tr>
</table>
 
</html>

CSS

body {
	width:951px;
width:951px;
margin: 0 auto;
	text-align:center;
	background-color:#000;
 
}
 
#container{
	width:951px;
	margin:auto;
	margin-left:auto;
	margin-right:auto;
	text-align:left;
}

Here is the homepage of mine that works
in all browsers but I don't see the difference in coding so why is the one up top all strange?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>CPDwebsiteFinal2</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="style.css" rel="stylesheet" type="text/css" media="screen">
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
 
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}
 
function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
 
 
<table id="Table_01" width="950" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td rowspan="11">
			</td>
		<td width="937" height="22" colspan="11">
			</td>
	</tr>
	<tr>
		<td width="16" height="1289" rowspan="10">
			<img src="images/spacer.gif" width="16" height="1289" alt=""></td>
		<td width="890" height="155" colspan="8">
        <img src="ExtraPhotos/images/Banner.gif" width="897" height="158" alt=""></td>
 
		<td width="31" height="233" colspan="2" rowspan="4">
			<img src="images/spacer.gif" width="31" height="233" alt=""></td>
	</tr>
	<tr>
		<td width="890" height="21" colspan="8">
			</td>
	</tr>
	<tr>
		<td>
		  <a href="file:///C:/Users/MTL/Desktop/CPDwebsiteFinal2.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Home','','WebExxx/images/images/Navbar1.1.jpg',0)"><img src="WebExxx/images/Navbar1.jpg" name="Home" width="126" height="51" border="0" alt=""></a></td>
		<td>
		  <a href="file:///C:/Users/MTL/Desktop/Manufacturing/CPDManufacturing.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Manufacturing','','WebExxx/images/images/Navbar2.jpg',1)"><img src="WebExxx/images/Navbar2.jpg" name="Manufacturing" width="154" height="51" border="0" alt=""></a></td>
		<td>
		  <a href="file:///C:/Users/MTL/Desktop/Services/CPDservices.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Services','','WebExxx/images/images/Navbar3.jpg',0)"><img src="WebExxx/images/Navbar3.jpg" name="Services" width="121" height="51" border="0" alt=""></a></td>
		<td colspan="2">
		  <a href="file:///C:/Users/MTL/Desktop/AboutUs/CPDAboutus.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('About us','','WebExxx/images/images/Navbar4.jpg',0)"><img src="WebExxx/images/Navbar4.jpg" name="About us" width="129" height="51" border="0" alt=""></a></td>
		<td colspan="2">
		  <a href="file:///C:/Users/MTL/Desktop/Contact%20Us/CPDcontact-us.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Contact Us','','WebExxx/images/images/Navbar5.jpg',0)"><img src="WebExxx/images/Navbar5.jpg" name="Contact Us" width="132" height="51" border="0" alt=""></a></td>
		<td colspan="0">
			<a href="http://www.cheesycam.com" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Request for Qoute','','WebExxx/images/images/Navbar6.jpg',0)"><img src="WebExxx/images/Navbar6.jpg" name="Request for Qoute" width="228" height="51" border="0" alt=""></a></td>
	</tr>
	<tr>
		<td colspan="8">
			<img src="images/CPDwebsiteFinal2_13.jpg" width="890" height="6" alt=""></td>
	</tr>
	<tr>
		<td colspan="8">
 
<div style="position:relative; height:367px">
<div style="position:absolute;z-index:1">
<img src="images/Body1.jpg" alt="">
</div>
<div style="position:absolute; top:123px; left: 443px; width:442px; height:188px; z-index:2; color:#FFF; font:Calibri; font-size:105%">
  <div align="left">
    <p><b>
      &quot; With more than 35 years of experience,    <br>
      CUSTOM PRODUCT DEVELOPMENT CORPORATION <br>
      provides innovative/low cost engineered 
      mechanical components and Turn-Key
      Assembly solutions.Our technical design expertise,
      coupled with creative manufacturing 
      and supply chain control, ensures that our 
      customers receive the best possible service
      available in today's competitive industry.&quot;</b></p>
    <p>&nbsp;</p>
  </div>
</div>
</div>  
</td>
  <td width="8" height="367">
			<img src="images/spacer.gif" width="8" height="367" alt=""></td>
		<td width="23" height="1056" rowspan="6">
			<img src="images/spacer.gif" width="23" height="1056" alt=""></td>
	</tr>
	<tr>
		<td width="898" height="4" colspan="9">
			<img src="images/spacer.gif" width="898" height="4" alt=""></td>
	</tr>
	<tr>
		<td colspan="4">
			<div style="position:relative; height:261px">
<div style="position:absolute;z-index:1">
<img src="images/Leftimg.jpg" alt="">
</div>
<div style="position:absolute; top:74px; left: 170px; width:346px; height:150px; z-index:2; color:#FFF; font:Calibri; font-size:115%">
  <div align="left">
    <p><b>
      We pride ourselves on outstanding 
      customer service and product quality.  
      Whether you are a current customer, or a 
      potentially new customer, we take a genuine 
      interest in your product requirements. 
      Customer loyalty is a priority
      at Custom Product Development Corporation.</b> 
    </p>
    <p>&nbsp;</p>
  </div>
</div>
</div>  
</td>
		<td colspan="2" rowspan="2">
			<img src="images/CPDwebsiteFinal2_19.jpg" width="82" height="265" alt=""></td>
		<td colspan="2">
			<img src="images/Rightbodyimg.jpg" width="291" height="261" alt=""></td>
		<td width="8" height="265" rowspan="2">
			<img src="images/spacer.gif" width="8" height="265" alt=""></td>
	</tr>
	<tr>
		<td colspan="4">
			<img src="images/CPDwebsiteFinal2_22.jpg" width="517" height="4" alt=""></td>
		<td colspan="2">
			<img src="images/CPDwebsiteFinal2_23.jpg" width="291" height="4" alt=""></td>
	</tr>
 
    <tr>
		<td width="898" height="401" colspan="9">
 
          <div id="content">
          <div style="position:relative; height:401px">
    <div style="position:absolute;z-index:1"> 
        <img src="ExtraPhotos/images/Borderbottom.png" alt="">
    </div>
    <div style="position:absolute;top:44px;left:-115px; width:600px; height:430px; z-index:2;font-size:200%;">
      <a href="http://www.ebay.com" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Precision Machining','','WebExxx/images/images/Precision-Maching.jpg',0)"><img src="WebExxx/images/Precision-Maching.jpg" name="Precision Machining" width="247" height="148" border="0" alt=""></a></div>
</div>
 
         <div style="position:absolute;top:935px;left:535px; width:600px; height:430px; z-index:2;font-size:200%;">
           <a href="http://www.google.com" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Precision Sheetmetal','','WebExxx/images/images/Precision-Sheet-metal.jpg',0)"><img src="WebExxx/images/Precision-Sheet-metal.jpg" name="Precision Sheetmetal" width="244" height="148" border="0" alt=""></a></div>
</div>
 
 <div style="position:absolute;top:935px;left:800px; width:600px; height:430px; z-index:2;font-size:200%;">
 <a href="http://www.cpd-corp.com" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Gasket','','WebExxx/images/images/Gasket-die-cutting-.jpg',0)"><img src="images/Gasket-die-cutting-.jpg" alt="Gasket" name="Gasket" width="245" height="148" border="0"></a>
 
 
 
 
 <div style="position:absolute;top:158px;left:-530px; width:600px; height:430px; z-index:2;font-size:200%;">
   <a href="http://www.ebay.com" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Assembly','','WebExxx/images/images/Assembly-&-turn-key.jpg',0)"><img src="WebExxx/images/Assembly-&-turn-key.jpg" name="Assembly" width="244" height="146" border="0" alt=""></a></div>
</div>
 
 <div style="position:absolute;top:1090px;left:535px; width:600px; height:430px; z-index:2;font-size:200%;">
   <a href="http://www.instructables.com" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Engineering','','CPD folder/images/Engineering.jpg',0)"><img src="ExtraPhotos/images/Engineering.jpg" name="Engineering" width="244" height="146" border="0" alt=""></a></div>
 
<div style="position:absolute;top:1090px;left:800px; width:600px; height:430px; z-index:2;font-size:200%;">
    <a href="http://www.hackaday.com" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Quality','','CPD folder/images/Quality-Assurance.jpg',0)"><img src="images/Quality-Assurance.jpg" name="Quality" width="244" height="146" border="0" alt=""></a></div>
 
 
 
    </tr>
	<tr>
		<td width="898" height="19" colspan="9">
			<img src="images/spacer.gif" width="898" height="19" alt=""></td>
	</tr>
 
    <tr>
		<td>
			<img src="images/spacer.gif" width="13" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="16" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="126" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="154" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="121" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="116" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="13" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="69" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="63" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="228" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="8" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="23" height="1" alt=""></td>
	</tr>

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 2 weeks 2 days ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2037
Points: 2259

Site checks seems to be for

Site checks seems to be for completed pages not for posting problems but I'll have a go.

Tables based layout, deprecated markup, obtrusive scripting, inline styling and improper use of positioning all add up to throwing it away and starting again.

Probably not what you wanted to hear but it's most likely the best advice.

Techbuilder
Techbuilder's picture
Offline
Regular
Last seen: 2 years 42 weeks ago
Timezone: GMT-8
Joined: 2011-01-06
Posts: 14
Points: 18

I know but this is due friday

I know but this is due friday and I have a 11 pages that are the same coding so I can't do that at this moment
but please any help would be so much appreciated

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 2 weeks 2 days ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2037
Points: 2259

Well, there's no standard for

Well, there's no standard for rendering invalid code. When you don't follow the rules the browser doesn't have to either. It usually will unless it knows you have a deadline.

Techbuilder
Techbuilder's picture
Offline
Regular
Last seen: 2 years 42 weeks ago
Timezone: GMT-8
Joined: 2011-01-06
Posts: 14
Points: 18

I admit defeat and don't have

I admit defeat and don't have a choice but to start from scratch

any good css tutorial sites that show you how to do it the right way?

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 2 weeks 2 days ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2037
Points: 2259

Techbuilder wrote:I admit

Techbuilder wrote:

I admit defeat and don't have a choice but to start from scratch

any good css tutorial sites that show you how to do it the right way?

Yes, http://htmldog.com has some great tutorials. Do not skip the HTML tutorials. Do them in order.

It's not an overnight thing. You're not going to change your philosophy in one day.