HTML Forum

**GayleYe** · 12-26-2010, 01:38 PM

Hey guys,

I'm fairly new to web design (I've only been watching tutvid.com tutorials).
I sliced and exported my PSD template to Dreamweaver and whenever I try to link pages to my sliced images it adds a weird space and messes up my layout. Oddly enough, this only happens when I preview it in Firefox and not in Safari.

Firefox (under home, about, portfolio, contact and blog there is a weird space)

Safari (everything looks fine)

Here's the code:

Code:

<html><head>
<title>Minimal_Final</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
body {
    background-color: #F8F8F8;
}
.corporate_reel {
    font-size: 18px;
}
</style>
<link href="../site_layout.css" rel="stylesheet" type="text/css">
<link href="../site_layout_content.css" rel="stylesheet" type="text/css">
</head><body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (Minimal_Final.psd) -->
<div id="site_layout">
  <table width="1021" height="1021" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
    <tbody><tr>
      <td>
        <img src="images/top-bar-.jpg" width="40" height="4" alt=""></td>
      <td colspan="40">
        <img src="images/minimalfinal_02.jpg" width="940" height="4" alt=""></td>
      <td>
        <img src="images/top-bar--04.jpg" width="40" height="4" alt=""></td>
      <td>
        <img src="images/spacer.gif" width="1" height="4" alt=""></td>
    </tr>
    <tr>
      <td colspan="42">
        <img src="images/white-space-1.jpg" width="1020" height="25" alt=""></td>
      <td>
        <img src="images/spacer.gif" width="1" height="25" alt=""></td>
    </tr>
    <tr>
      <td colspan="6">
        <img src="images/white-space-2.jpg" width="367" height="108" alt=""></td>
      <td colspan="18">
        <img src="images/logo.jpg" width="291" height="108" alt="gayle ye videography"></td>
      <td colspan="18" rowspan="3">
        <img src="images/white-space-3.jpg" width="362" height="152" alt=""></td>
      <td>
        <img src="images/spacer.gif" width="1" height="108" alt=""></td>
    </tr>
    <tr>
      <td colspan="5" rowspan="2">
        <img src="images/whitespace_4.jpg" width="364" height="44" alt=""></td>
      <td colspan="18">
        <img src="images/contact_info.jpg" width="293" height="28" alt="email and number"></td>
      <td rowspan="2">
        <img src="images/minimalfinal_10.jpg" width="1" height="44" alt=""></td>
      <td>
        <img src="images/spacer.gif" width="1" height="28" alt=""></td>
    </tr>
    <tr>
      <td colspan="18">
        <img src="images/whitespace16.jpg" width="293" height="16" alt=""></td>
      <td>
        <img src="images/spacer.gif" width="1" height="16" alt=""></td>
    </tr>
    <tr>
      <td colspan="3" rowspan="2">
        <img src="images/whitespace5.jpg" width="278" height="50" alt=""></td>
      <td><a href="welcome.html"><img src="images/home_header.jpg" width="52" height="16" alt=""></a></td>
      <td rowspan="2">
        <img src="images/whitespace9.jpg" width="34" height="50" alt=""></td>
      <td colspan="3"><a href="about.html"><img src="images/about_header.jpg" width="56" height="16" alt=""></a></td>
      <td colspan="2" rowspan="2">
        <img src="images/whitespace10.jpg" width="35" height="50" alt=""></td>
      <td colspan="5">
        <img src="images/portfolio_header.jpg" width="94" height="16" alt=""></td>
      <td colspan="3" rowspan="2">
        <img src="images/whitespace11.jpg" width="35" height="50" alt=""></td>
      <td colspan="7">
        <img src="images/contact_header.jpg" width="75" height="16" alt=""></td>
      <td colspan="2" rowspan="2">
        <img src="images/whitespace12.jpg" width="36" height="50" alt=""></td>
      <td>
        <img src="images/blog_header.jpg" width="48" height="16" alt=""></td>
      <td colspan="14" rowspan="2">
        <img src="images/blank6.jpg" width="277" height="50" alt=""></td>
      <td>
        <img src="images/spacer.gif" width="1" height="16" alt=""></td>
    </tr>
    <tr>
      <td>
        <img src="images/blank1.jpg" width="52" height="34" alt=""></td>
      <td colspan="3">
        <img src="images/blank-2.jpg" width="56" height="34" alt=""></td>
      <td colspan="5">
        <img src="images/blank-3.jpg" width="94" height="34" alt=""></td>
      <td colspan="7">
        <img src="images/blank4.jpg" width="75" height="34" alt=""></td>
      <td>
        <img src="images/blank5.jpg" width="48" height="34" alt=""></td>
      <td>
        <img src="images/spacer.gif" width="1" height="34" alt=""></td>
    </tr>
    <tr>
      <td colspan="2">
        <img src="images/whitespace8.jpg" width="61" height="84" alt=""></td>
      <td colspan="37" rowspan="2">
        <img src="images/welcome_header.jpg" width="898" height="85" alt=""></td>
      <td colspan="3">
        <img src="images/whitespace7.jpg" width="61" height="84" alt=""></td>
      <td>
        <img src="images/spacer.gif" width="1" height="84" alt=""></td>
    </tr>
    <tr>
      <td colspan="2" rowspan="2">
        <img src="images/text-area.jpg" width="61" height="411" alt=""></td>
      <td colspan="3" rowspan="2">
        <img src="images/text-area-33.jpg" width="61" height="411" alt=""></td>
      <td>
        <img src="images/spacer.gif" width="1" height="1" alt=""></td>
    </tr>
    <tr>
      <td colspan="37" align="center"><div id="site_layout_content">
        <p class="corporate_reel">
          <embed src="../Media/corporatereel.mov" width="521" height="311" autoplay="false">                   </p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
      </div></td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td colspan="29" rowspan="3">
        <img src="images/white_space4.jpg" width="775" height="55" alt=""></td>
      <td colspan="5">
        <img src="images/socialmedia_footer.jpg" width="86" height="17" alt=""></td>
      <td colspan="8">
        <img src="images/whitespace12-37.jpg" width="159" height="17" alt=""></td>
      <td>
        <img src="images/spacer.gif" width="1" height="17" alt=""></td>
    </tr>
    <tr>
      <td>
        <img src="images/linkedin_footer.jpg" width="32" height="32" alt=""></td>
      <td rowspan="2">
        <img src="images/minimalfinal_38.jpg" width="7" height="38" alt=""></td>
      <td>
        <img src="images/facebook_footer.jpg" width="32" height="32" alt=""></td>
      <td rowspan="2">
        <img src="images/minimalfinal_40.jpg" width="8" height="38" alt=""></td>
      <td colspan="2">
        <img src="images/twitter_footer.jpg" width="32" height="32" alt=""></td>
      <td rowspan="2">
        <img src="images/minimalfinal_42.jpg" width="7" height="38" alt=""></td>
      <td>
        <img src="images/delicious_footer.jpg" width="32" height="32" alt=""></td>
      <td rowspan="2">
        <img src="images/minimalfinal_44.jpg" width="8" height="38" alt=""></td>
      <td colspan="2">
        <img src="images/digg_footer.jpg" width="32" height="32" alt=""></td>
      <td colspan="2" rowspan="2">
        <img src="images/whitespace13.jpg" width="55" height="38" alt=""></td>
      <td>
        <img src="images/spacer.gif" width="1" height="32" alt=""></td>
    </tr>
    <tr>
      <td>
        <img src="images/minimalfinal_47.jpg" width="32" height="6" alt=""></td>
      <td>
        <img src="images/minimalfinal_48.jpg" width="32" height="6" alt=""></td>
      <td colspan="2">
        <img src="images/minimalfinal_49.jpg" width="32" height="6" alt=""></td>
      <td>
        <img src="images/minimalfinal_50.jpg" width="32" height="6" alt=""></td>
      <td colspan="2">
        <img src="images/minimalfinal_51.jpg" width="32" height="6" alt=""></td>
      <td>
        <img src="images/spacer.gif" width="1" height="6" alt=""></td>
    </tr>
    <tr>
      <td colspan="42">
        <img src="images/minimalfinal_52.jpg" width="1020" height="1" alt=""></td>
      <td>
        <img src="images/spacer.gif" width="1" height="1" alt=""></td>
    </tr>
    <tr>
      <td colspan="42">
        <img src="images/minimalfinal_53.jpg" width="1020" height="22" alt=""></td>
      <td>
        <img src="images/spacer.gif" width="1" height="22" alt=""></td>
    </tr>
    <tr>
      <td colspan="7" rowspan="6">
        <img src="images/minimalfinal_54.jpg" width="371" height="216" alt=""></td>
      <td colspan="19">
        <img src="images/credits.jpg" width="309" height="13" alt="minimal design powered by word press"></td>
      <td colspan="16" rowspan="6">
        <img src="images/minimalfinal_56.jpg" width="340" height="216" alt=""></td>
      <td>
        <img src="images/spacer.gif" width="1" height="13" alt=""></td>
    </tr>
    <tr>
      <td colspan="19">
        <img src="images/minimalfinal_57.jpg" width="309" height="9" alt=""></td>
      <td>
        <img src="images/spacer.gif" width="1" height="9" alt=""></td>
    </tr>
    <tr>
      <td colspan="7">
        <img src="images/minimalfinal_58.jpg" width="149" height="1" alt=""></td>
      <td colspan="2" rowspan="2">
        <img src="images/portfolio_footer.jpg" width="44" height="11" alt=""></td>
      <td>
        <img src="images/minimalfinal_60.jpg" width="6" height="1" alt=""></td>
      <td colspan="2" rowspan="2">
        <img src="images/contact_footer.jpg" width="41" height="11" alt=""></td>
      <td>
        <img src="images/minimalfinal_62.jpg" width="3" height="1" alt=""></td>
      <td colspan="2" rowspan="2">
        <img src="images/blog_footer.jpg" width="26" height="11" alt=""></td>
      <td colspan="4" rowspan="4">
        <img src="images/minimalfinal_64.jpg" width="40" height="194" alt=""></td>
      <td>
        <img src="images/spacer.gif" width="1" height="1" alt=""></td>
    </tr>
    <tr>
      <td colspan="2" rowspan="3">
        <img src="images/minimalfinal_65.jpg" width="74" height="193" alt=""></td>
      <td colspan="2" rowspan="2">
        <img src="images/home_footer.jpg" width="32" height="11" alt=""></td>
      <td rowspan="2">
        <img src="images/minimalfinal_67.jpg" width="4" height="11" alt=""></td>
      <td rowspan="2">
        <img src="images/about_footer.jpg" width="32" height="11" alt=""></td>
      <td rowspan="2">
        <img src="images/minimalfinal_69.jpg" width="7" height="11" alt=""></td>
      <td rowspan="2">
        <img src="images/minimalfinal_70.jpg" width="6" height="11" alt=""></td>
      <td rowspan="2">
        <img src="images/minimalfinal_71.jpg" width="3" height="11" alt=""></td>
      <td>
        <img src="images/spacer.gif" width="1" height="10" alt=""></td>
    </tr>
    <tr>
      <td colspan="2">
        <img src="images/minimalfinal_72.jpg" width="44" height="1" alt=""></td>
      <td colspan="2">
        <img src="images/minimalfinal_73.jpg" width="41" height="1" alt=""></td>
      <td>
        <img src="images/minimalfinal_74.jpg" width="25" height="1" alt=""></td>
      <td rowspan="2">
        <img src="images/minimalfinal_75.jpg" width="1" height="183" alt=""></td>
      <td>
        <img src="images/spacer.gif" width="1" height="1" alt=""></td>
    </tr>
    <tr>
      <td colspan="12">
        <img src="images/minimalfinal_76.jpg" width="194" height="182" alt=""></td>
      <td>
        <img src="images/spacer.gif" width="1" height="182" alt=""></td>
    </tr>
    <tr>
      <td>
        <img src="images/spacer.gif" width="40" height="1" alt=""></td>
      <td>
        <img src="images/spacer.gif" width="21" height="1" alt=""></td>
      <td>
        <img src="images/spacer.gif" width="217" height="1" alt=""></td>
      <td>
        <img src="images/spacer.gif" width="52" height="1" alt=""></td>
      <td>
        <img src="images/spacer.gif" width="34" height="1" alt=""></td>
      <td>
        <img src="images/spacer.gif" width="3" height="1" alt=""></td>
      <td>
        <img src="images/spacer.gif" width="4" height="1" alt=""></td>
      <td>
        <img src="images/spacer.gif" width="49" height="1" alt=""></td>
      <td>
        <img src="images/spacer.gif" width="25" height="1" alt=""></td>
      <td>
        <img src="images/spacer.gif" width="10" height="1" alt=""></td>
      <td>
        <img src="images/spacer.gif" width="22" height="1" alt=""></td>
      <td>
        <img src="images/spacer.gif" width="4" height="1" alt=""></td>
      <td>
        <img src="images/spacer.gif" width="32" height="1" alt=""></td>
      <td>
        <img src="images/spacer.gif" width="7" height="1" alt=""></td>
      <td>
        <img src="images/spacer.gif" width="29" height="1" alt=""></td>
      <td>
        <img src="images/spacer.gif" width="15" height="1" alt=""></td>
      <td>
        <img src="images/spacer.gif" width="6" height="1" alt=""></td>
      <td>
        <img src="images/spacer.gif" width="14" height="1" alt=""></td>
      <td>
        <img src="images/spacer.gif" width="27" height="1" alt=""></td>
      <td>
        <img src="images/spacer.gif" width="3" height="1" alt=""></td>
      <td>
        <img src="images/spacer.gif" width="25" height="1" alt=""></td>
      <td>
        <img src="images/spacer.gif" width="1" height="1" alt=""></td>
      <td>
        <img src="images/spacer.gif" width="17" height="1" alt=""></td>
      <td>
        <img src="images/spacer.gif" width="1" height="1" alt=""></td>
      <td>
        <img src="images/spacer.gif" width="1" height="1" alt=""></td>
      <td>
        <img src="images/spacer.gif" width="21" height="1" alt=""></td>
      <td>
        <img src="images/spacer.gif" width="15" height="1" alt=""></td>
      <td>
        <img src="images/spacer.gif" width="48" height="1" alt=""></td>
      <td>
        <img src="images/spacer.gif" width="32" height="1" alt=""></td>
      <td>
        <img src="images/spacer.gif" width="32" height="1" alt=""></td>
      <td>
        <img src="images/spacer.gif" width="7" height="1" alt=""></td>
      <td>
        <img src="images/spacer.gif" width="32" height="1" alt=""></td>
      <td>
        <img src="images/spacer.gif" width="8" height="1" alt=""></td>
      <td>
        <img src="images/spacer.gif" width="7" height="1" alt=""></td>
      <td>
        <img src="images/spacer.gif" width="25" height="1" alt=""></td>
      <td>
        <img src="images/spacer.gif" width="7" height="1" alt=""></td>
      <td>
        <img src="images/spacer.gif" width="32" height="1" alt=""></td>
      <td>
        <img src="images/spacer.gif" width="8" height="1" alt=""></td>
      <td>
        <img src="images/spacer.gif" width="26" height="1" alt=""></td>
      <td>
        <img src="images/spacer.gif" width="6" height="1" alt=""></td>
      <td>
        <img src="images/spacer.gif" width="15" height="1" alt=""></td>
      <td>
        <img src="images/spacer.gif" width="40" height="1" alt=""></td>
      <td></td>
    </tr>
  </tbody></table>
