PNG fix ie6

4 svar · 534 visningar · startad av alioooop 20 apr. 2009

alioooopMedlem sedan feb. 2008120 inlägg

Frågan20 apr. 2009 10:38#1

hej =) det är så att jag letar och letar efter en bra pngfix för att lösa problemet med genomskinliga png filer i ie6 men alla jag hittar har negativa sidor som förstör sidan.

antingen så försvinner mergen ovanför sidan för att skjuta ner en div eller så skjuts bakgrundsbilder ner 5-6 pixlar eller så positioneras bilden helt fel.

är det någon som kan en png fix som gör det den ska och den ska gå användas på bakgrunder både i body och divvar och bakgrunder på <a> länkar osv :) och att inga css inställningar ändras på sidan och får det att se annars ut. dvs det enda den ska påverka är bakgrunden på bilden!

MVH Alioooop

voigtann1Medlem sedan juni 20019 519 inlägg

20 apr. 2009 11:12#2

Använder: http://www.dillerdesign.com/experiment/DD_belatedPNG/ fungera perfekt på alla png fixar jag har testat.

alioooopMedlem sedan feb. 2008120 inlägg

20 apr. 2009 13:10#3

okej den är den med minst problem för mig, bakgrunderna på href flyttas ner lite :P åtminstone för mig

voigtann1Medlem sedan juni 20019 519 inlägg

20 apr. 2009 13:26#4

hur ser din CSS ut egentligen då? Det blir lite lättare att felsöka kod som gör fel om man ser vad det är för kod ;)

alioooopMedlem sedan feb. 2008120 inlägg

20 apr. 2009 16:23#5

min css ser ut så här:

#menuwrapper {
width: 600px;
height: 31px;
background-repeat:repeat-x;
background-image:
url('images/menubackground.png')
}
#menu {
cursor: hand;
}
#menu a{ 
cursor: hand;
display:block;
width: 120px; 
height: 23px;
color: #646464;
text-decoration: none;
background-image:
url('images/button_unmarked.png');
background-repeat: no-repeat;
}
#menu a:hover{ 
color: #ffffff;
background-image:
url('images/button_marked.png');
}
body.sida11 #menu a.ett,
body.sida12 #menu a.tve,
body.sida13 #menu a.tre ,
body.sida21 #menu a.ett,
body.sida22 #menu a.tva,
body.sida23 #menu a.tre,
body.sida31 #menu a.ett,
body.sida32 #menu a.tva,
body.sida33 #menu a.tre,
body.sida41 #menu a.ett,
body.sida42 #menu a.tva,
body.sida43 #menu a.tre {
display:block;
width: 120px; 
height: 23px;
color: #ffffff;
background-image:
url('images/button_marked.png');
background-repeat: no-repeat;
}
#menutext{
display:block;
float: right;
text-align: left;
margin: 0px 0px 0px 0px;
width: 97px; 
height: 23px;
font-size: 14px;
cursor: hand;
position: relative;
top: 4px;
}
#menuicon{
display:block;
float: left;
margin: 0px 0px 0px 0px;
width: 23px; 
height: 23px;
cursor: hand;
background-repeat:no-repeat;
background-position:center; 
}

<div id="menu"> 
<a href="" class="ett">
<div id="menuicon" style="background-image:url('images/my_albums_logo.png');"></div><div id="menutext"><font face="Calibri"><b>My albums</b></font></div>
</a>
</div>

och varje knapp ser ut sådär :P
och det måste vara något med png fixen för så fort jag kör fixen på just det där så blir det förskjutet men inte om jag kör utan och bilderna har en sån där ful grå yta runt :S