PDA

View Full Version : Major Problems With My Site


Jaso333
04-11-2010, 08:20 PM
I am a beginner dreamweaver user and i have run into a problem that makes the page show correctly in IE but not in chrome.

the code is as follows:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Contact</title>
<link href="main.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="contact.css" rel="stylesheet" type="text/css" />
</head>

<body onload="MM_preloadImages('images/b_aboutus_over.png','images/b_gd_over.png','images/b_wd_over.png','images/b_portfolio_over.png','images/b_contact_over.png')">
<div id="wrapper">
<div id="mainContent">
<div id="sideBar">

<a href="index.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('btnAbout','','images/b_aboutus_over.png',1)"><img src="images/b_aboutus_o.png" alt="About Us" name="btnAbout" width="70" height="26" border="0" id="btnAbout" /></a>

<a href="graphicdesign.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('btnGraphDes','','images/b_gd_over.png',1)"><img src="images/b_gd_o.png" alt="Graphic Design" name="btnGraphDes" width="100" height="22" border="0" id="btnGraphDes" /></a>

<a href="websitedesign.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('btnWebDes','','images/b_wd_over.png',1)"><img src="images/b_wd_o.png" alt="Website Design" name="btnWebDes" width="100" height="22" border="0" id="btnWebDes" /></a>

<a href="portfolio.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('btnPortfolio','','images/b_portfolio_over.png',1)"><img src="images/b_portfolio_o.png" alt="Portfilio" name="btnPortfolio" width="70" height="23" border="0" id="btnPortfolio" /></a>

<a href="contact.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('btnContact','','images/b_contact_current.png',1)"><img src="images/b_contact_current.png" alt="Contact" name="btnContact" width="62" height="23" border="0" id="btnContact" /></a>

<a href="whyus.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('btnWhyUs','','images/b_why_over.png',1)"><img src="images/b_why_o.png" alt="Why Us" name="btnWhyUs" width="68" height="23" border="0" id="btnWhyUs" /></a></div>

<div id="facebook"><a href="http://www.facebook.com" target="_blank"><img src="images/b_fb.png" alt="Facebook" width="206" height="54" border="0" /></a></div>
</div>
</div>
</body>
</html>

the CSS files are as follows:

main.css:
body {
background-color: #F2F2F2;
margin: 0px;
padding: 0px;
}
#wrapper {
width: 970px;
margin: 0 auto;
}
#mainContent {
height: 705px;
width: 970px;
margin-top: 10px;
}
#sideBar {
height: 167px;
width: 170px;
margin-top: 209px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 77px;
overflow: hidden;
}
#btnAbout {
margin-left: 62px;
float: left;
clear: both;
}
#btnGraphDes {
margin-left: 47px;
float: left;
clear: both;
margin-top: 12px;
}
#btnWebDes {
margin-left: 40px;
float: left;
clear: both;
margin-top: 0px;
}
#btnPortfolio {
margin-left: 24px;
float: left;
clear: both;
margin-top: 11px;
}
#btnContact {
margin-left: 15px;
float: left;
clear: both;
margin-top: 0px;
}
#btnWhyUs {
margin-left: 6px;
float: left;
clear: both;
margin-top: 0px;
}


contact.css:
#mainContent {
background-image: url(images/contact_back.png);
}
#facebook {
float: right;
height: 51px;
width: 205px;
margin-right: 21px;
margin-top: 75px;
overflow: hidden;
}


The problem is that in Chrome browser, the background within #mainContent has been pushed down by about 300 or so pixels, and the other images are left behind in their proper positions. This problem doesn't occur in IE for some reason and its puzzling me.

Thanks in advance for your solutions.