#main-menu {
/* We are using a PNG for shadows. Fix this for IE6 */
background: url(images/menu-bg.png) no-repeat;
/* Using relative position to include the shadow */
position: relative;
/* Using relative position to include the shadow */
left: -12px;
width: 778px;
height: 60px;
}
#main-menu ul {
margin: 0;
padding: 7px 0 0 21px;
clear: both;
}
#main-menu li {
display: inline;
margin: 0 0 0 1px;
}
#main-menu li.selected a {
/* For current selected item */
color: #333;
font-weight: bold;
line-height: 36px;
/* So that we don't need to include uppercase letters in source. */
text-transform: uppercase;
text-decoration: none;
display: block;
float: left;
width: 121px;
height: 53px;
text-align: center;
background: url(images/menu-item-bg-selected.gif) no-repeat;
}
#main-menu li.not-selected a {
color: #333;
font-weight: bold;
line-height: 36px;
/* So that we don't need to include uppercase letters in source. */
text-transform: uppercase;
text-decoration: none;
display: block;
float: left;
width: 121px;
height: 53px;
text-align: center;
background: url(images/menu-item-bg.gif) no-repeat;
}
Menyn funkar jättebra överallt, men bakgrunden i #main-menu är en transparent png bild, därför har jag använt mig av TwinHelix IEPngFix (http://www.twinhelix.com/css/iepngfix/demo/).
Men, i samband med att bakgrunden blir transparent i IE, så slutar menyn att fungera helt och hållet. Precis som att det inte "finns" några länkar.
Har testat två olika sätt med transparenta PNG's i IE6, men med samma resultat. Det är dels den jag länkar till ovan och dels jQuery, som är ett javascript library med massa fina funktioner.
Någon som har några tankar kring det här, vill verkligen lösa det, tack!
Då blir PNG'n transparent, men fortf. samma problem med att länkarna "försvinner".
Kan det vara så att PNG'n lägger sig ovanför min <ul> på något sjukt sätt?