[Solved] Yet More CSS List Styling Problems

I am working on re-doing a travel blog for a friend, I am using wordpress and integrating Gallery2 using the plugin WPG2.

The problem I am having is to do with the navigation, I used a tutorial from CSS Play to produce it. It displays correctly in Firefox and IE6 but appears incorrectly in IE7.

"This will not work in IE7 RC1. This browser has not been updated to understand display:table; but has been updated to correct the float bug that IE6 uses to make the ul contain the list of links."

Is it possible to fix this or do I need to start again?

You can view the site here: http://www.fatmantravels.co.uk/testarea

HTML:



• Home


• Gallery


• About


• Contact

CSS:

.menu {
display:table; /* ignored by IE */
padding:0;
list-style-type:none;
white-space:nowrap; /* keep text on one line */
border:2px solid #C92316; /* add a border to show size of menu */
}

* html .menu {
display:inline-block; /* for IE only */
width:1px; /* IE will expand to fit menu width */
padding:0 2px; /* fix bug in IE for border spacing */
}

.menu li {
display:table-cell; /* ignored by IE */
}

* html .menu li {
display:inline; /* for IE only */
}

.menu a, .menu a:visited {
display:block; /* for all browsers except IE */
padding:4px 60px;
color:#ffffff;
background:#C10F00 url(images/img9.jpg) repeat-x;
border:3px solid #fff; /* add a 1px white border around items */
text-decoration:none;
font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 130%;
}

* html .menu a, * html .menu a:visited {
display:inline-block; /* for IE only */
margin:0 -2px; /* to correct an IE border width bug */
}

.menu a:hover {
color:#C10E00;
background:#ffffff;
}

Any help would be much appreciated.