display:inline IE vs everyone else

[jcanker]

I'm trying to create a horizontal menu using li and display:inline. I have two issues:

1)  It basically appears as expected (see #2 for the exception) in IE 8, but in Opera/Firefox/Chrome it just appears as a vertical list, centered on the page.

2) I'd like the text to be centered vertically, but text-alignment doesn't change anything, regardless of what value I put there.  It just stays at the top of the line. 

 

This code is currently live at http://www.ankertechnicalservices.com/test  NOTE: The code referenced here will only work for browsers with javascript disabled. 

 

Here's the relevant html

<!-- This DIV is the menu for non-javascript enabled browsers; it should not appear for js-enabled browsers-->
<div id="showIfNoJSMenu" class="showIfNoJS" >
	<div class="menuLine" >
	<ul>
		<li><p><a href="virus.htm">Virus Removal</a></p></li>
		<li><p><a href="repair.htm">Repair & Upgrades</a></p></li>
		<li><p><a href="remote.htm">Remote Assistance</a></p></li>
		<li><p><a href="wireless.htm">Wireless</a></p></li>
		<li><p><a href="dr.htm">Data Recovery</a></p></li>
		<li><p><a href="smb.htm">Small & Med Business</a></p></li>
		<li><p><a href="confidentiality.htm">Confidentiality</a></p></li>
		<li><p><a href="network.htm">Network Design & Admin</a></p></li>
		<li><p><a href="virtualization.htm">Virtualization</a></p></li>
		<li><p><a href="loaner.htm">Standby Equipment</a></p></li>
		<li><p><a href="videography.htm">Videography</a></p></li>

	</ul>
	</div>


</div>

 

And here is the css:

 

.menuLine ul li{
display: inline;
background-image: url('img/blkMenuButton135x48.png');
background-position: center center;
background-repeat:  no-repeat ; 
width: 140px;
height: 54px;
text-align: center ;

}
.menuLine ul li a{
text-align: center ;
color:silver;
text-decoration: none ;	
}

[jcanker]

Okay, I solved the vertical spacing issue by replacing the vertical-align with padding-top:13%

It's still not displaying as intended in non-IE browsers, however.  Help?

[phpfreak]

grumbles at IE

[Pikachu2000]

You have no <!DOCTYPE declaration, along with 16 other html validation errors, and 10 CSS validation errors.

[jcanker]

Most of those css errors refer to a different CSS sheet that accompanies the javascript plugin which isn't used in this instance because, well, this is a non-javascript enabled degradation menu that's being worked on.  Resolved the other non-ContentFlow css issues by just deleting them from the html; they were in-line references that were placed in the banner DIV for testing something.

 

I added the doctype et al, and now at least IE is displaying it the same as the other browsers.

So now the question: Why isn't this displaying horizontally with the background images?

[jcanker]

Okay...problem solved, I guess.

 

I changed the CSS to be

position:relative
float:left

and now they all line up horizontally and use the background image as intended.