PNG transparency on IE 6.0

Θέματα web + mobile design, development & cyberculture.

PNG transparency on IE 6.0

Δημοσίευσηαπό lollypop » 04.07.08, 7:29 pm

Καλησπέρα σας. Σε συνέχεια του πειραματισμού μου με 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>
May the Force be With you
Άβαταρ μέλους
lollypop
Member
 
Posts: 106
Εγγραφή: 20.12.07, 4:13 am
Τοποθεσία: Πειραιάς

Δημοσίευσηαπό LNinio » 04.07.08, 7:50 pm

Εφαρμόζεις κάποιο css για το div που θέλεις το png transparency (σίγουρα χρησιμοποιείς);
Δοκίμασε να του δώσεις
Κώδικας: Επιλογή όλων
position: absolute;
z-index: 0;
Άβαταρ μέλους
LNinio
Old Member
 
Posts: 1333
Εγγραφή: 03.04.06, 1:32 pm
Τοποθεσία: Area 52

Δημοσίευσηαπό lollypop » 04.07.08, 8:01 pm

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

Θα το βρω που θα πάει.
May the Force be With you
Άβαταρ μέλους
lollypop
Member
 
Posts: 106
Εγγραφή: 20.12.07, 4:13 am
Τοποθεσία: Πειραιάς

Δημοσίευσηαπό LNinio » 04.07.08, 8:04 pm

Να υποθέσω οτι τα υπόλοιπα γίνονται σωστά όσον αφορά την εφαρμογή του .htc τον ορισμό του blank.gif αρχείου κλπ κλπ!!!
Αν το κάνεις σε κάποια άλλη φωτογραφία με link (εκτός του div menu) εφαρμόζεται το trans χωρίς πρόβλημα;
Άβαταρ μέλους
LNinio
Old Member
 
Posts: 1333
Εγγραφή: 03.04.06, 1:32 pm
Τοποθεσία: Area 52

Δημοσίευσηαπό lollypop » 04.07.08, 8:16 pm

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

Αρα κάτι το χαλάει στην λογική div μέσα σε div να υποθέσω... Παρόλα αυτά όλα ειναι absolute kai relative... θα τρελαθώ τελείως βραδιάτικο.[/i]
May the Force be With you
Άβαταρ μέλους
lollypop
Member
 
Posts: 106
Εγγραφή: 20.12.07, 4:13 am
Τοποθεσία: Πειραιάς

Δημοσίευσηαπό lollypop » 04.07.08, 8:30 pm

Και αυτό είναι αντίστοιχα το 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;
}
May the Force be With you
Άβαταρ μέλους
lollypop
Member
 
Posts: 106
Εγγραφή: 20.12.07, 4:13 am
Τοποθεσία: Πειραιάς

Δημοσίευσηαπό LNinio » 04.07.08, 9:05 pm

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

πχ δοκίμασε να βάλεις κάτι όπως το
Κώδικας: Επιλογή όλων
div#menu img {
   width: 400px;
   height: 300px;
   behavior: url("iepngfix.htc")
}


προσαρμόζοντας βέβαια τα κατάλληλα μεγέθη
Άβαταρ μέλους
LNinio
Old Member
 
Posts: 1333
Εγγραφή: 03.04.06, 1:32 pm
Τοποθεσία: Area 52

Δημοσίευσηαπό lollypop » 04.07.08, 9:14 pm

Το έχω βάλει στο 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 σε αυτό το αρχείο. Θα το κοιτάξω αύριο με ηρεμία γιατί τώρα δεν το έχω!

Ευχαριστώ θερμά για την βοήθεια σου :D
May the Force be With you
Άβαταρ μέλους
lollypop
Member
 
Posts: 106
Εγγραφή: 20.12.07, 4:13 am
Τοποθεσία: Πειραιάς

Δημοσίευσηαπό LNinio » 04.07.08, 9:17 pm

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

Καλή ξεκούραση
Άβαταρ μέλους
LNinio
Old Member
 
Posts: 1333
Εγγραφή: 03.04.06, 1:32 pm
Τοποθεσία: Area 52

Δημοσίευσηαπό El Panos » 05.07.08, 6:01 pm

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

Απλά μια ιδέα είπα....
El Panos
Old Member
 
Posts: 1045
Εγγραφή: 27.06.08, 6:24 am
Τοποθεσία: Πίσω από ένα ViewSonic VA2216w

Δημοσίευσηαπό psilos » 05.07.08, 11:04 pm

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

Μάλλον θα λύσει αυτό και πολλά ακόμη προβλήματα σου...
Konstantinos Papalias - Web Developer
Άβαταρ μέλους
psilos
Junior Member
 
Posts: 317
Εγγραφή: 05.01.07, 1:42 pm
Τοποθεσία: London

Δημοσίευσηαπό LNinio » 06.07.08, 12:49 am

Μπα μπα μπα, τι λες ψηλέ μου!!!
Δεν είχε πέσει στην αντίληψή του το παρόν scriptάκι!!! :shock: :shock:
Άβαταρ μέλους
LNinio
Old Member
 
Posts: 1333
Εγγραφή: 03.04.06, 1:32 pm
Τοποθεσία: Area 52

Σπαζοκεφαλιά

Δημοσίευσηαπό lollypop » 06.07.08, 7:28 pm

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

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

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

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

:)
May the Force be With you
Άβαταρ μέλους
lollypop
Member
 
Posts: 106
Εγγραφή: 20.12.07, 4:13 am
Τοποθεσία: Πειραιάς

Δημοσίευσηαπό psilos » 07.07.08, 7:34 pm

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


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


Ελπίζω τουλάχιστον να φανεί χρήσιμο κάπως...
Konstantinos Papalias - Web Developer
Άβαταρ μέλους
psilos
Junior Member
 
Posts: 317
Εγγραφή: 05.01.07, 1:42 pm
Τοποθεσία: London

Βρέθηκε λύση!

Δημοσίευσηαπό lollypop » 08.07.08, 8:23 am

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

Αυτό ως λύση. δεν το ενοχλεί λειτουργικά και εικαστικά δεν αλλάζει απολύτως τίποτα. :D
May the Force be With you
Άβαταρ μέλους
lollypop
Member
 
Posts: 106
Εγγραφή: 20.12.07, 4:13 am
Τοποθεσία: Πειραιάς

Δημοσίευσηαπό jonick33 » 20.07.08, 10:32 pm

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

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

:wink:
Άβαταρ μέλους
jonick33
Old Member
 
Posts: 1608
Εγγραφή: 09.10.05, 1:48 am
Τοποθεσία: Αθήνα


Επιστροφή στο II.I Ιστοσχεδίαση + Mobile + Διαδίκτυο

Μέλη σε σύνδεση

Μέλη σε αυτή την Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 0 επισκέπτες

Visual Communication Designers Club

Το Visual Communication Designers Club, το μεγαλύτερο Ελληνικό online design forum, αποτελεί μια Ελληνική κοινότητα σχεδιαστών οπτικής επικοινωνίας, υπό την ευρύτερη έννοια του όρου, θέλοντας να συμπεριλάβει στα μέλη της κάθε ειδικότητα και βαθμίδα όσων σπουδάζουν ή εργάζονται στον χώρο της επικοινωνίας, έντυπης, διαδικτυακής, τρισδιάστατης ή εφαρμογών πολυμέσων