Support Forums

Support Forums > Categories > Webmaster Support > Website Development > Layout help
Full Version: Layout help
You're currently viewing a stripped down version of our content. View the full version with proper formatting.

madguitarist

05-25-2010, 04:20 AM
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/

madguitarist

05-25-2010, 05:45 AM
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>

Natha

05-31-2010, 05:22 PM
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.

Web

07-22-2010, 11:55 AM
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.
Support Forums > Categories > Webmaster Support > Website Development > Layout help