Mon, 2011-10-17 12:19
Hi all
First time on this community, bit of a CSS newbie so be gentle 
My website www.londonhomestays.com has an issue on Firefox with blank space below the Flash banner, it's not present on other browsers.
Any suggestions or advice would be much appreciated!
Thanks, Steve
Tue, 2011-10-18 12:15
#1
<tr> <td><img
<tr> <td><img src="spacer.gif" width="71" height="1" border="0" alt="" /></td> <td><img src="spacer.gif" width="20" height="1" border="0" alt="" /></td> <td><img src="spacer.gif" width="10" height="1" border="0" alt="" /></td> <td><img src="spacer.gif" width="67" height="1" border="0" alt="" /></td> <td><img src="spacer.gif" width="46" height="1" border="0" alt="" /></td> <td><img src="spacer.gif" width="28" height="1" border="0" alt="" /></td> <td><img src="spacer.gif" width="65" height="1" border="0" alt="" /></td> <td><img src="spacer.gif" width="28" height="1" border="0" alt="" /></td> <td><img src="spacer.gif" width="31" height="1" border="0" alt="" /></td> <td><img src="spacer.gif" width="100" height="1" border="0" alt="" /></td> <td><img src="spacer.gif" width="11" height="1" border="0" alt="" /></td> <td><img src="spacer.gif" width="30" height="1" border="0" alt="" /></td> <td><img src="spacer.gif" width="6" height="1" border="0" alt="" /></td> <td><img src="spacer.gif" width="169" height="1" border="0" alt="" /></td> <td><img src="spacer.gif" width="31" height="1" border="0" alt="" /></td> <td><img src="spacer.gif" width="119" height="1" border="0" alt="" /></td> <td><img src="spacer.gif" width="63" height="1" border="0" alt="" /></td> <td><img src="spacer.gif" width="14" height="1" border="0" alt="" /></td> <td><img src="spacer.gif" width="20" height="1" border="0" alt="" /></td> <td><img src="spacer.gif" width="71" height="1" border="0" alt="" /></td> <td><img src="spacer.gif" width="1" height="1" border="0" alt="" /></td> </tr>
Whoah hello there 1995 
It's not a good idea to mark your site up in tables. It's even worse to use spacer gifs 
You might want to get the site validated first too:
Thu, 2011-10-20 06:53
#2
Haha! Yes I guess my CSS
Haha! Yes I guess my CSS skills are not too polished, I actually used Fireworks to design the layout of the page and then exported to Dreamweaver, hence all the bad tables/spacers.
Any suggestions for the easiest way to de-1995 my website?
Thu, 2011-10-20 07:46
#3
Honestly? Start again from
Honestly?
Start again from scratch.
The way I used to learn was to start replacing each bit at a time.
Replace this:
<body bgcolor="#ffffff" onload="MM_preloadImages('MenuExtendedWidth_r2_c5_f2.jpg','MenuExtendedWidth_r2_c7_f2.jpg','MenuExtendedWidth_r2_c9_f2.jpg','MenuExtendedWidth_r2_c13_f2.jpg','MenuExtendedWidth_r2_c16_f2.jpg','MenuExtendedWidth_r7_c3_f2.jpg','MenuExtendedWidth_r9_c3_f2.jpg','MenuExtendedWidth_r10_c3_f2.jpg','MenuExtendedWidth_r11_c3_f2.jpg','MenuExtendedWidth_r12_c3_f2.jpg','http://www.londonhomestays.com/blog_btns_f2.png','groupsbtn_f2.jpg','more_btn_f2.gif','newbtns_r1_c1_f2.jpg','newbtns_r2_c1_f2.jpg','newbtns_r1_c1_f2.jpg','newbtns_r2_c1_f2.jpg','newbtns_r3_c1_f2.jpg')">
with this:
<body>
Preload code like that is outdated and IMO, completely useless. The BGColor should also be set in the CSS file.
Then, replace this:
<tr> <td><img src="spacer.gif" width="71" height="1" border="0" alt="" /></td> <td><img src="spacer.gif" width="20" height="1" border="0" alt="" /></td> <td><img src="spacer.gif" width="10" height="1" border="0" alt="" /></td> <td><img src="spacer.gif" width="67" height="1" border="0" alt="" /></td> <td><img src="spacer.gif" width="46" height="1" border="0" alt="" /></td> <td><img src="spacer.gif" width="28" height="1" border="0" alt="" /></td> <td><img src="spacer.gif" width="65" height="1" border="0" alt="" /></td> <td><img src="spacer.gif" width="28" height="1" border="0" alt="" /></td> <td><img src="spacer.gif" width="31" height="1" border="0" alt="" /></td> <td><img src="spacer.gif" width="100" height="1" border="0" alt="" /></td> <td><img src="spacer.gif" width="11" height="1" border="0" alt="" /></td> <td><img src="spacer.gif" width="30" height="1" border="0" alt="" /></td> <td><img src="spacer.gif" width="6" height="1" border="0" alt="" /></td> <td><img src="spacer.gif" width="169" height="1" border="0" alt="" /></td> <td><img src="spacer.gif" width="31" height="1" border="0" alt="" /></td> <td><img src="spacer.gif" width="119" height="1" border="0" alt="" /></td> <td><img src="spacer.gif" width="63" height="1" border="0" alt="" /></td> <td><img src="spacer.gif" width="14" height="1" border="0" alt="" /></td> <td><img src="spacer.gif" width="20" height="1" border="0" alt="" /></td> <td><img src="spacer.gif" width="71" height="1" border="0" alt="" /></td> <td><img src="spacer.gif" width="1" height="1" border="0" alt="" /></td> </tr>
with this:
Seriously
Then, start reading through the tutorials at htmldog.com and rewrite each section of your page. For instance, take the top navbar (the country links) out of the table and mark it up as a list, then style it to match the original. Then do the same with the top menu.
Please let us know how you get on