Website layout issue.

[ddarbyshire]

Hi here is my website: www.zanim.co.uk

The problem is, as you may see, gaps appear between objects on the website, any hint as to why it is doing this and how to fix it?

When i look at it on all of my browsers on my Macbook Pro it appears fine, i've tried with Safari, Chrome, FireFox and Opera. So maybe it is Operating System related because other people i know who have looked who i know use Mac haven't mentioned it.

I've made my website with Adobe Dreamweaver CS5.5 after importing a web sliced layout of my site from Adobe Photoshop CS5.1 which i did over there.

Any ideas? You probably know from the site source file but the website is just the standard .HTML nothing new or old.

Cheers

 

[ddarbyshire]

here is the coding for my heading which is where most of the trouble is:

<table width="32" cellpadding="0" cellspacing="0" border="0" align="center"id="Table_01">
<tr>

<th height="0" colspan="32" rowspan="0" align="center" valign="middle"><img id="tst1_01" src="tst1/images/tst1_01.jpg" width="1200" height="13" alt="" /></th>
<th><img src="tst1/images/spacer.gif" width="1" height="13" alt="" /></th></tr>
<tr><th rowspan="14"><img id="tst1_02" src="tst1/images/tst1_02.jpg" width="73" height="140" alt="" /></th>
<th colspan="5" rowspan="7"><a href="http://www.zanim.co.uk/"><img id="tst1_03" src="tst1/images/tst1_03.jpg" width="223" height="66" alt="" /></a></th>

<th colspan="26"><img id="tst1_04" src="tst1/images/tst1_04.jpg" width="904" height="20" alt="" /></th>

<th><img src="tst1/images/spacer.gif" width="1" height="20" alt="" /></th></tr><tr><th colspan="16"><img id="tst1_05" src="tst1/images/tst1_05.jpg" width="682" height="9" alt="" /></th><th colspan="2" rowspan="5"><a href="http://www.zanim.co.uk/" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('home','','tst1/images (hover)/home header hover.jpg',1)"><img src="tst1/images/tst1_06.jpg" alt="home" name="home" width="39" height="42" border="0" id="home" /></a></th><th rowspan="10"><img id="tst1_07" src="tst1/images/tst1_07.jpg" width="12" height="77" alt="" /></th><th rowspan="5"><script type="text/javascript">
function emf_open_window(url, height, width) {
var leftPos = 0;
var topPos = 0;
if (screen) {
leftPos = (screen.width - width) / 2;
topPos = (screen.height - height) / 2;
window.open(url, null, 'width='+width+',height='+height+',left='+leftPos+',top='+topPos+', toolbar=0, location=0, status=1, scrollbars=1, resizable=1');
}
}
</script><a href='http://www.emailmeform.com/builder/form/5UtyO74bf09PzLT5' title='Contact Form' target='_blank' onclick="emf_open_window(this.href, 579, 840); return false"
onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contact','','tst1/images (hover)/contact header hover.jpg',1)"><img src="tst1/images/tst1_08.jpg" alt="contact" name="contact" width="42" height="42" border="0" id="contact" /></a></th><th colspan="2" rowspan="10"><img id="tst1_09" src="tst1/images/tst1_09.jpg" width="11" height="77" alt="" /></th>
…….

Not the neatest of code, but have tried taking out spaces and breaks in code to no avail, also tried switching to pixel sizing instead of columns and rows, still nothing. I am completely STUCK.

 

[waloshin]

Why put ads on a website that you plan to sell stuff on?

 

[jared_kipe]

here is the coding for my heading which is where most of the trouble is:

<table width="32" cellpadding="0" cellspacing="0" border="0" align="center"id="Table_01">
<tr>

<th height="0" colspan="32" rowspan="0" align="center" valign="middle"><img id="tst1_01" src="tst1/images/tst1_01.jpg" width="1200" height="13" alt="" /></th>
<th><img src="tst1/images/spacer.gif" width="1" height="13" alt="" /></th></tr>
<tr><th rowspan="14"><img id="tst1_02" src="tst1/images/tst1_02.jpg" width="73" height="140" alt="" /></th>
<th colspan="5" rowspan="7"><a href="http://www.zanim.co.uk/"><img id="tst1_03" src="tst1/images/tst1_03.jpg" width="223" height="66" alt="" /></a></th>

