• From: Florida
  • Registered: 2008-12-19
  • Posts: 2,593

Topic: "A Layout Done In Tables" Issue

I have an issue with this site: calt rout.org/index_2009menu.asp (remove 1 space).

A brief history:

This site was done by someone a few years ago in which they used an incomplete doctype (see below).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >

My task was to replicate a dropdown menu which will replace a bulky and slow dhtml menu builder script which is also not seo friendly either.   This new css menu works perfectly in all browsers including IE. I used an Conditional Comment for IE6 to render a small script in order for the menu to work.

Once I added this to a test page (see link above), the dropdown didn't work in IE.  I then realized that the page is rendering in quirks mode thus leading me to believe that there was not a doctype or it was incorrect.

I have since inserted a correct doctype and the menu now works perfectly.  However, one issue I have is that there is a 1 or 2px gap in the fin just to the left of the menu.  I just can't get this issue resolved for whatever reason.

This gap issue goes away if in quirks mode but then the menu will not work also.  The option is to leave it in quirks mode and change my IE Conditional Comment to allow all IE version to run the script but I really rather not do that.

Any suggestions?

  • From: Florida
  • Registered: 2008-12-19
  • Posts: 2,593

Re: "A Layout Done In Tables" Issue

I think I may have solved it.  Please check anyway just to make sure.

Thanks.

  • Gender: Male
  • From: Salisbury UK
  • Registered: 2008-12-20
  • Posts: 1,231

Re: "A Layout Done In Tables" Issue

It still shows a thin vertical white line in IE7 between trout1.jpg and trout2.jpg. It's not related to the menu. I found that by switching between IE7 and Firefox, IE7 was moving 1px wider, causing a vertical space to appear.

It's related to trout1.jpg. If I made the style .trout1bg repeat instead of no-repeat the space was closed, but of course it repeats the part of the image from the left side onto the right which has the wrong colors. As a quick fix I used Irfanview to cut a 1px wide slice from the right of trout1.jpg and added it to the 140px wide image on the right to make it 141px wide and this worked to cover the 1px wide space in IE7.

Don't ask me what's happening because the markup <td class="trout1bg" rowspan="2" height="60" width="140"></td> limits it to a width of 140px but IE must be expanding this for some reason so providing a wider background image fills the space. As it's a background image the wider image has no effect on Firefox.

It must be that somewhere in that column you have exceeded 140px, perhaps because of spacers, and IE7 has expanded the whole column.

Last edited by Wickham (2009-09-25 03:16:23)

  • From: Florida
  • Registered: 2008-12-19
  • Posts: 2,593

Re: "A Layout Done In Tables" Issue

Like I said, it's not my coding but I think your suggestion is a good one.

Thanks.