Background position λάθος στον IE6.

Ας μάθουμε πως να κάνουμε τις σελίδες μας με στιλ. Τα Cascading Style Sheets είναι ο τρόπος για να το επιτύχουμε.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
ALR
Honorary Member
Δημοσιεύσεις: 1712
Εγγραφή: 09 Απρ 2005 17:30

Background position λάθος στον IE6.

Δημοσίευση από ALR » 04 Απρ 2008 07:18

Ενώ προσθέτω τον πολύ απλό κώδικα

background: url("borderdown.png") center bottom no-repeat;

σε ένα main div στη σελίδα που κάνω, Ενώ σε όπερα Firefox η εικόνα δείχνει κάποια πειθαρχία, στον ΙΕ6 κάνει το αντίθετο! παει left top!
Ψάχνω να βρώ μήπως φταίει κάποιο άλλο element πιο πάνω στον κώδικα που προκαλεί αυτό το φαινόμενο αλλά δε μπορώ να βρώ κάτι και πρώτη φορά μου συμβαίνει κάτι τέτοιο.

Έχει κανείς την παραμικρή ιδέα;

Thanks and καλή μέρα σε όλους.
Γίνονται πραγματάκια

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

Background position λάθος στον IE6.

Δημοσίευση από skeftomilos » 04 Απρ 2008 10:32

Το δοκίμασα σε IE6 και παίζει μια χαρά. Κάτι άλλο πρέπει να φταίει. Μήπως γίνεται override από κανένα background-position παρακάτω;

ALR
Honorary Member
Δημοσιεύσεις: 1712
Εγγραφή: 09 Απρ 2005 17:30

Background position λάθος στον IE6.

Δημοσίευση από ALR » 04 Απρ 2008 15:02

Ήταν και αργά εχθές..Ωστόσο κοίταξα τα πάντα αλλά δε μπόρεσα να καταλάβω γιατί το κάνει.. Θα τις φάω τις ώρες μου και σήμερα , ελπίζω να βρώ μια λύση.

Thanks που ασχολήθηκες skeftomilos :)
Γίνονται πραγματάκια

ALR
Honorary Member
Δημοσιεύσεις: 1712
Εγγραφή: 09 Απρ 2005 17:30

Background position λάθος στον IE6.

Δημοσίευση από ALR » 05 Απρ 2008 00:48

Τελικά δεν βρήκα λύση, κι έχω 2 εναλλακτικές ή βάζω την εικόνα στο body background γιατί βολεύει, ή βάζω ένα <hr> element με background την εικόνα κάτω από εκεί που θέλω, αντί να ορίσω στο συγκεκριμένω div το bottom που δεν συνεργάζεται στον ΙΕ6.

Παρουσιάστηκε ωστόσο ακόμη ένα πρόβλημα που έχω φάει γερό κόλλημα..
Έχω τον κώδικα:

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