<th colspan="26"><img id="tst1_04" src="tst1/images/tst1_04.jpg" width="904" height="20" alt="" /></th>

<th><img src="tst1/images/spacer.gif" width="1" height="20" alt="" /></th></tr><tr><th colspan="16"><img id="tst1_05" src="tst1/images/tst1_05.jpg" width="682" height="9" alt="" /></th><th colspan="2" rowspan="5"><a href="http://www.zanim.co.uk/" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('home','','tst1/images (hover)/home header hover.jpg',1)"><img src="tst1/images/tst1_06.jpg" alt="home" name="home" width="39" height="42" border="0" id="home" /></a></th><th rowspan="10"><img id="tst1_07" src="tst1/images/tst1_07.jpg" width="12" height="77" alt="" /></th><th rowspan="5"><script type="text/javascript">
function emf_open_window(url, height, width) {
var leftPos = 0;
var topPos = 0;
if (screen) {
leftPos = (screen.width - width) / 2;
topPos = (screen.height - height) / 2;
window.open(url, null, 'width='+width+',height='+height+',left='+leftPos+',top='+topPos+', toolbar=0, location=0, status=1, scrollbars=1, resizable=1');
}
}
</script><a href='http://www.emailmeform.com/builder/form/5UtyO74bf09PzLT5' title='Contact Form' target='_blank' onclick="emf_open_window(this.href, 579, 840); return false"
onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contact','','tst1/images (hover)/contact header hover.jpg',1)"><img src="tst1/images/tst1_08.jpg" alt="contact" name="contact" width="42" height="42" border="0" id="contact" /></a></th><th colspan="2" rowspan="10"><img id="tst1_09" src="tst1/images/tst1_09.jpg" width="11" height="77" alt="" /></th>
…….

Not the neatest of code, but have tried taking out spaces and breaks in code to no avail, also tried switching to pixel sizing instead of columns and rows, still nothing. I am completely STUCK.

Code is right, I think web standards just took a giant leap back 10 years.

Javascript replacing images on hover, pure table layout, this is a giant mess.

 

[ddarbyshire]

Code is right, I think web standards just took a giant leap back 10 years.

Javascript replacing images on hover, pure table layout, this is a giant mess.

Right, well I didn't choose it to be so old style, i just saved my design in Photoshop CS5.1 using "Save for web and devices…" then opened the html file in Dreamweaver CS5.5 and went from there, inserting rollover images using Dreamweaver's insert features etc.

Anyway how can I fix the problem? It would seem it is now only Internet Explorer that is knocking it out of line with the table.

 

[manueld]

If you're serious about the site, I would look for someone to actually code the thing properly for you. It's going to take more work to have that site work in modern browsers. Plus having it coded and structured properly will help you with your SEO.

 

[ddarbyshire]

Well actually I have fixed the problem, internet explorer wanted the borders to be defined as non on some of the slice images despite other browsers presuming no border as no border was defined.

You say the coding I have used is old, and you suggest having someone do it for me, but the coding actually works perfectly fine in the all modern browsers now, as for paying for someone isn't viable for my starting business.

As for you saying the code being a mess, i think that is opinion since it works fine, and dreamweaver self-envelopes the code, though it may not be particularly advanced, it does the job.

Thank you for the help that was given.

 

[Flood123]

I wouldn't really ever recommend using photoshop to write your code for you but if you must, why are you having it export as tables when you could have it export as div containers?

see if this works. This is a shot in the dark. I have never used it personally

save for web and devices:"save"

settings: choose "other"

output settings :
settings: xhtml
under that where it says html, pop that open and choose slices


slice output:
choose generate css referenced by id

play with that see if it gets ya anywhere better.


UPDATE:
It's AWFUL that was as well. I tried it just for grins. It positions everything absolute. Lame. learn to code by hand. You will be MUCH happier in the long run. http://www.w3schools.com/ their is some free resources. Google is your friend. Trust it search and learn my friend.