Sliced html page displays gaps in IE
Aug 9, 2012 9:27 AM
Tags: none (add) #photoshop #help #centering #dreamweaver #ie #white #displaying #gaps #slicesI have just begun to pick up creating web pages for non profit organizations in my area. I have some photoshop and dreamweaver knowlege, but this is relatively new to me.
The page that I created and sliced in photoshop and linked using Dreamweaver displays fine in all browsers except IE.
I have a few very important questions.
What causes these gaps?
Is there a quick fix for the web page that I've created to display correctly in Internet Explorer, if so what is it?
Is there a better way to create pages more professionally, using the Adobe suite, if so do you know of any links to literature online that can point me in the right direction?
How do I get the page to display perfectly cented no matter the monitor resolution in which it is being viewed?
Below is the source code from the home page of the site in which I am working on.
Please help and thanks.
<html>
<head>
<title>Serenity Community Services</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<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>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="MM_preloadImages('images/AboutRollover_Link.jpg','images/Serv icesRollover_Link.jpg','images/CounselingRollover_Link.jpg','images/Ca reersRollover_Link.jpg','images/ContactRollover_Link.jpg','images/CARF Rollover_Link.jpg','images/FAQsRollover.jpg','images/EventsRollover.jp g','images/AddtlRollover.jpg','images/CARFRollover_Weblink.jpg')">
<!-- Save for Web Slices (SCS_SiteFinal_SliceFinal001.psd) -->
<table id="Table_01" width="1681" height="1201" border="0" cellpadding="0" cellspacing="0">
<tr>
<td rowspan="8">
<img src="images/LeftMargin.jpg" width="172" height="1200" alt=""></td>
<td colspan="11">
<img src="images/Header.jpg" width="1335" height="186" alt=""></td>
<td rowspan="8">
<img src="images/RightMargin.jpg" width="173" height="1200" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="186" alt=""></td>
</tr>
<tr>
<td>
<img src="images/HomePressed_Link.jpg" width="97" height="36" alt=""></td>
<td><a href="About.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('About_PageLink','','images/AboutRollover_L ink.jpg',1)"><img src="images/About_Link.jpg" alt="About Us" width="124" height="36" id="About_PageLink"></a></td>
<td><a href="Services.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Services_PageLink','','images/ServicesRoll over_Link.jpg',1)"><img src="images/Services_Link.jpg" alt="Services" width="125" height="36" id="Services_PageLink"></a></td>
<td><a href="Counseling.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Counseling_PageLink','','images/Counseling Rollover_Link.jpg',1)"><img src="images/Counseling_Link.jpg" alt="Counseling" width="129" height="36" id="Counseling_PageLink"></a></td>
<td colspan="2"><a href="Careers.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Careers_PageLink','','images/CareersRollov er_Link.jpg',1)"><img src="images/Careers_Link.jpg" alt="Careers" width="132" height="36" id="Careers_PageLink"></a></td>
<td colspan="2"><a href="Contact.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Contact_LinkPage','','images/ContactRollov er_Link.jpg',1)"><img src="images/Contact_Link.jpg" alt="Contact Us" width="131" height="36" id="Contact_LinkPage"></a></td>
<td><a href="Carf.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Carf_PageLink','','images/CARFRollover_Lin k.jpg',1)"><img src="images/CARF_Link.jpg" alt="Carf" width="122" height="36" id="Carf_PageLink"></a></td>
<td colspan="2">
<img src="images/LinkMargin.jpg" width="475" height="36" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="36" alt=""></td>
</tr>
<tr>
<td colspan="5" rowspan="6">
<img src="images/Home_TextArea.jpg" width="573" height="978" alt=""></td>
<td colspan="2"><a href="Construction.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Faqs_PageLink','','images/FAQsRollover.jpg ',1)"><img src="images/FAQs.jpg" alt="FAQs" width="141" height="148" id="Faqs_PageLink"></a></td>
<td colspan="4" rowspan="3">
<img src="images/Home_MediaCenter.jpg" width="621" height="406" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="148" alt=""></td>
</tr>
<tr>
<td colspan="2"><a href="Construction.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Events_PageLink','','images/EventsRollover .jpg',1)"><img src="images/EventsCalander.jpg" alt="Coming Events" width="141" height="167" id="Events_PageLink"></a></td>
<td>
<img src="images/spacer.gif" width="1" height="167" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="2"><a href="Construction.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Addtl_PageLink','','images/AddtlRollover.j pg',1)"><img src="images/AddtlResources.jpg" alt="External Resources" width="141" height="143" id="Addtl_PageLink"></a></td>
<td>
<img src="images/spacer.gif" width="1" height="91" alt=""></td>
</tr>
<tr>
<td colspan="3" rowspan="3">
<img src="images/UnderMedia.jpg" width="440" height="572" alt=""></td>
<td rowspan="2"><a href="http://www.carf.org/home/" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Carf_WebPageLink','','images/CARFRollover_ Weblink.jpg',1)"><img src="images/CARF_Weblink.jpg" alt="www.carf.org" width="181" height="125" id="Carf_WebPageLink"></a></td>
<td>
<img src="images/spacer.gif" width="1" height="52" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="2">
<img src="images/MidMargin.jpg" width="141" height="520" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="73" alt=""></td>
</tr>
<tr>
<td>
<img src="images/UnderCarf.jpg" width="181" height="447" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="447" alt=""></td>
</tr>
<tr>
<td>
<img src="images/spacer.gif" width="172" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="97" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="124" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="125" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="129" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="98" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="34" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="107" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="24" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="122" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="294" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="181" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="173" height="1" alt=""></td>
<td></td>
</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>
