Hi all,
I am troubleshooting a site which uses a horizontal list for a menu:
http://www.beautifulillusions.co.uk/2013/index.htm
It all works fine on Safari/Chrome and IE8+ but I can’t get to work horizontally on IE7… I have tried various fixes and other css tricks to make it work but no joy… it currently displays as a range right vertical menu on IE7.
HTML as follows:
CSS as follows:
#menu{
margin: 37px 10px 10px 0px;
list-style: none;
clear: none;
text-align: right;
padding: 0;
display:inline;
}
#menu li{
font-family: Josefinsans, Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: normal;
text-transform: uppercase;
line-height:100%;
list-style:none;
display:inline;
white-space: nowrap;
float:left;
margin:0;
}
* html #menu li{
display: inline;
}
* + html #menu li{ display:inline; width:650px;
} /* for IE 7 */
#menu li a{
color:#FFFFFF;
text-decoration: none;
padding: 12px 0px 0px 15px;
float:right;
}
#menu li a:hover{
color:#DED4E9;
}
Any help greatly appreciated – as am very stuck, Thanks