Support Forums

Full Version: Layout help
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Hi guys im currently making a website for my business but having trouble with the layout. I made the website in photoshop and edited it in dreamweaver. It appears fine in Safari but in firefox the layout is thrown out Confused.

I can get the code on request if it is needed thanks....

FIREFOX

http://img687.imageshack.us/i/firefoxep.png/

SAFARI

http://img227.imageshack.us/i/safariv.png/
Code:
<html>
<head>
<title>wctnew</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
#Site_layout {
    background-color: #030202;
    height: 100%;
    width: 100%;
    padding-top: 35px;
    padding-right: 0px;
    padding-bottom: 5px;
    padding-left: 0px;
}
#text {
    background-color: #B6A876;
    height: 356px;
    width: 269px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-style: normal;
    color: #FFF;
    padding: 0px;
    margin: 0px;
}
-->
</style>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (wctnew.psd) -->
<div id="Site_layout">
  <table width="801" height="601" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
    <tr>
      <td colspan="10">
        <img src="images/Logo.gif" width="330" height="84" alt=""></td>
      <td colspan="4" rowspan="3">
        <img src="images/Index_02.gif" width="470" height="171" alt=""></td>
      <td>
        <img src="images/spacer.gif" width="1" height="84" alt=""></td>
      </tr>
    <tr>
      <td colspan="10">
        <img src="images/Index_03.gif" width="330" height="67" alt=""></td>
      <td>
        <img src="images/spacer.gif" width="1" height="67" alt=""></td>
      </tr>
    <tr>
      <td colspan="3" rowspan="2">
        <img src="images/Index_04.gif" width="26" height="46" alt=""></td>
      <td>
        <img src="images/Home.gif" width="53" height="20" alt=""></td>
      <td colspan="6">
        <img src="images/Index_06.gif" width="251" height="20" alt=""></td>
      <td>
        <img src="images/spacer.gif" width="1" height="20" alt=""></td>
      </tr>
    <tr>
      <td colspan="6">
        <img src="images/Index_07.gif" width="144" height="26" alt=""></td>
      <td colspan="2" rowspan="11"><div id="text">
        <p>Welccome to WCT Plastering.</p>
</div></td>
      <td colspan="3" rowspan="3">
        <img src="images/Index_09.gif" width="361" height="58" alt=""></td>
      <td>
        <img src="images/spacer.gif" width="1" height="26" alt=""></td>
      </tr>
    <tr>
      <td colspan="2" rowspan="5">
        <img src="images/Index_10.gif" width="23" height="83" alt=""></td>
      <td colspan="5">
        <img src="images/Services.gif" width="68" height="16" alt=""></td>
      <td colspan="2" rowspan="7">
        <img src="images/Index_12.gif" width="79" height="138" alt=""></td>
      <td>
        <img src="images/spacer.gif" width="1" height="16" alt=""></td>
      </tr>
    <tr>
      <td colspan="5" rowspan="2">
        <img src="images/Index_13.gif" width="68" height="28" alt=""></td>
      <td>
        <img src="images/spacer.gif" width="1" height="16" alt=""></td>
      </tr>
    <tr>
      <td rowspan="9">
        <img src="images/Index_14.gif" width="36" height="371" alt=""></td>
      <td rowspan="7">
        <img src="images/Mainimage.jpg" width="297" height="240" alt=""></td>
      <td rowspan="9">
        <img src="images/Index_16.gif" width="28" height="371" alt=""></td>
      <td>
        <img src="images/spacer.gif" width="1" height="12" alt=""></td>
      </tr>
    <tr>
      <td colspan="4">
        <img src="images/Gallery.gif" width="65" height="18" alt=""></td>
      <td rowspan="4">
        <img src="images/Index_18.gif" width="3" height="94" alt=""></td>
      <td>
        <img src="images/spacer.gif" width="1" height="18" alt=""></td>
      </tr>
    <tr>
      <td colspan="4">
        <img src="images/Index_19.gif" width="65" height="21" alt=""></td>
      <td>
        <img src="images/spacer.gif" width="1" height="21" alt=""></td>
      </tr>
    <tr>
      <td rowspan="6">
        <img src="images/Index_20.gif" width="18" height="320" alt=""></td>
      <td colspan="4">
        <img src="images/FAQS.gif" width="65" height="25" alt=""></td>
      <td rowspan="2">
        <img src="images/Index_22.gif" width="5" height="55" alt=""></td>
      <td>
        <img src="images/spacer.gif" width="1" height="25" alt=""></td>
      </tr>
    <tr>
      <td colspan="4">
        <img src="images/Index_23.gif" width="65" height="30" alt=""></td>
      <td>
        <img src="images/spacer.gif" width="1" height="30" alt=""></td>
      </tr>
    <tr>
      <td colspan="7">
        <img src="images/Contact.gif" width="97" height="15" alt=""></td>
      <td rowspan="4">
        <img src="images/Index_25.gif" width="55" height="265" alt=""></td>
      <td>
        <img src="images/spacer.gif" width="1" height="15" alt=""></td>
      </tr>
    <tr>
      <td colspan="7" rowspan="3">
        <img src="images/Index_26.gif" width="97" height="250" alt=""></td>
      <td>
        <img src="images/spacer.gif" width="1" height="119" alt=""></td>
      </tr>
    <tr>
      <td rowspan="2">
        <img src="images/Index_27.gif" width="297" height="131" alt=""></td>
      <td>
        <img src="images/spacer.gif" width="1" height="58" alt=""></td>
      </tr>
    <tr>
      <td colspan="2"><img src="images/Index_28.gif" width="269" height="73" alt=""></td>
      <td>
        <img src="images/spacer.gif" width="1" height="73" alt=""></td>
      </tr>
    <tr>
      <td>
        <img src="images/spacer.gif" width="18" height="1" alt=""></td>
      <td>
        <img src="images/spacer.gif" width="5" height="1" alt=""></td>
      <td>
        <img src="images/spacer.gif" width="3" height="1" alt=""></td>
      <td>
        <img src="images/spacer.gif" width="53" height="1" alt=""></td>
      <td>
        <img src="images/spacer.gif" width="4" height="1" alt=""></td>
      <td>
        <img src="images/spacer.gif" width="5" height="1" alt=""></td>
      <td>
        <img src="images/spacer.gif" width="3" height="1" alt=""></td>
      <td>
        <img src="images/spacer.gif" width="24" height="1" alt=""></td>
      <td>
        <img src="images/spacer.gif" width="55" height="1" alt=""></td>
      <td>
        <img src="images/spacer.gif" width="160" height="1" alt=""></td>
      <td>
        <img src="images/spacer.gif" width="109" height="1" alt=""></td>
      <td>
        <img src="images/spacer.gif" width="36" height="1" alt=""></td>
      <td>
        <img src="images/spacer.gif" width="297" height="1" alt=""></td>
      <td>
        <img src="images/spacer.gif" width="28" height="1" alt=""></td>
      <td></td>
      </tr>
  </table>
</div>
<!-- End Save for Web Slices -->
</body>
</html>
Yeah, to be honest why do browsers do that, some layouts, and colors are different for other browsers, and support forums is slightly different for FireFox, Internet Explorer, Opera, Flock.
you should change all the table margins to auto not by doing manual,
or you can build a website much professionally with Joomla, it is really easy to use and works fine on fire fox, and Safari.