Skip navigation
abombe13
Currently Being Moderated

White Spaces and Gaps Disorienting My Website

Jul 17, 2012 9:15 AM

Tags: #help #error #background #adobe #cs5.5 #images #menu #code #spaces #ie #html5 #dw #out_of_place #browser_compatibility #roll-over_issue #white_gaps

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 &ldquo;buy  now&rdquo;. 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 &copy; 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>

 
Replies
  • Currently Being Moderated
    Jul 17, 2012 10:04 AM   in reply to abombe13

    Photoshop is fine for images only.  But the HTML it generates is not acceptable for use on real web sites.  Photoshop HTML is for quick comps to show a client before you set out to rebuild the page in Dreamweaver.

     

    Save images only in Photoshop. 

     

    Start over with one of the pre-built CSS Layouts that comes with DW.

         File > New > Blank > HTML > Layout.  I recommend fixed-width, centered, header & footer for your first project.

     

    Look at this 3-part tutorial

     

    Taking a Fireworks (or Photoshop) comp to a CSS Layout in DW

    Part 1 - Initial Design

    http://www.adobe.com/devnet/dreamweaver/articles/dw_fw_css_pt1.html

     

    Part 2 - Markup preparation

    http://www.adobe.com/devnet/dreamweaver/articles/dw_fw_css_pt2.html

     

    Part 3 - Layout and CSS

    http://www.adobe.com/devnet/dreamweaver/articles/dw_fw_css_pt3.html

     

    If you get stuck on anything, post back with specific questions.

     

     

     

    Nancy O.

    Alt-Web Design & Publishing

    Web | Graphics | Print | Media  Specialists 

    http://alt-web.com/

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 18, 2012 10:29 PM   in reply to abombe13

    html slices from photoshop is not a website. its simply a bunch of images placed on a html page.

     

    follow nancy's 3 part tutorials above.

     

    and kick the psd>html habit. right now!

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 11, 2012 5:31 AM   in reply to Nancy O.

    I've created a web page in Fireworks, but when I export it from Dreamweaver CS5, there are gaps between the different elements that are hosted on our ftp site, or are links. How can I get rid of these? Since it's a new design, I can't use a specific Dreamweaver CSS style that already exists. When I view it online, it looks great, but if I copy and paste it into Outlook - where I need to send the newsletter from, the gaps appear.

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Dec 11, 2012 6:32 AM   in reply to Heids_27

    Heids_27,

     

    Please create a new thread from http://forums.adobe.com

     

    This thread originally began in July 2012. Your chances of getting responses to a new thread with your question are much higher.

     

    -ST

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points