</div>
<img src="images/spacer.gif" width="1" height="410" alt=""><!-- End Save for Web Slices -->

</body></html>

**Gilligan** · 12-26-2010, 06:29 PM

We'd have to see the CSS file codes, but I presume that you just need to set margin and padding to "0" on that image.

Code:

img .class {
  margin:0;
  padding:0;
  border:0;
}

**GayleYe** · 12-27-2010, 12:28 AM

Everything seems to be set to 0 already in the margins.
How can I go about showing you the CSS file codes?

**Gilligan** · 12-27-2010, 08:36 AM

Looking at your HTML code, you have linked two stylesheets:

Code:

<link href="../site_layout.css" rel="stylesheet" type="text/css">
<link href="../site_layout_content.css" rel="stylesheet" type="text/css">

Just paste the contents of "site_layout.css" and "site_layout_content.css" here please

**GayleYe** · 12-27-2010, 10:25 AM

site_layout

Code:

@charset "ISO-8859-1";
#site_layout {
    background-color: #F8F8F8;
    height: 100%;
    width: 100%;
    padding-top: 35px;
}

site_layout_content

Code:

@charset "ISO-8859-1";
#site_layout_content {
    background-color: #F8F8F8;
    height: 350px;
    width: 800px;
    color: #312E30;
    font-size: 24px;
    font-family: "Helvetica Light";
}

**LadynRed** · 12-27-2010, 10:29 AM

This is why you should not export from Photoshop to DW - it spews garbage code.
No css.. it's all inline and tables-based.. nasty

**GayleYe** · 01-07-2011, 06:43 PM

I'm guessing I'm doomed.
Which program do you suggest I use to actually design the website? Just Dreamweaver?

**Gilligan** · 01-08-2011, 11:55 AM

Well designing in photoshop isn't the problem, its when you export to dreamweaver. Its much better just to do the PSD to HTML conversion yourself using CSS.

**LadynRed** · 01-08-2011, 12:17 PM

DESIGN with Photoshop.
WRITE the code yourself

HTML Forum

Find a Professional HTML Freelancer!

FREE Outsourcing eBook!