css: Display:inline-table - IE problem

[Olavxxx]

Hi,

I made this Horizontal menu, based on CSS.
Below the menu elements, there should appear an arrow, pointing at the elements, on HOVER.

I dont want it to be based on Javascript, as for me, javascript is the devil!

Here is my code:

.yo a { 
display:block;
width: 100px; 
height: 50px;

padding-left:2px;
padding-right:2px;
	
background: transparent url(images/arr.gif) no-repeat;
background-position: 50% +200px;
text-align:center;

} 

div{
   display: inline-table; 
}

.yo a:hover { 
background-position: 50% +20px;

}

<div id="menu_">
    <div class="yo"><a href="">Lorem</a></div>
	<div class="yo"><a href="">Ipsum</a></div>
	<div class="yo"><a href="">Dolor</a></div>
	<div class="yo"><a href="">Sitmer</a></div> 
	<div class="yo"><a href="">Utstatico</a></div>
	<div class="yo"><a href="">Ialalancol</a></div>
	</div>

how it works (in Opera atleast):
The image is on default, specified outside of the "box", that contains the hyperlink.

When Hovering the hyperlink, the image (background) is then moved back into the hyperlink "box".

It works perfect in Opera, but in IE, there is a problem with the inline-table display property of CSS.

eg. in IE, it displays not horizontal!

Does anyone know of a workaround for IE?

 

[Olavxxx]

Ah, I already figured it out now, by an accident!

The workaround:
float: left;

.yo a { 
display:block;
width: 100px; 
height: 50px;

padding-left:2px;
padding-right:2px;
	
background: transparent url(images/arr.gif) no-repeat;
background-position: 50% +200px;
text-align:center;
float:left;
}

I hope this will help people in the future, as it was not very easy to find on google, amongst alot of other crappy examples.

Olav Alexander Mjelde

http://www.volvo-power.net

Admin & Webmaster