Hi I was wondering if you could help me. A friend of mine has this website and it works fine in Firefox etc but not in IE7. In IE7 the menu bar at the top goes vertical instead of horizontal, therefore it covers half the text. I'm stumped at what to do, so if any of you wizards out here could give us a hand it would be appreciated. The site is: www.purelymancity.com

Looks fine on IE 6, so I can't help you. I would do a google search for IE 7 css bugs.

Yeah its fine with everything other than IE7...annoying. Any replies much appreciated.

The problem is you're using display:table !
Structuring your menu as a UL is correct. To get the LIST to be horizontal instead of vertical, put display:inline on your <LI>. Then dump the display:table and display:table-cell and control spacing with padding and margins on the <LI> items.

My apologies but I'm totally lost at what you mean LadynRed, could you put that into more lamens terms, sorry to sound stupid! hehe

LAYman's terms ??
Here, try this List tutorial instead:
http://css.maxdesign.com.au/listutorial/index.htm

Thanks for the link LadynRed, still no joy though. Seriously confused over here.

This is part of the CSS code that I think is where the problem lies:

/* navigation
--------------------------------------------------*/
#navigation {
height:2.7em;
line-height:2.7em;
position: relative;
margin:0em auto;
z-index:20;
}
#navwrap {
display:table; /* ignored by IE */
padding:0;
list-style-type:none;
white-space:nowrap; /* keep text on one line */ }

* html #navwrap {
display:inline-block; /* for IE only */
width:1px; /* IE will expand to fit navigation width */ padding:0 2px; /* fix bug in IE for border spacing */ } #navwrap li { display:table-cell; /* ignored by IE */ }
* html #navwrap li {
display:inline; /* for IE only */
}
#navwrap a, #navwrap a:visited {
display:block; /* for all browsers except IE */ padding:0 .7em; font-size:0.8em; text-transform:uppercase; border-right:1px solid #ffffff; /* add a 1px white border to the right of items */ text-decoration:none;
margin-bottom: -1px;
}
* html #navwrap a, * html #navwrap a:visited { display:inline-block; /* for IE only */ margin:0 -2px; /* to correct an IE border width bug */ }

.lefted {margin:0 auto 0 0;}
.centered {margin:0 auto;}
.righted {margin:0 0 0 auto;}

}

* html #navigation a {width:1%;} /* see http://www.positioniseverything.net/explorer/escape-floats.html */

#navwrap {
text-align: center;
margin: 0em auto;
/*width:800px;
border-left: 1px solid #ffffff;
padding-left:20px;

the above pseudo centers the nav. not really cause the width is inaccurate*/

Tried changing that 'Display:table' to 'display:inline' but no joy. If you'd like LadynRed (and of course if you have the time) I could send you the whole CSS file and maybe you could have a look at it? Anyway, thanks for the help up to this point.

The *html hack WILL NOT work in IE 7, it's a plain as that. Most hacks used to put IE 6 and below in line will not work in IE 7. You are going to have to use conditional comments to target the lower versions and use a separate CSS file that contains ONLY those 'hacks' needed.

Except for some new bugs, IE 7 doesn't need those old hacks anyway. It appears to me that your list and your layout isn't structured correctly yet.

For a comprehensive collection of menus together with tutorials have a look at http://www.cssplay.co.uk/menus/tutorial.html . You will also find lots of useful CSS related items here.