What fix should I use to make my HTML page look right in IE?

Alright, looking at this section, you will need to figure out how tall these two tables (which sit on top of each other) need to be to fit into 139px; So lets specify 100 for the height of the first, and the second(menu.js) needs to be 39 then:

<!-- HEADER AND SEARCH -->
<table cellpadding="0" cellspacing="0" border="0" width="100%" class="header"><tr><td height="100" width="500" valign="top">
<script language="JavaScript" type="text/javascript" src="header.js"></script>
</td><td valign="middle" align="right">
<script language="JavaScript" type="text/javascript" src="search.js"></script>
<img src="picts/spacer.gif" width="10" height="10" alt="image"><br>
</td><td width="10">
</td></tr></table>




<script language="JavaScript" type="text/javascript" src="menu.js"></script>

 

you would then need to specify the height in the table cells <td> of the menu.js file to make sure it outputs at 39 tall

 

<!-- Begin CSS Vertical Menu - menu ver 3.1 2008

// NOTE: If you use a ' add a slash before it like this \'


var leftspacing = "1" // LEFT MENU PADDING
var rightspacing = "20" // RIGHT MENU PADDING
var menuside = "right" // MENU SIDE | left | right | center
var menuwidth = "100" // TOTAL MENU WIDTH (use if wrapping is apparent)


document.write('<table cellpadding="0" cellspacing="0" border="0" class="menutable"><tr><td height="39" class="printhide" align="'+menuside+'">');
document.write('<table cellpadding="0" cellspacing="0" border="0"><tr><td width="'+leftspacing+'">');
document.write('<img src="picts/spacer.gif" width="'+leftspacing+'" height="1"><br>');
document.write('</td><td>');

document.write('<ul id="menunav">');





// START MENU LINKS - EDIT BELOW THIS AREA

 

Is height="100" the only change in that code you modified? Do I just need to modify the height or something else too?

 

that height="100"

and the height="39" in the menu.js file

 

you may want to get rid if that <br> here also:

<script language="JavaScript" type="text/javascript" src="menu.js"></script>


<br>

 

It almost worked but there's still like 1 pixel offset in IE while in Firefox it looks out of position. Thanks anyway for taking the time to try to fix this. I guess I will have to remove that graphic from there and forget about it

 

I found a way to solve the problem. I will change the graphic for a transparent GIF. Actually it'll be two graphics since I will cut the graphic in two parts to optimize each for the two different background colors below. If anybody comes up with another solution please post it. I might use it in a future site and if I do, I will send you $10 for your help. Thanks to all that contributed!!!!!

 

I found a solution. Replace some of your files with the ones in this zip.

 

One more note: You'll notice you no longer need the "menu.js" file, because I simply inserted that code directly into the page.

 

I'm sitting here going "Is that white area next to the tree supposed to be empty like that?" - doh, I browse with flash off and you have no image fallbacks.

Solution? Throw out EVERYTHING and start over with minimalist semantic markup and separation of presentation from content. That means chuck the tables as even using tables for layout there's no reason for this to have more than one of them. Spacer gif's, empty para's for spacing, entity spaces - the coding style is a decade behind the times. The DHTML & flash for static elements just adds /fail/ on top of /fail/ too from an accessability standpoint - much less that a search engine isn't going to see bupkis on the page.

If I have time tomorrow, I'll toss together a baseline template that will do just that.