Help needed with Spacing

hbb · June 12th, 2007, 10:00 AM

Hi there.

I'm not a web designer, but am rather eager. Got a website working really nicely in Internet Explorer. It was all going well until I tested in Firefox and Safari. I can't for the life of me make it look like it did in IE... I think it may be something to do with the spacing?!

Could somebody... anybody please help?!

Cheers
Ben

Below is the code:

Code:

<html>
<head>
<title>National Youth Brass Band of Great Britain</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- Fireworks 4.0  Dreamweaver 4.0 target.  Created Thu Aug 10 19:29:05 GMT+0100 (GMT Standard Time) 2006-->
<link rel="stylesheet" type="text/css"
href="boxmodelhack.css" />

</head>
<body background="http://www.webforumz.com/images/background.gif">

<div class="content" align="center">
<table bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" width="800">
  <!--DWLayoutTable-->
  <!-- fwtable fwsrc="NYBB.png" fwbase="index.gif" fwstyle="Dreamweaver" fwdocid = "742308039" fwnested="0" -->

  <tr>    <td><img src="http://www.webforumz.com/images/spacer.gif" width="192" height="1" border="0"></td>    <td width="520"><img src="http://www.webforumz.com/images/spacer.gif" width="520" height="1" border="0"></td>    <td><img src="http://www.webforumz.com/images/spacer.gif" width="88" height="1" border="0"></td>    <td><img src="http://www.webforumz.com/images/spacer.gif" width="1" height="1" border="0"></td>  </tr>  <tr>    <td colspan="3"><img name="index_r1_c1" src="http://www.webforumz.com/images/index_r1_c1.gif" width="800" height="208" border="0"></td>    <td><img src="http://www.webforumz.com/images/spacer.gif" width="1" height="208" border="0"></td>  </tr>  <tr>    <td rowspan="2"><img src="http://www.webforumz.com/images/index_r2_c1.gif" name="index_r2_c1" width="192" height="392" border="0" usemap="#index_r2_c1Map"></td>    <td height="275" valign="top" bgcolor="#ffffff"><table width="100%" border="0" cellpadding="0" cellspacing="0">      <!--DWLayoutTable-->      <tr>        <td width="520" height="275" valign="top">        <iframe name="iframe1" src="home.html" align="top" height="275" width="520">        If you can see this, your browser does not support iframes! </iframe></td>      </tr>    </table></td>    <td rowspan="2"><img name="index_r2_c3" src="http://www.webforumz.com/images/index_r2_c3.gif" width="88" height="392" border="0"></td>    <td><img src="http://www.webforumz.com/images/spacer.gif" width="1" height="275" border="0"></td>  </tr>  <tr>    <td><img name="index_r3_c2" src="http://www.webforumz.com/images/index_r3_c2.gif" width="520" height="117" border="0"></td>    <td><img src="http://www.webforumz.com/images/spacer.gif" width="1" height="117" border="0"></td>  </tr></table></div><div class="content" align="center"></div><div class="content" align="center"></div><map name="index_r2_c1Map"><area shape="rect" coords="68,7,126,30" href="home.html" target="iframe1"><area shape="rect" coords="69,31,123,52" href="news.html" target="iframe1"><area shape="rect" coords="68,53,155,74" href="members.html" target="iframe1"><area shape="rect" coords="68,74,142,97" href="courses.html" target="iframe1"><area shape="rect" coords="68,97,151,118" href="auditions.html" target="iframe1"><area shape="rect" coords="68,122,138,140" href="policies.html" target="iframe1"><area shape="rect" coords="68,141,172,163" href="music_staff.html" target="iframe1"><area shape="rect" coords="67,164,173,186" href="house_staff.html" target="iframe1"><area shape="rect" coords="68,187,135,208" href="council.html" target="iframe1"><area shape="rect" coords="66,208,171,232" href="recordings.html" target="iframe1"><area shape="rect" coords="70,234,124,254" href="ncbb.html" target="iframe1"><area shape="rect" coords="69,254,140,277" href="contact.html" target="iframe1"></map></body></html>

karinne · June 12th, 2007, 10:02 AM

Do you have a link to this?

hbb · June 12th, 2007, 10:17 AM

Unfortunately I don't.

karinne · June 12th, 2007, 10:23 AM

It's hard to tell without a link as we can just copy the code to our machines ... we don't have the images.

And the fact that you used Fireworks to generate/slice your mock-up is bad enough. All the crappy code that it generates makes it really hard to sift through and see what's happening.

hbb · June 12th, 2007, 10:24 AM

I'll see what I can do!

hbb · June 12th, 2007, 10:38 AM

I know it's not the best hosting, but as I don't have access to the proper hosting as of yet then unfortunately geocities will have to do! However, you can see what I mean when you compare the site in IE to Firefox!

http://geocities.com/nationalyouthbrassband/

Cheers
Ben

karinne · June 12th, 2007, 10:47 AM

Change the size of your iframe to

Code:

<iframe width="510" height="265" align="top" src="home.html" name="iframe1">

You had 520 and 275 as width and height ... I just reduced the numbers and it seems to work.

I have to tell you right now tho that looking at your site. If I were to do it in HTML with CSS, there would be only 3 images. No spacer gifs and alot more accessible. You might want to start looking into CSS for layouts. See my sig for resource link.

hbb · June 12th, 2007, 10:57 AM

Thanks! That's amazing... I don't know how I didn't spot that!

Re: CSS. I may look into that in the future, however I certainly don't have the confidence to look at things like that at the moment!

Thanks ever so much again!

Ben

karinne · June 12th, 2007, 10:58 AM

No problem.

Lchad · June 12th, 2007, 12:22 PM

She has xray eyes! Super hero - like! :superman: