[SOLVED] Troubleshooting CSS

[tazinlwfl]

I'm building a new site - a redo of our current site
I have approval from the boss to go ahead with making the switch, but after doing some further clean-up, I've run into a problem.

http://www.nefcoinnovations.com/beta/home9.html
on this page, I've been playing with the Navigation and "New Web Features" (NWF) sections, trying to get them centered on the div
I got it
but...
on the NWF section, I was no longer able to include the text with the image in the <a> tag, because of the "display:inline" change I made to center the horizontal <ul> I'm using. The text was showing up beside the image rather than below. So I split them up. I put the text in a <div> below, made another <ul> which contained <span>s spaced the same way as the images above.
At this point everything was working great... in everything but IE

I'm using "display:inline-block" to line them up horizontally, and since THAT doesn't work right in IE, I used the workaround:

<!--[if IE]>
<style>
.web_feat_titles span {
	zoom: 1;
}
</style>
<![endif]-->
<!--[if lt IE 5.5000]>
<style>
.web_feat_titles span {
	height: 0;
	vertical-align: bottom;
}
</style>
<![endif]-->

I think this may be the problem
if you look at the page on IE, everything works fine
look at it in Firefox, Chrome, Safari, etc and the image highlight effect doesn't work as designed.

I removed the code, removed the new div completely, and played with the CSS and HTML a bit more and I cannot undo it! I cannot find the culprit...

I'm still in the process of cleaning up the code before I switch over to the live site, but can someone take a look at this problem for me? I really want to make sure this works as designed in all major browsers.

Also
I'm trying to use HTML 4.01 Strict, so w/e fix you offer, I need it to validate properly... :-)

[tazinlwfl]

I needed to edit
I'm finishing up the site, and moved home9.html to index.html
so you can just go to http://www.nefcoinnovations.com/beta

[tazinlwfl]

Edit:
I keep coming up with things that could be the problem... (but I can't edit the previous posts)

I've played with the CSS and noticed that it seems to be the only highlighting the text - but theres no text there...
if I adjust the font height, it makes the highlight larger...

so the question seems to be now:
How do I make sure the image highlights, and not JUST the "text" (that isnt actually there)?

[tazinlwfl]

OKAY!!!
I figured it out
I knew it had to do with the "display:block" --> "display:inline"
switched it to display:inline-block
I though it wouldn't work in IE, but it does...

edit: Here's my final code

/***********************************************/
/* new web features                            */
/***********************************************/
		#nwf_container {
	background-image: url('images/gradient.jpg');
	background-repeat:repeat-y;
	background-position:center;
	width:100%;
	height: 230px;
}

		#feat_header {
	background-image:url('images/nwf_shadow1.png');
	background-position: center;
	background-repeat:no-repeat;
	text-align:center;
	width:100%;
	margin:0px;
	padding:5px 0px 5px 0px;
	height: 30px;
	font: 1.5em "Trebuchet MS";
	color: #166671;	
}

		#features {
	margin-right:auto;
	margin-left:auto;
	width:100%;
	height:160px;
	padding:0px 0px 2px 0px;
	text-align:center;
	font: 1.375em "Trebuchet MS";
	color: #166671;	
}
		#feat_foot {
	background-image:url('images/nwf_shadow2.png');
	background-position: center;
	background-repeat:no-repeat;
	text-align:center;
	width:100%;
	height: 30px;
	margin:0px;
	padding:0px 0px 0px 0px;
	font: 1.25em "Trebuchet MS";
	color: #166671;	
}

		#features a{
	display:inline-block; /* this was the problem - made it inline-block  */
	border-width:1px;
	border-style:solid;
	border-color:transparent;
	color:#166671;
	margin:3px 0px 3px 0px;
	padding:3px 3px 3px 3px;
	background:none;
	font: 1em "Trebuchet MS";
	color: #166671;	
	text-decoration:none;
}

		#features a:hover{
	color:#fff;
	background-color:#166671;
	border-color: #fff;
}

		#features a:active{
	color:#166671;
	background-color: #fff;
	border-color:#166671;
}

		#features ul, #feat_foot ul{
	display:inline;  /* got to keep this as inline */
	list-style:none;
	margin: 5px 0px 5px 0px;
	padding: 2px 0px 2px 0px;
}

		#features li, #feat_foot li{
	display: inline; /* got to keep this as inline */
	background-image: none;
	margin: 0;
	padding: 2px 0px 2px 0px;
}

		.web_feat_titles{
	width:164px;
	padding:0px 10px 0px 10px;
	display:inline-block;
}