3 replies [Last post]
slinx
slinx's picture
Offline
newbie
London
Last seen: 2 years 49 weeks ago
London
Joined: 2011-10-17
Posts: 2
Points: 3

Hi all

First time on this community, bit of a CSS newbie so be gentle Smile

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

thepineapplehead
thepineapplehead's picture
Offline
Guru
Milton Keynes
Last seen: 11 weeks 4 hours ago
Milton Keynes
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

<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 Laughing out loud

It's not a good idea to mark your site up in tables. It's even worse to use spacer gifs Wink

You might want to get the site validated first too:

http://validator.w3.org/check?uri=http%3A%2F%2Fwww.londonhomestays.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

Verschwindende wrote:
  • CSS doesn't make pies

slinx
slinx's picture
Offline
newbie
London
Last seen: 2 years 49 weeks ago
London
Joined: 2011-10-17
Posts: 2
Points: 3

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?

thepineapplehead
thepineapplehead's picture
Offline
Guru
Milton Keynes
Last seen: 11 weeks 4 hours ago
Milton Keynes
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

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 Laughing out loud

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 Laughing out loud

Verschwindende wrote:
  • CSS doesn't make pies