PNG transparency on IE 6.0

[lollypop]

Καλησπέρα σας. Σε συνέχεια του πειραματισμού μου με full css design έρχεται η ώρα του compatibility.

To template που έχω φτιάξει είναι γεμάτο απο png transparent αρχεία με αποτέλεσμα να χρησιμοποιήσω το iepngfix.htc. για να δείχνει OK σε IE 6.0. Και έρχομαι στο αναπάντεχο πρόβλημα. Το fix αυτό σπάει τα links που υπάρχουν μέσα στο div, ακόμα και όταν είναι Inner Και όχι αυτό καθε αυτό. Δηλαδή δείχνει σαν να μπερδευεί την σειρά ( Ζ-index) των div ή την θέση τους ( absolute,relative ) με αποτέλεσμα να απενεργοποιούνται τα links. Ακόμα και αν φτιάξω το Z-index, και δεν γενικεύσω το fix να πιάνει όλα τα div αλλά μόνο το συγκεκριμένο ( #menu), το πρόβλημα δυστυχώς παραμένει.

Έχει τύχει σε κανέναν αυτό; Εσείς ποια λύση χρησιμοποιείτε για τα png σε IE ?

Κώδικας: Επιλογή όλων

<div id="menu">
<div id="menuitems">
  <ul>
    <li><a href="index.php">Home</a></li><li><a href="engineering-energy.php?id=1&apid=0&lang=en">Profile</a></li><li><a href="engineering-energy.php?id=2&apid=0&lang=en">Services</a></li><li><a href="engineering-energy.php?id=10&apid=0&lang=en">Projects</a></li><li class="portokali"><a href="engineering-energy.php?id=11&apid=0&lang=en"><font color="#FF9900">Photo Gallery</font></a></li><li><a href="engineering-energy.php?id=12&apid=0&lang=en">Our News</a></li><li><a href="engineering-energy.php?id=14&apid=0&lang=en">Carreer</a></li><li><a href="engineering-energy.php?id=13&apid=0&lang=en">Contact Us</a></li>  </ul>
  </div>
</div>

[LNinio]

Εφαρμόζεις κάποιο css για το div που θέλεις το png transparency (σίγουρα χρησιμοποιείς);
Δοκίμασε να του δώσεις

Κώδικας: Επιλογή όλων

position: absolute;
z-index: 0;


[lollypop]

Αυτό διαβάζω τώρα ότι κάτι έχει να κάνει με το positioning. Κάνω δοκιμές αλλά μέχρι στιγμής δεν βλέπω φώς.

Θα το βρω που θα πάει.

[LNinio]

Να υποθέσω οτι τα υπόλοιπα γίνονται σωστά όσον αφορά την εφαρμογή του .htc τον ορισμό του blank.gif αρχείου κλπ κλπ!!!
Αν το κάνεις σε κάποια άλλη φωτογραφία με link (εκτός του div menu) εφαρμόζεται το trans χωρίς πρόβλημα;

[lollypop]

Ναι κανένα πρόβλημα. Εχω Ενα image όπου έχει link και λειτουργεί κανονικά.
Επίσης μέσα στο ίδιο div που έχω αυτό το image έγραψα απλό κείμενο και το έκανα Link ( μπας και δουλευε σωστά το rule gia ta img tag) και επίσης δούλευε.

Αρα κάτι το χαλάει στην λογική div μέσα σε div να υποθέσω... Παρόλα αυτά όλα ειναι absolute kai relative... θα τρελαθώ τελείως βραδιάτικο.[/i]

[lollypop]

Και αυτό είναι αντίστοιχα το css

Κώδικας: Επιλογή όλων

#menu {
   background-image: url(menu.png);
   height: 244px;
   width: 210px;
   z-index: 60;
   position: absolute;
   top: 75px;
   left: 34px;
   background-repeat: no-repeat;
}
#menuitems {
   padding-top: 5px;
   z-index: 300;
   position:relative;

}


