lost in translation IE7->IE6

[maileen]

Hi,

I've a little JS/CSS menu in my web application that works the same under IE7 and Firefox 1.5 or 2 or even 3.x.

However it does not work well under IE6 and i suppose that CSS 2 standard in IE6 is the cause but i would like to know how can i solve this issue.

I attached to this post a small picture to show you the problem.

My CSS code is split in 2 CSS (visual and layout) it makes easier the code to maintain later on.

So here is the CSS code from visual.css file :

/******************************
* Menu
******************************/
.menu_content1, .menu_content2, .menu_content3, .menu_content4
{
/*background-color : #f4b907;*/
color : #FFFFFF;
font-family : sans-serif;
font-size : 12px;
font-weight : bold;
cursor : pointer;
}
.submenu
{
border-width : 1px;
border-color : #0066cc; /*54a14c*/
border-style : solid;
font-size : 11px;
/*font-weight : bold;*/
color : #0;
background-color: #fafafa; /*#c6e2fd*/; /*d5fade*/
}
.iconbar
{
background-color : #e9eeee; /*#4d6180*/; /*e1e9f5*/ /*e9f5ef*/
border-right-style : solid;
border-right-width : 1px;
/* border-right-width : 1px;*/
border-right-color : #a0b9dd; /*a1e0bd*/
}
.menuitems a,
.menuitems a:active,
.menuitems a:visited,
.menuitems a:link
{
text-decoration : none;
color : #000000;
display : block;
font-family : sans-serif;
font-size : 11px;
}
.menuitems a:hover
{
background-color : #fff0c1; /*#fce7ae*/; /*#abbedb;*/ /*add9a8*/
border-width : 1px;
border-style : solid;
border-color : #ff9000;/*#05367f;*/ /*047d24*/
/*add9a8*/
}
.imgitem
{
text-decoration : none;
/*font-family : verdana;
font-size : 8pt;*/
vertical-align : middle;
border : none;
/*padding : 0px 5px 0px 5px;*/
cursor : pointer;
}

and here is my code from layout.css :

/************************
* Menu
************************/
.menu_content1, .menu_content2, .menu_content3, .menu_content4
{
float : left;
display : inline;
width : 120px;
height : 21px;
margin-top : 4px;
/*padding : 4px 0px -4px 0px;*/
/*background-color:#FF00FF;*/
text-align : center;
}
.submenu
{
position : absolute;
float : left;
top : 95px;
width:118px;
}
.iconbar
{
float : left;
display : inline;
width : 25px;
height : 100%;
}
.menuitems
{
float : left;
display : inline;
width : 100px;
margin-left : 25px;
}
.menuitems ul
{
padding: 0;
margin: 0;
list-style: none;

}
.menuitems li
{
float : left;
display : inline;
height : 28px;
width : 118px;
margin-left : -25px;
}
.menuitems a,
.menuitems a:active,
.menuitems a:visited,
.menuitems a:link
{
padding : 0px 0px 0px 4px;
border-style : none;
border-width : 0px;
vertical-align:middle;
line-height:28px;
}
.menuitems a:hover
{
margin : 2px 2px 2px 3px;
padding : 0px 0px 0px 0px;
line-height : 22px;
}
.menuitems img
{
margin : 0px 10px 2px 2px;
}

thanks a lot for any help.

Maileen