PDA

View Full Version : Website shows up COMPLETELY WRONG!



mxzx800
Jan 17th, 2010, 07:45 PM
Hi, this is my problem:

I make a website in Dreamweaver.
I preview it from Dreamweaver in Safari and Firefox. Looks great, like it should.

I load it to the server. View it on the web, LOOKS TOTALLY WRONG!

I have absolutely no idea why this is, I have tried everything in my imagination, but to no avail.

here is what the site looks like on the web: http://www.tedstirediscounter.ca/Working%202/main/MAINPAGETRY2.html

I have attached a picture of what its supposed to look like.
http://i969.photobucket.com/albums/ae174/mxzx800/Screenshot2010-01-17at121142PM.png


Here is the code for the site, maybe you can see the problem from here.




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Web</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
<!--
body {
background-color: #4B6DAD;
}
-->
</style>
<script src="../../Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<script src="../../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="../../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
<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>
<link href="../../untitled.css" rel="stylesheet" type="text/css">
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="MM_preloadImages('images/home_roll.png','images/contactus_roll.png')">
<p>
<!-- ImageReady Slices (Untitled-2) -->
</p>
<p>&nbsp;</p>
<table width="960" height="721" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
<tr>
<td colspan="12">
<img src="images/mainpage1_01.png" alt="" width="960" height="33" border="0"></td>
</tr>
<tr>
<td colspan="2" rowspan="2" align="left" valign="top">
<img src="images/mainpage1_02.png" alt="" width="229" height="66" border="0"></td>
<td colspan="10">
<img src="images/mainpage1_03.png" alt="" width="731" height="32" border="0"></td>
</tr>
<tr>
<td rowspan="2">
<img src="images/mainpage1_04.png" alt="" width="129" height="89" border="0"></td>
<td align="left" valign="top"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image31','','images/home_roll.png',1)"><img src="images/mainpage1_05.png" name="Image31" width="97" height="34" border="0"></a></td>
<td colspan="3" rowspan="2"><img src="images/mainpage1_06.png" alt="" width="87" height="89" border="0"></td>
<td align="left" valign="top"><ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="#" title="." class="MenuBarItemSubmenu">.</a>
<ul>
<li><a href="#" title="Tires">Tires</a></li>
<li><a href="#" title="Rims">Rims</a></li>
<li><a href="#" title="Tire Safety">Tire Safety</a></li>
</ul>
</li>
</ul> </td>
<td rowspan="2">
<img src="images/mainpage1_08.png" alt="" width="63" height="89" border="0"></td>
<td align="left" valign="top"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image32','','images/contactus_roll.png',1)"><img src="images/mainpage1_09.png" name="Image32" width="142" height="34" border="0"></a></td>
<td colspan="2" rowspan="2">
<img src="images/mainpage1_10.png" alt="" width="94" height="89" border="0"></td>
</tr>
<tr>
<td colspan="2">
<img src="images/mainpage1_11.png" alt="" width="229" height="55" border="0"></td>
<td>
<img src="images/mainpage1_12.png" alt="" width="97" height="55" border="0"></td>
<td><img src="images/mainpage1_13.png" alt="" width="119" height="55" border="0"></td>
<td>
<img src="images/mainpage1_14.png" alt="" width="142" height="55" border="0"></td>
</tr>
<tr>
<td rowspan="2">
<img src="images/mainpage1_15.png" alt="" width="21" height="566" border="0"></td>
<td colspan="4" align="left" valign="top"><div id="Main_content">All the text you could ever want goes here, live!</div></td>
<td rowspan="2">
<img src="images/mainpage1_17.png" alt="" width="16" height="566" border="0"></td>
<td colspan="5" align="left" valign="top"> <div id="Spacer"> text test </div></td>
<td rowspan="2">
<img src="images/mainpage1_19.png" alt="" width="21" height="566" border="0"></td>
</tr>
<tr>
<td colspan="4">
<img src="images/mainpage1_20.png" alt="" width="451" height="151" border="0"></td>
<td colspan="5">
<img src="images/mainpage1_21.png" alt="" width="451" height="151" border="0"></td>
</tr>
<tr>
<td>
<img src="images/spacer.gif" width="21" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="208" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="129" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="97" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="17" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="16" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="54" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="119" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="63" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="142" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="73" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="21" height="1" alt=""></td>
</tr>
</table>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"../../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../../SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
</html>




I deeply appreciate any help you may have,
Thanks!

lewis_
Jan 17th, 2010, 08:02 PM
Hi, this is my problem:

I make a website in Dreamweaver.
I preview it from Dreamweaver in Safari and Firefox. Looks great, like it should.

I load it to the server. View it on the web, LOOKS TOTALLY WRONG!

I have absolutely no idea why this is, I have tried everything in my imagination, but to no avail.

here is what the site looks like on the web: http://www.tedstirediscounter.ca/Working%202/main/MAINPAGETRY2.html

I have attached a picture of what its supposed to look like.
http://i969.photobucket.com/albums/ae174/mxzx800/Screenshot2010-01-17at121142PM.png