#menuitems ul{
   margin: 0px;
   list-style-type: none;
   padding-top: 0px;
   padding-right: 0px;
   padding-bottom: 0px;
   padding-left: 0px;
   display: block;
   z-index: 300;

}
#menuitems li{

   background-image: url(menu-button.gif);
   display: block;
   background-repeat: no-repeat;
   padding-right: 0px;
   padding-bottom: 0px;
   padding-left: 10px;
   height: 18px;
   margin-left: 25px;
   margin-top: 10px;
   margin-bottom: 10px;
   z-index: 300;

}
#menuitems a:link, #menuitems a:visited  {
   text-decoration: none;
   color: #000;
   position:relative;
}

[LNinio]

Στο css δεν βλέπω κάπου να ορίζεις πως να συμπεριφέρονται τα img!!!

πχ δοκίμασε να βάλεις κάτι όπως το

Κώδικας: Επιλογή όλων

div#menu img {
   width: 400px;
   height: 300px;
   behavior: url("iepngfix.htc")
}



προσαρμόζοντας βέβαια τα κατάλληλα μεγέθη

[lollypop]

Το έχω βάλει στο head αυτό με το ίδιο το κάλεσμα του φιξ

Κώδικας: Επιλογή όλων

<!--[if lte IE 6]><style type="text/css">
img,div{ behavior: url(iepngfix.htc) }
</style>
<link href="template/style6.css" rel="stylesheet" type="text/css" />
<![endif]-->

Εχω κουφαθεί. Τα μεταφέρω σε άλλο αρχείο και παίζει, οπότε σίγουρα καποιο μπέρδεμα γίνεται με τα 150 div σε αυτό το αρχείο. Θα το κοιτάξω αύριο με ηρεμία γιατί τώρα δεν το έχω!

Ευχαριστώ θερμά για την βοήθεια σου

[LNinio]

Και εγω αυτο πιστεύω εν τέλει, αφού όλα τα άλλα είναι φυσιολογικά.
Κάτι πρέπει να το "ενοχλεί" με τα divs.
Θα την βρεις την άκρη πιστεύω.

Καλή ξεκούραση

[El Panos]

Είναι υποχρεωτικό να βάλεις το png σαν background; Αφού δεν του κάνεις επανάληψη, μήπως θα ήταν καλύτερα να το αφήσεις απλά σαν object; Καμιά φορά οι πιο αλπές λύσεις, είναι και οι πιο πρακτικές.

Απλά μια ιδέα είπα....

[psilos]

Ρίξε μια ματιά εδώ... http://www.vcdc.gr/forum/viewtopic.php?t=11517&highlight=png+transparent

Μάλλον θα λύσει αυτό και πολλά ακόμη προβλήματα σου...

[LNinio]

Μπα μπα μπα, τι λες ψηλέ μου!!!
Δεν είχε πέσει στην αντίληψή του το παρόν scriptάκι!!!

[lollypop]

Αν θέλετε κάτι καλύτερο απο Suduko δοκιμάστε το!

Εγώ πάντως σηκώνω τα χέρια ψηλά.

http://www.lollypop.gr/taneuramou/test2.php

P.S.: Ωραίο το σκριπτάκι, λύνει άλλα προβλήματα

[psilos]

Μπα μπα μπα, τι λες ψηλέ μου!!!
Δεν είχε πέσει στην αντίληψή του το παρόν scriptάκι!!!

P.S.: Ωραίο το σκριπτάκι, λύνει άλλα προβλήματα

Ελπίζω τουλάχιστον να φανεί χρήσιμο κάπως...

[lollypop]

Η μόνη λύση που βρήκα όταν το DIV πρέπει να είναι absolute, είναι το PNG να μην ειναι background image αλλά να εισάγεται κανονικά η εικόνα και από πάνω του το κείμενο σε Inner DIV επίσης με Absolute positioning.

Αυτό ως λύση. δεν το ενοχλεί λειτουργικά και εικαστικά δεν αλλάζει απολύτως τίποτα.

[jonick33]

Mόλις εντόπισα και άλλο scriptάκι png fix, χωρίς να το έχω δοκιμάσει όμως...

http://labs.unitinteractive.com/unitpngfix.php