PIE.htc

[Verwijderd]

Beste medetweakers,

Ik heb een menu opgebouwd waarbij de li's een "divider" hebben. Het li element heeft hiervoor een multiple background property die doormiddel van PIE opgevangen wordt om zo ook in Internet Explorer 7 en 8 goed te functioneren. Echter werkt het deze keer niet en is de divider vanaf IE8 niet meer zichtbaar in het menu.

Screenshot IE9:


Screenshot IE7:


CSS:

code:

#menu{
    width:1148px;
    top:32px;
    position:relative;
    float:left;
}

.horizontalmenu ul.menu{
    height:43px;
    width:1148px;
    background:url(../images/menu-bg.png) repeat-x;
    float:left;
    position:relative;
    z-index:200000;
}

.horizontalmenu ul.menu li{  
    position:relative;
    background: url(../images/menu-divider.png) right no-repeat,
                url(../images/menu-divider.png) left no-repeat;
    height:43px;
    margin-right:-2px;
    float:left;
    padding-left:2px;       
}

.horizontalmenu ul.menu li.first{
    background: url(../images/menu-divider.png) left no-repeat;
}

.horizontalmenu ul.menu li.last{
    padding-right:2px;
}

.horizontalmenu ul.menu li a{
    padding:0 24px 0 24px;  
    display:block;
    font:normal 16px/43px 'Open Sans', Verdana, Geneva, sans-serif;
    color:#fff;
    text-decoration:none;
    float:left;
    position:relative;
    height:43px;
    -moz-transition:0.2s ease-in-out; /* Firefox 4 */
    -webkit-transition:0.2s ease-in-out; /* Safari and Chrome */
    -o-transition:0.2s ease-in-out; /* Opera */
    transition:0.2s ease-in-out;        
}

.horizontalmenu ul.menu li a:hover{
    background:#1b337d;
    -moz-transition:0.2s ease-in-out; /* Firefox 4 */
    -webkit-transition:0.2s ease-in-out; /* Safari and Chrome */
    -o-transition:0.2s ease-in-out; /* Opera */
    transition:0.2s ease-in-out;        
}

De PIE implementatie is wel correct geïmplementeerd aangezien IE7 en 8 wel de PIE classes meekrijgen van het PIE bestand.

Hopelijk iemand met suggesties, alvast bedankt!

[Barryvdh]

Je moet dan toch nog de volgende regel toevoegen voor de stijlen die PIE.htc gebruiken?
behavior: url(path/to/PIE.htc);

[Verwijderd]

Bedankt voor je reactie Barry, ja heb de regel toegevoegd. Staat in een ander CSS bestand genaamd "ie.css" die er als volgt uit ziet.

Dat CSS bestand wordt aangeroepen in HTML

code:

    <!--[if lt IE 9]>
        <link href="css/ie.css" rel="stylesheet" type="text/css" />
        <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

De CSS voor PIE ziet er zo uit:

code:

.horizontalmenu ul.menu li{  
    behavior: url(css/PIE.htc); 
    position:relative;
    -pie-background:    url(../images/menu-divider.png) right no-repeat,
                        url(../images/menu-divider.png) left no-repeat;
    height:43px;
    margin-right:-2px;
    float:left;
    padding-left:2px;
}

[Verwijderd]

Hij pakt het PIE bestand ook wel op in IE7, 8:

[Barryvdh]

Kan je dat niet makkelijker gewoon met een border doen?

[xh3adshotx]

Cascading Stylesheet:

.horizontalmenu ul.menu li{  
    position:relative;
    -pie-background:    url(../images/menu-divider.png) right no-repeat,
                        url(../images/menu-divider.png) left no-repeat;
    height:43px;
    margin-right:-2px;
    float:left;
    padding-left:2px;
    behavior: url(css/PIE.htc);    
}

Probeer het eens met de behavior onderaan de CSS class.

[Verwijderd]

Bedankt voor de reacties,

Probleem is inmiddels verholpen. De PIE css moest een absolute url hebben van de betreffende divider images