Here is the code for the site, maybe you can see the problem from here.




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Web</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
<!--
body {
background-color: #4B6DAD;
}
-->
</style>
<script src="../../Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<script src="../../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="../../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
<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>
<link href="../../untitled.css" rel="stylesheet" type="text/css">
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="MM_preloadImages('images/home_roll.png','images/contactus_roll.png')">
<p>
<!-- ImageReady Slices (Untitled-2) -->
</p>
<p>&nbsp;</p>
<table width="960" height="721" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
<tr>
<td colspan="12">
<img src="images/mainpage1_01.png" alt="" width="960" height="33" border="0"></td>
</tr>
<tr>
<td colspan="2" rowspan="2" align="left" valign="top">
<img src="images/mainpage1_02.png" alt="" width="229" height="66" border="0"></td>
<td colspan="10">
<img src="images/mainpage1_03.png" alt="" width="731" height="32" border="0"></td>
</tr>
<tr>
<td rowspan="2">
<img src="images/mainpage1_04.png" alt="" width="129" height="89" border="0"></td>
<td align="left" valign="top"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image31','','images/home_roll.png',1)"><img src="images/mainpage1_05.png" name="Image31" width="97" height="34" border="0"></a></td>
<td colspan="3" rowspan="2"><img src="images/mainpage1_06.png" alt="" width="87" height="89" border="0"></td>
<td align="left" valign="top"><ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="#" title="." class="MenuBarItemSubmenu">.</a>
<ul>
<li><a href="#" title="Tires">Tires</a></li>
<li><a href="#" title="Rims">Rims</a></li>
<li><a href="#" title="Tire Safety">Tire Safety</a></li>
</ul>
</li>
</ul> </td>
<td rowspan="2">
<img src="images/mainpage1_08.png" alt="" width="63" height="89" border="0"></td>
<td align="left" valign="top"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image32','','images/contactus_roll.png',1)"><img src="images/mainpage1_09.png" name="Image32" width="142" height="34" border="0"></a></td>
<td colspan="2" rowspan="2">
<img src="images/mainpage1_10.png" alt="" width="94" height="89" border="0"></td>
</tr>
<tr>
<td colspan="2">
<img src="images/mainpage1_11.png" alt="" width="229" height="55" border="0"></td>
<td>
<img src="images/mainpage1_12.png" alt="" width="97" height="55" border="0"></td>
<td><img src="images/mainpage1_13.png" alt="" width="119" height="55" border="0"></td>
<td>
<img src="images/mainpage1_14.png" alt="" width="142" height="55" border="0"></td>
</tr>
<tr>
<td rowspan="2">
<img src="images/mainpage1_15.png" alt="" width="21" height="566" border="0"></td>
<td colspan="4" align="left" valign="top"><div id="Main_content">All the text you could ever want goes here, live!</div></td>
<td rowspan="2">
<img src="images/mainpage1_17.png" alt="" width="16" height="566" border="0"></td>
<td colspan="5" align="left" valign="top"> <div id="Spacer"> text test </div></td>
<td rowspan="2">
<img src="images/mainpage1_19.png" alt="" width="21" height="566" border="0"></td>
</tr>
<tr>
<td colspan="4">
<img src="images/mainpage1_20.png" alt="" width="451" height="151" border="0"></td>
<td colspan="5">
<img src="images/mainpage1_21.png" alt="" width="451" height="151" border="0"></td>
</tr>
<tr>
<td>
<img src="images/spacer.gif" width="21" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="208" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="129" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="97" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="17" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="16" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="54" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="119" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="63" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="142" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="73" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="21" height="1" alt=""></td>
</tr>
</table>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"../../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../../SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
</html>




I deeply appreciate any help you may have,
Thanks!

I had the same problem, couldnt find out what was wrong, i deleted all of the //--> and --!>, not sure what they're for but it worked for me.

Doctor_Varney
Jan 17th, 2010, 08:07 PM
It's because you're using Dreamweaver.

Until you break free from this dreadful device and start coding manually, you will never be able to fully predict what it will do.

My sympathies

Dr. V

_Aerospace_Eng_
Jan 17th, 2010, 08:32 PM
It's because you're using Dreamweaver.

Until you break free from this dreadful device and start coding manually, you will never be able to fully predict what it will do.

My sympathies

Dr. V
To clarify its because you are using the design view of Dreamweaver. I use DW all of the time but only in code view. It is a tool. If you don't learn how to use it correctly you get issues like this.

@OP I'm looking at your page in Firefox 3.5.6 and it looks fine however your page was done completely in the wrong way. Tables are NOT meant for page layout. Read the link in my sig titled "Why Tables for Layout is Stupid?". Your page has 121 coding errors. Some small, some not. See them here (http://validator.w3.org/check?uri=http%3A%2F%2Fwww.tedstirediscounter.ca%2FWorking%25202%2Fmain%2FMAINPAGETRY2.html&charset=%28detect+automatically%29&doctype=Inline&group=0).

Doctor_Varney
Jan 17th, 2010, 08:54 PM
To clarify its because you are using the design view of Dreamweaver. I use DW all of the time but only in code view. It is a tool. If you don't learn how to use it correctly you get issues like this.

Yes, you're absolutely right and I think that was a worthwhile clarification. However, DW does tend to lead people astray, by virtue of fact, it has a 'design view'. Far too many people (including myself) were sold Dreamweaver on the strength of it's WYSIWYG quality, which indeed, it doesn't always deliver. The unenlightened, such myself at the time, relied too heavily on it (which is why people like me, came home with 'absolute-positioning syndrome'!)

Apart from that, it's certainly very useful, from a code-organization POV.

Healthy regards

Dr. V