Hello Adobe Community
I have a slight problem with my Dreamweaver Website I am creating. This is my first time building a website on Dreamweaver so I apologize for any newbienes
The problem is viewing the site on browsers (especially IE). I am assuming the browser compatibility is not working on my website. Each browser shows the website with spaces and gaps all though my button menu. I used Photoshop to export my slices to Dreamweaver and built the website from there. It seems like the problem is when i use image rollover for my buttons. When i remove the rollover there is no problem and as soon as I add them white spaces appear.
Here is the link to the website http://www.bakerchet.com . I will also provide a sample code from one of the pages on the site so you will get a better insight.
Thank you for your help. I hope to fix this problem as soon as I can. The website is obviously not done and polished yet, but fixing this problem will make everything else easier.
Once again thanks.
<!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>
<title>CrochetShop Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.mainContentHome {
background-color: #E6E5C7;
}
</style>
<script type="text/javascript">
<!--
function FP_preloadImgs() {//v1.0
var d=document,a=arguments; if(!d.FP_imgs) d.FP_imgs=new Array();
for(var i=0; i<a.length; i++) { d.FP_imgs[i]=new Image; d.FP_imgs[i].src=a[i]; }
}
function FP_swapImgRestore() {//v1.0
var doc=document,i; if(doc.$imgSwaps) { for(i=0;i<doc.$imgSwaps.length;i++) {
var elm=doc.$imgSwaps[i]; if(elm) { elm.src=elm.$src; elm.$src=null; } }
doc.$imgSwaps=null; }
}
function FP_swapImg() {//v1.0
var doc=document,args=arguments,elm,n; doc.$imgSwaps=new Array(); for(n=2; n<args.length;
n+=2) { elm=FP_getObjectByID(args[n]); if(elm) { doc.$imgSwaps[doc.$imgSwaps.length]=elm;
elm.$src=elm.src; elm.src=args[n+1]; } }
}
function FP_getObjectByID(id,o) {//v1.0
var c,el,els,f,m,n; if(!o)o=document; if(o.getElementById) el=o.getElementById(id);
else if(o.layers) c=o.layers; else if(o.all) el=o.all[id]; if(el) return el;
if(o.id==id || o.name==id) return o; if(o.childNodes) c=o.childNodes; if(c)
for(n=0; n<c.length; n++) { el=FP_getObjectByID(id,c[n]); if(el) return el; }
f=o.forms; if(f) for(n=0; n<f.length; n++) { els=f[n].elements;
for(m=0; m<els.length; m++){ el=FP_getObjectByID(id,els[n]); if(el) return el; } }
return null;
}
// -->
</script>
</head>
<center>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onload="FP_preloadImgs(/*url*/'ExpressionTest/images/crochetShopTop_0 5-RO.jpg',/*url*/'ExpressionTest/images/crochetShopTop_07-RO.jpg',/*ur l*/'ExpressionTest/images/crochetShopTop_09-RO.jpg',/*url*/'Expression Test/images/crochetShopTop_11-RO.jpg',/*url*/'ExpressionTest/images/cr ochetShopTop_13-RO.jpg')">
<!-- Save for Web Slices (Untitled-1) -->
<table id="Table_01" width="1280" height="1401" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3"><a href="index.html"><img src="ExpressionTest/images/crochetShopTop_01.gif" width="190" height="175" alt="" /></a></td>
<td colspan="9" rowspan="2">
<img src="ExpressionTest/images/crochetShopTop_02.jpg" width="1090" height="254" alt="" /></td>
</tr>
<tr>
<td colspan="3">
<img src="ExpressionTest/images/crochetShopTop_03.jpg" width="190" height="79" alt="" /></td>
</tr>
<tr>
<td>
<img src="ExpressionTest/images/crochetShopTop_04.jpg" width="28" height="57" alt="" /></td>
<!-- Button Rollovers -->
<td><a href="crochetShopHome.html"><img src="ExpressionTest/images/crochetShopTop_05.jpg" width="136" height="57" alt="" id="img1" onmouseout="FP_swapImgRestore()" onmouseover="FP_swapImg(1,1,/*id*/'img1',/*url*/'ExpressionTest/image s/crochetShopTop_05-RO.jpg')" /></a></td>
<td colspan="2">
<img src="ExpressionTest/images/crochetShopTop_06.jpg" width="125" height="57" alt="" /></td>
<td><a href="crochetShopAbout.html"><img src="ExpressionTest/images/crochetShopTop_07.jpg" width="149" height="57" alt="" id="img2" onmouseout="FP_swapImgRestore()" onmouseover="FP_swapImg(1,1,/*id*/'img2',/*url*/'ExpressionTest/image s/crochetShopTop_07-RO.jpg')" /></a></td>
<td>
<img src="ExpressionTest/images/crochetShopTop_08.jpg" width="139" height="57" alt="" /></td>
<td><a href="crochetShopShop.html"><img src="ExpressionTest/images/crochetShopTop_09.jpg" width="129" height="57" alt="" id="img3" onmouseout="FP_swapImgRestore()" onmouseover="FP_swapImg(1,1,/*id*/'img3',/*url*/'ExpressionTest/image s/crochetShopTop_09-RO.jpg')" /></a></td>
<td>
<img src="ExpressionTest/images/crochetShopTop_10.jpg" width="128" height="57" alt="" /></td>
<td><a href="crochetShopContact.html"><img src="ExpressionTest/images/crochetShopTop_11.jpg" width="178" height="57" alt="" id="img4" onmouseout="FP_swapImgRestore()" onmouseover=" FP_swapImg(1,1,/*id*/'img4',/*url*/'ExpressionTest/images/crochetShop Top_11-RO.jpg')" /></a></td>
<td>
<img src="ExpressionTest/images/crochetShopTop_12.jpg" width="130" height="57" alt="" /></td>
<td><a href="http://bakerchet.weebly.com"><img src="ExpressionTest/images/crochetShopTop_13.jpg" width="107" height="57" alt="" id="img5" onmouseout="FP_swapImgRestore()" onmouseover="FP_swapImg(1,1,/*id*/'img5',/*url*/'ExpressionTest/image s/crochetShopTop_13-RO.jpg')" /></a></td>
<td>
<img src="ExpressionTest/images/crochetShopTop_14.jpg" width="31" height="57" alt="" /></td>
</tr>
<tr>
<td colspan="12">
<img src="ExpressionTest/images/crochetShopTop_15.jpg" width="1280" height="18" alt="" /></td>
</tr>
<!-- Main Body -->
<tr>
<td colspan="12">
<table align="center" cellpadding="0" cellspacing="0" class="mainContentHome" style="width: 1280px; height: 1071px; text-align: center; font-size: 24px; font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif; font-weight: bold;">
<tr>
<td align="center" valign="top">
<p> </p>
<p>Simply Beautiful Creations</p>
<p><!-- Begin DWUser_EasyRotator -->
<script type="text/javascript" src="http://c520866.r66.cf2.rackcdn.com/1/js/easy_rotator.min.js"></script>
<div class="dwuserEasyRotator" style="width: 640px; height: 480px; position:relative; text-align: left;" data-erconfig="{autoplayEnabled:true, lpp:'102-105-108-101-58-47-47-47-67-58-47-85-115-101-114-115-47-65-11 5-97-110-116-101-47-68-111-99-117-109-101-110-116-115-47-69-97-115-121 -82-111-116-97-116-111-114-80-114-101-118-105-101-119-47-112-114-101-1 18-105-101-119-95-115-119-102-115-47'}" data-ername="crochetShop" data-ertid="{25v16al5nt9469768977331}">
<div data-ertype="content" style="display: none; color: #FFF;"><ul data-erlabel="Main Category">
<li>
<img class="main" src="ExpressionTest/images2/Photogalleries/Crochet/blankets5.jpg" alt="Fleece Blankets" /> <img class="thumb" src="ExpressionTest/images2/Photogalleries/Crochet/blankets5.jpg" /> <span class="title">Fleece Blankets</span> <span class="desc">This is a very soft and warm blanket to cover your little one.</span>
</li>
<li>
<img class="main" src="ExpressionTest/images2/Photogalleries/Crochet/frog hat2.jpg" alt="Animal Hats" /> <img class="thumb" src="ExpressionTest/images2/Photogalleries/Crochet/frog hat2.jpg" /> <span class="title">Animal Hats</span> <span class="desc">An array of animal hats are available to purchase alone or combined with many other items on the site as a set.</span>
</li>
<li>
<img class="main" src="ExpressionTest/images2/Photogalleries/Crochet/teddy bear.jpg" alt="Animal Toys" /> <img class="thumb" src="ExpressionTest/images2/Photogalleries/Crochet/teddy bear.jpg" /> <span class="title">Animal Toys</span> <span class="desc">These adorable stuffed animal toys are a perfect addition to blankets and/or hats. Just add bells and you can now have a toy rattle.</span>
</li>
<li>
<img class="main" src="ExpressionTest/images2/Photogalleries/Crochet/catpurse2.jpg" alt="Animal Purses" /> <img class="thumb" src="ExpressionTest/images2/Photogalleries/Crochet/catpurse2.jpg" /> <span class="title">Animal Purses</span> <span class="desc">A variety of animal purses for your special little girl. They can also be used as a backpack.</span>
</li>
<li>
<img class="main" src="ExpressionTest/images2/Photogalleries/Crochet/miu blanket2.jpg" alt="Waffle Striped Blankets" /> <img class="thumb" src="ExpressionTest/images2/Photogalleries/Crochet/miu blanket2.jpg" /> <span class="title">Waffle Striped Blankets</span> <span class="desc">This is a beautiful, closely crocheted blanket to keep your little one nice and warm.</span>
</li>
</ul>
</div>
<div data-ertype="layout" data-ertemplatename="NONE" style="">
<div class="erimgMain" style="position: absolute; left:0;right:0;top:0;bottom:0;" data-erconfig="{___numTiles:3, scaleMode:'scaleUpAndDown', duration:800, imgType:'main', alwaysPreviousButton:true, __loopNextButton:false, __arrowButtonMode:'rollover'}">
<div class="erimgMain_slides" style="position: absolute; left:0; top:0; bottom:0; right:0;">
<div class="erimgMain_slide">
<div class="erimgMain_img" style="position: absolute; left: 0; right: 0; top: 0; bottom: 0; color: #FFF; font-size: 18px; text-align: left;"></div>
<div class="" style="position: absolute; left:0; right:0; bottom: 20px; padding: 7px 200px 7px 20px; background: #000; background:rgba(0,0,0,0.9); color: #FFF; font-family: Georgia, 'Times New Roman', Times, _serif; text-align: left;">
<p class="erimgMain_title" style="padding: 0; margin: 0 0 3px 0; font-weight: bold; font-size: 24px; color: #FFF; text-align: left;"></p>
<p class="erimgMain_desc" style="padding: 0; margin: 0; font: 12px/16px Arial,_sans; color: #FFF;"></p>
</div>
</div>
</div>
<!-- <div class="erimgMain_arrowLeft" style="position:absolute; left: 10px; top: 50%; margin-top: -15px;" data-erConfig="{image:'circleSmall', image2:'circleSmall'}"></div>
<div class="erimgMain_arrowRight" style="position:absolute; right: 10px; top: 50%; margin-top: -15px;"></div> -->
</div>
<div class="erdots" style="overflow: hidden; margin: 0; font-size: 10px; font-family: 'Lucida Grande', 'Lucida Sans', Arial, _sans; color: #FFF; position: absolute; right:6px; bottom:30px; width:200px;" data-erconfig="{showText:false}" align="center">
<div class="erdots_wrap" style="wasbackground-color: #CFC; float: right;" align="left">
<!-- modify the float on this element to make left/right/none=center aligned. -->
<span class="erdots_btn_selected" style="padding-left: 0; width: 21px; height: 20px; display: inline-block; text-align: center; vertical-align: middle; line-height: 20px; margin: 0 2px 0 0; cursor: default; background: url(http://easyrotator.s3.amazonaws.com/1/i/rotator/dots/export/20_14_wite _65.png) top left no-repeat;"> </span> <span class="erdots_btn_normal" style="padding-left: 0; width: 21px; height: 20px; display: inline-block; text-align: center; vertical-align: middle; line-height: 20px; margin: 0 2px 0 0; cursor: pointer; background: url(http://easyrotator.s3.amazonaws.com/1/i/rotator/dots/export/20_14_wite _35.png) top left no-repeat;"> </span> <span class="erdots_btn_hover" style="padding-left: 0; width: 21px; height: 20px; display: inline-block; text-align: center; vertical-align: middle; line-height: 20px; margin: 0 2px 0 0; cursor: pointer; background: url(http://easyrotator.s3.amazonaws.com/1/i/rotator/dots/export/20_14_wite _65.png) top left no-repeat;"> </span> </div>
</div>
<div class="erabout erFixCSS3" style="color: #FFF; text-align: left; background: #000; background:rgba(0,0,0,0.93); border: 2px solid #FFF; padding: 20px; font: normal 11px/14px Verdana,_sans; width: 300px; border-radius: 10px; display:none;"> This <a style="color:#FFF;" href="http://www.dwuser.com/easyrotator/" target="_blank">jQuery slider</a> was created with the free <a style="color:#FFF;" href="http://www.dwuser.com/easyrotator/" target="_blank">EasyRotator</a> software from DWUser.com. <br />
<br />
Need a powerful <a style="color:#FFF;" href="http://www.dwuser.com/flashslideshow/" target="_blank">Flash slideshow</a> creator with built-in iPhone/iPad/Android support? EasyRotator is supported by the <a style="color:#FFF;" href="http://www.dwuser.com/flashslideshow/" target="_blank">XML Flash Slideshow v4 Software</a>. <br />
<br />
<a style="color:#FFF;" href="#" class="erabout_ok">OK</a> </div>
<noscript>
Rotator powered by <a href="http://www.dwuser.com/easyrotator/">EasyRotator</a>, a free and easy jQuery slider builder from DWUser.com. Please enable JavaScript to view.
</noscript>
<script type="text/javascript">/*Avoid IE gzip bug*/(function(b,c,d){try{if(!b[d]){b[d]="temp";var a=c.createElement("script");a.type="text/javascript";a.src="http://easyrotator.s3.amazonaws.com/1/js/nozip/easy_rotator.min.js";c.getElementsByTagName("head")[0].appendChild(a)}}catch(e){alert("Ea syRotator fail; contact support.")}})(window,document,"er_$144");</script>
</div>
</div>
<!-- End DWUser_EasyRotator --></p>
<!-- Spacing -->
<p><!-- Start Bottom Paragraphs --> </p>
<table width="1146" height="188" border="0">
<tr>
<td valign="top" style="font-size: 22px"><p> Loving what you create and seeing others love it, brings great joy to me. Over the years, crochet has become one of my many passions. Today, you can virtually find anything that is crocheted... from clothing, to blankets, to jewelry, and even household items like rugs, pillows and curtains just to name a few. I would love to create something special just for you. </p>
<p> </p> <p> Stop by the shop to view all the items I am selling. Most of them are made to order unless specified as “buy now”. This gives you the option to choose your own color and/or yarn, making every item more special and personal.
</p></td>
</tr>
</table>
<p> </p>
<p style="font-size: 16px"> </p>
<p style="font-size: 16px"> </p>
<p style="font-size: 16px"> </p>
<p style="font-size: 16px"> </p>
<p style="font-size: 14px">Copyright © 2012 Baker-Chet. All rights resevered. Web design by A.L.B.</p></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<img src="ExpressionTest/images3/spacer.gif" width="28" height="1" alt="" /></td>
<td>
<img src="ExpressionTest/images3/spacer.gif" width="136" height="1" alt="" /></td>
<td>
<img src="ExpressionTest/images3/spacer.gif" width="26" height="1" alt="" /></td>
<td>
<img src="ExpressionTest/images3/spacer.gif" width="99" height="1" alt="" /></td>
<td>
<img src="ExpressionTest/images3/spacer.gif" width="149" height="1" alt="" /></td>
<td>
<img src="ExpressionTest/images3/spacer.gif" width="139" height="1" alt="" /></td>
<td>
<img src="ExpressionTest/images3/spacer.gif" width="129" height="1" alt="" /></td>
<td>
<img src="ExpressionTest/images3/spacer.gif" width="128" height="1" alt="" /></td>
<td>
<img src="ExpressionTest/images3/spacer.gif" width="178" height="1" alt="" /></td>
<td>
<img src="ExpressionTest/images3/spacer.gif" width="130" height="1" alt="" /></td>
<td>
<img src="ExpressionTest/images3/spacer.gif" width="107" height="1" alt="" /></td>
<td>
<img src="ExpressionTest/images3/spacer.gif" width="31" height="1" alt="" /></td>
</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</center>
</html>