IE6/7 bildeproblemer. Bg presses sammen i div.

[Sono Juventino]

Holder for tiden på å kode opp min siste skisse. Har nå støtt på et problem i IE6/7 som jeg ikke aner hva kommer av.

 

Problemet:

Problemet er at et bakgrunnsbilde presses sammen i en div på 42px i høyden, selv om bildet egentlig er 84px. Dette skjer bare i Internett explorer og burde egentlig ikke skje siden bildet legges på ved css og background: url(''...osv.

 

Teknisk:

Bildet virker som active. Den øvre delen er bare synlig før linken (bildet med contact-info) trykkes, men den andre delen er synlig når linken (bildet) er "active", altså trykket.

 

Koden:

Koden kan sees her i sin helhet: - http://2dropsdesign.com/jQuery/#

 

html:
<div id="panel">
	<p>[email protected]</p>
	<p>+47 901 701 42</p>
</div>
<a href="#" class="slide">Contact information</a>

Css:
#panel {
max-height: 50px;
font-size: 1.3em;
font: bold 120%/120% Arial, Helvetica, sans-serif;
color: white;
height: 100%;
float: right;
width: 180px;
display: none;
padding: 50px 0 0 15px;
line-height: 1.8em;
overflow: hidden;
}

.slide {
background: url('layout/contact.png') no-repeat top left;
position: absolute;
top: 0;
right: 5px;
display: inline;
border: 0;
width: 185px;
height: 42px;
text-indent: -9999px;
}

.active {
background-position: bottom left;
}

/* Merk at header bare er nødvendig for position:relative; */
div#header {
background: url('layout/header.gif') repeat-x center left; 
width: 865px;
height: 100px;
position: relative;
}

 

Er det noen som har støtt på dette problemet før? Har prøvd å gjøre det samme med venstre/høyre også, men var helt likt. Ting funker perfekt i Firefox og Opera etter hva jeg har forstått.

[mikk-]

Jeg har ikke tid til å teste noe, men jeg ville tippet at problemet ditt ligger i display: inline; på .slide. A-elementet er uansett inline fra før, så du bør vel sette det til å være blokk-element, altså display: block;. Teoretisk skal det vel ikke ha noe med bakgrunnen å gjøre, men man vet aldri med IE. =)

[Haraldson]

Det eneste jeg kan tenke meg, er at du bruker en png-fix med IEs proprietære filter-egenskap som skalerer bildet...

[Sono Juventino]

Det stemmer faktisk, Harldson. Byttet til .gif og da fungerte sannelig alt med en gang.

 

Nå viser det seg at selve sliden også funker dårlig i IE6, så jeg tar rett og slett å fjerner hele greie for IE6-brukere med noen !Importants. Noen som kan fortelle meg om det finnes andre nettlesere som vil skippe !important og gå rett op andre linje?