#gallery&#123;
clear&#58;both;
width&#58;973px;
margin&#58;0;
padding&#58;0pt 32px;
background&#58; url&#40;"edges.png"&#41; repeat-y;
overflow&#58;auto;
Με το overflow:auto; ο Firefox συνεργάζεται και δείχνει το png που έχω ( edges.png ) εώς εκεί που δέχεται το div #gallery περιεχόμενο.
Χωρίς το overflow:auto ο firefox δεν απεικονίζει το edges.png.
Για να λύσω το πρόβλημα του transparency, προτίμησα να χρησιμοποιήσω javascript ( http://www.twinhelix.com/css/iepngfix/ ).

Όταν ανοίγει ο IE6 μου βγάζει το κλασσικό μήνυμα περί ασφάλειας, απεικονίζοντας μέχρι το σωστό σημείο το edges.png, χωρίς την transparency όμως.
Επιλέγοντας "να επιτρέπεται το αποκλεισμένο περιεχόμενο" , ο ΙΕ6 σταματά να εφαρμόζει την εντολή
repeat-y αλλά δείχνει το png με transparency Και το κανονικό του μέγεθος.

Τι έχω κάνει λάθος; Τι κάνω λάθος; Υπάρχει πιθανότητα να φταίει η javascript;
Γίνονται πραγματάκια

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

Background position λάθος στον IE6.

Δημοσίευση από skeftomilos » 05 Απρ 2008 12:32

Υπάρχουν πολλές παγίδες και δυσάρεστες εκπλήξεις με τα 32άμπιτα backgrounds στον IE6. Καλύτερα να στέλνεις 8bit γραφικά στους παλιούς IE, που εκτός από εύκολη λύση είναι και συνεπής με την ιδέα ότι όσοι χρησιμοποιούν deprecated browsers θα έχουν μεν βασική πρόσβαση στο περιεχόμενο, αλλά όχι απαραίτητα και άψογη εμπειρία από αισθητική άποψη.

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

<!--&#91;if lte IE 6&#93;>
  <style type="text/css">
    #gallery &#123;
      background-image&#58;url&#40;"edges.gif"&#41;;
    &#125;
  </style>
<!&#91;endif&#93;-->

ALR
Honorary Member
Δημοσιεύσεις: 1712
Εγγραφή: 09 Απρ 2005 17:30

Background position λάθος στον IE6.

Δημοσίευση από ALR » 05 Απρ 2008 20:58

Τελικά τα 2 προβλήματα που είχα σχετίζονται μεταξύ τους.
Χρησιμοποίησα ότι script βρήκα μπροστά μου για transparency fix. Αυτό που αναφέρω πιο πάνω έκανε μια χαρά τη δουλειά, αλλά με το πρόβλημα που περιγράφω, στον ΙΕ δεν αναγνώριζε το background repeat-y, ούτε το background center bottom.
Και διαβάζω εδώ http://code.google.com/p/ie7-js/
που είναι παρόμοιο script το εξής:
Unfortunately, the transparent background image cannot be tiled (repeated) using background-repeat. Nor can it be positioned using background-position.
Οπότε skeftomilos, προτείνεις να χρησιμοποιήσω τον κώδικα που δίνεις πιο πάνω, χωρίς κάποιο javascript για transparency fix, και αν ο άλλος χρησιμοποιεί ΙΕ6, ας δεί ότι δεί; Γιατί από ότι καταλαβαίνω έχουμε 2 επιλογές.
α) Αυτό που προτείνεις και σχεδιάζω ότι γουστάρω.
β) Το javascript , φτιάχνω το transparency problem στον ΙΕ6, όλοι βλέπουν το ίδιο, αλλά σχεδιάζω με περιορισμούς, προσοχή εδώ , προσοχή εκεί, no-position, no repeat.

Θα πάρω το α). Σε ευχαριστώ πολύ.
Γίνονται πραγματάκια

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

Background position λάθος στον IE6.

Δημοσίευση από skeftomilos » 05 Απρ 2008 21:38

Αν κάπου χρειάζεται οπωσδήποτε transparency μπορεί να γίνει το εξής:

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

<!--&#91;if lte IE 6&#93;>
  <style type="text/css">
    #gallery &#123;
      background-image&#58;none;
      filter&#58;progid&#58;DXImageTransform.Microsoft.AlphaImageLoader&#40;src="edges.png",sizingMethod="crop"&#41;;
    &#125;
  </style>
<!&#91;endif&#93;-->
Το sizingMethod εκτός από crop μπορεί να είναι και image ή scale.

Αυτό είναι στην ουσία που κάνουν τα scripts, αλλά το κάνουν μαζικά για όλα τα png γραφικά (ακόμα και τα 8bit). Οι παρενέργειες είναι links που δε δουλεύουν, οπτικά artifacts όταν συνδυάζεται με opacity, και ελαφρά διαφορετικές αποχρώσεις.

ALR
Honorary Member
Δημοσιεύσεις: 1712
Εγγραφή: 09 Απρ 2005 17:30

Background position λάθος στον IE6.

Δημοσίευση από ALR » 06 Απρ 2008 00:41

Skeftomilos ευχαριστώ και πάλι.
Διάβασα κι αυτό το reference ( http://reference.sitepoint.com/css/filter ) που είναι αυτό που μου έδειξες.
Πειράζει που προτίμησα και πάλι το α) ; Το βρήκα πιο βολικό και έκανε τη δουλειά που ήθελα τώρα χωρίς πολλές απώλειες.

Εννοώ, είναι σωστότερος ο δεύτερος τρόπος που μου υπέδειξες;
Γίνονται πραγματάκια

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

Background position λάθος στον IE6.

Δημοσίευση από skeftomilos » 06 Απρ 2008 12:25

Δύσκολο να πει κανείς το σωστό και το λάθος σε αυτές τις περιπτώσεις. Δύο χρόνια πριν δεν υπήρχε περίπτωση να μην παίζει άψογα ένα site στον IE6. Σήμερα δεν είναι ανάγκη να δίνει κανείς τόσο προσοχή. Σε δύο χρόνια που θα είναι για τα καλά στα πράγματα ο IE8, ο IE6 θα είναι δύο γενιές πίσω με ό,τι αυτό συνεπάγεται.

Απάντηση

Επιστροφή στο “CSS - Cascading Style Sheets”

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

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