Menu Problem

[keydin]

I have a horizontal nav menu that I am using that displays correctly in FF, Safari, and IE6. In IE7 it displays as a vertical menu instead. Can you give me a hand. I can't seem to figure this one out. Thanks in advance.

 

The page is here: http://whylifechurch.com/wordpress

 

Here is the CSS:

 

.menu {
  xdisplay:table;         /* ignored by IE */
  font-size:90%;
  padding-top: 10px;
  list-style-type:none;
  text-align: right;
  text-transform:uppercase;
  white-space:nowrap;    /* keep text on one line */
  
  }

* 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 10px;
  color:#fff; 
   

  text-decoration:none;
  }
* 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:#FF6600;
  
  }

 

 

[bronzemonkey]

Your hack-ridden code is only targeting IE6. Try ditching the hacks and learning about making menus from lists - http://css.maxdesign.com.au/listamatic/

[pquery]

you should go with the csshover.htc (do a search for a copy of that file, and it's documentation) that's what a lot of the better css coders use as the standard fix for cross browser compatibility now.

 

I believe Eric Meyer has documentation on his CSS site. I don't have the url off hand though.