Topic: Messed up layout

I have integrated my forum into my website but for some reason the header seems to be messed up. This only happens in firefox though :S In Explorer it is fine.

www.submition-zone.com/upload/index.php is my forum.

Below is what is in my main.tpl

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html dir="<pun_content_direction>">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Submition-Zone</title>
<style type="text/css">
<!--
body {
    background-image: url(/images/bg.jpg);
    background-repeat:repeat-x;
    background-color: #41555E;
}
.style1 {font-family: Arial, Helvetica, sans-serif}
.style3 {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: medium;
}
.style6 {color: #FFFFFF; font-family: Arial, Helvetica, sans-serif;}
.style9 {    font-size: small;
    color: #CCCCCC;
}
.style10 {color: #000000}

#mytable, #mytable td, #mytable th {border: none; padding: 0}
-->
</style></head>

<body bottommargin="0" topmargin="0">
<table border="0" align="center" cellpadding="0" cellspacing="0" id='mytable'>
  <tr>
    <td width="10" rowspan="2" background="/images/margin.jpg"> </td>
    <td align="left" valign="top"><table border="0" cellpadding="0" cellspacing="0" width="778">
      <!-- fwtable fwsrc="Untitled" fwbase="layout.jpg" fwstyle="Dreamweaver" fwdocid = "1044510095" fwnested="0" -->
      <tr>
        <td><img src="spacer.gif" width="17" height="1" border="0" alt="" /></td>
        <td><img src="spacer.gif" width="166" height="1" border="0" alt="" /></td>
        <td><img src="spacer.gif" width="22" height="1" border="0" alt="" /></td>
        <td><img src="spacer.gif" width="9" height="1" border="0" alt="" /></td>
        <td><img src="spacer.gif" width="546" height="1" border="0" alt="" /></td>
        <td><img src="spacer.gif" width="18" height="1" border="0" alt="" /></td>
        <td><img src="spacer.gif" width="1" height="1" border="0" alt="" /></td>
      </tr>
      <tr>
        <td colspan="6"><img src="/images/layout_r1_c1.jpg" alt="" name="layout_r1_c1" width="778" height="27" border="0" id="layout_r1_c1" /></td>
        <td><img src="spacer.gif" width="1" height="27" border="0" alt="" /></td>
      </tr>
      <tr>
        <td rowspan="6"><img src="/images/layout_r2_c1.jpg" alt="" name="layout_r2_c1" width="17" height="309" border="0" id="layout_r2_c1" /></td>
        <td><img src="/images/layout_r2_c2.jpg" alt="" name="layout_r2_c2" width="166" height="68" border="0" id="layout_r2_c2" /></td>
        <td rowspan="4"><img src="/images/layout_r2_c3.jpg" alt="" name="layout_r2_c3" width="22" height="183" border="0" id="layout_r2_c3" /></td>
        <td height="97" colspan="3" rowspan="2" background="/images/layout_r2_c4.jpg"> </td>
        <td><img src="spacer.gif" width="1" height="68" border="0" alt="" /></td>
      </tr>
      <tr>
        <td rowspan="3"><img src="/images/layout_r3_c2.jpg" alt="" name="layout_r3_c2" width="166" height="115" border="0" id="layout_r3_c2" /></td>
        <td><img src="spacer.gif" width="1" height="29" border="0" alt="" /></td>
      </tr>
      <tr>
        <td rowspan="2"><img src="/images/layout_r4_c4.jpg" alt="" name="layout_r4_c4" width="9" height="86" border="0" id="layout_r4_c4" /></td>
        <td colspan="2" background="layout_r4_c5.jpg"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="564" height="24">
            <param name="movie" value="/images/buttons.swf" />
            <param name="quality" value="high" />
            <embed src="/images/buttons.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="564" height="24"></embed>
        </object></td>
        <td><img src="spacer.gif" width="1" height="24" border="0" alt="" /></td>
      </tr>
      <tr>
        <td colspan="2"><img src="/images/layout_r5_c5.jpg" alt="" name="layout_r5_c5" width="564" height="62" border="0" id="layout_r5_c5" /></td>
        <td><img src="spacer.gif" width="1" height="62" border="0" alt="" /></td>
      </tr>
      <tr>
        <td height="112" colspan="4" align="center" valign="middle" background="/images/layout_r6_c2.jpg"><script type="text/javascript"><!--
google_ad_client = "pub-0374097414694682";
google_ad_width = 728;
google_ad_height = 90;
google_ad_format = "728x90_as";
google_ad_type = "image";
google_ad_channel ="";
google_color_border = "999999";
google_color_bg = "999999";
google_color_link = "FFFFFF";
google_color_url = "666666";
google_color_text = "CCCCCC";
//--></script>
            <script type="text/javascript"
  src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
      </script>
 </td>
        <td rowspan="2"><img src="/images/layout_r6_c6.jpg" alt="" name="layout_r6_c6" width="18" height="126" border="0" id="layout_r6_c6" /></td>
        <td><img src="spacer.gif" width="1" height="112" border="0" alt="" /></td>
      </tr>
      <tr>
        <td colspan="4"><img src="/images/layout_r7_c2.jpg" alt="" name="layout_r7_c2" width="743" height="14" border="0" id="layout_r7_c2" /></td>
        <td><img src="spacer.gif" width="1" height="14" border="0" alt="" /></td>
      </tr>
    </table></td>
    <td width="10" rowspan="2" background="/images/margin.jpg"> </td>
  </tr>
  <tr>
    <td align="left" valign="top" bgcolor="#505050"><pun_head>


<div id="punwrap">
<div id="pun<pun_page>" class="pun">

<div id="brdheader" class="block">
    <div class="box">
        <div id="brdtitle" class="inbox">
            <pun_title>
            <pun_desc>
        </div>
        <pun_navlinks>
        <pun_status>
    </div>
</div>

<pun_announcement>

<pun_main>

<pun_footer>
</div>
</div> </td>
  </tr>
</table>
</body>
</html>

Re: Messed up layout

Do you really not see the problem with what you're doing? tongue

You can't just declare multiple doctypes, open up new <html> tags, etc and expect everything to be OK

http://validator.w3.org/check?verbose=1 … Findex.php

Fix these and then you should be fine (or at least better off than now)

Re: Messed up layout

Smartys wrote:

Do you really not see the problem with what you're doing? tongue

You can't just declare multiple doctypes, open up new <html> tags, etc and expect everything to be OK

http://validator.w3.org/check?verbose=1 … Findex.php

Fix these and then you should be fine (or at least better off than now)

Now that was a stupid mistake. It didnt even occur to me. Thankyou smile

4

Re: Messed up layout

And if after fixing it you continue to see space around your images, try
td img {display: block)

Re: Messed up layout

Paul wrote:

And if after fixing it you continue to see space around your images, try
td img {display: block)

Ive got it working but thanks anyway smile