11Jan 07
The Holly hack
Published by Petrakeas in Internet
Ασχολήθηκα αυτές τις μέρες με php,sql,html και CSS (κοινώς web design) και είμαι φοβερά εκνευρισμένος με τον Internet explorer 6. Μπορεί να βγήκε τώρα ο 7, αλλά πρέπει η σελίδα να εμφανίζεται σωστά παντού. Τα έχω πάρει πολύ άσχημα. Για να κάνεις τον IE να δείξει κάτι όπως πρέπει, χρειάζεται να τον κοροιδέψεις, να τον ξεγελάσεις!! Δε μπορούν να τον κάνουν να κάνει σωστό render??? Είναι απίστευτο το ότι πρέπει να σχεδιάζεις μία σελίδα για τους λοιπούς browsers και μετά να κάνεις hackerιές για τον IE. Κατάλαβα τι τραβάνε οι καημένοι οι web designers.
Ένα από τα σηματνικά προβλήματα του IE είναι το πώς θα κάνει "clear" ένα "floating div". Βρέθηκε μία λύση η οποία παίζει καλά σχεδόν σε όλους τους browsers και εφαρμόζει ένα ειδικό hack για τον IE, αξιοποιώντας ένα δεύτερο bug… Μιλάω για το "Holly hack". Πραγματικά σου λύνει τα χέρια. Τα bugs και τα αντίστοιχα hacks είναι τόσα πολλά που έχουν και βγει και ονόματα. Για παράδειγμα υπάρχει το "Guillotine Bug"..
Να φανταστείτε ότι αν θέλεις να κάνεις μία εικόνα-link να αλλάζει με το hover σε IE πρέπει να τον ξεγελάσεις αλλάζοντας το "a" tag πριν την εικόνα ώστε να αναγκαστεί να αλλάξει style και η εικόνα… ΈΛΕΟΣ!!!!!!!
Comments (6)
Βασικό είναι να μη φλιπάρεις (DONT PANIC) :)
Τα ίδια είχα περάσει και εγώ όταν ξεκινούσα πριν 6-7 χρόνια με τον IE 5 και αργότερα με τον 6.
Πρώτον δες το “Font και Reset css” από το YUI της Yahoo. Θα σου λύσει τα χέρια ως προς το σετάρισμα των αρχικών συνθηκών της κάθε σελίδας έτσι ώστε να φένεται ίδια σε ΙΕ και Firefox.
Δεύτερον, το να καθαρίσεις τα floats δε χρειάζεται hack για κανέναν browser (). Η αλήθεια είναι πως σπάνια χρησιμοποιώ ie hacks.
Τρίτον, το hover σε images είναι πολύ απλό και φυσικά δε χρειάζεται hack. Απλά σε κάθε state χρησιμοποιείς διαφορετικό σημείο του image. Μπορείς να βρεις παράδειγμα εδώ http://www.tutorio.com/tutorial/pure-css-image-rollovers.
μπορώ να σου στείλω κάποια layouts τα οποία χρησιμοποιώ ως “μπούσουλες” όταν ξεκινάω κάποιο καινούργιο design.
Ο ΙΕ6 δε μπορεί να καταλάβει το :after στο CSS το οποίο χρησιμοποιέιται συνήθως για clearing. Επίσης, αν χρησιμοποιήσεις κάποιο div που να κάνει clear και έχεις hover links τότε υπάρχει το πρόβλημα με Guillotine. Επομένως πιστεύω ότι είτε χρησιμοποιείς το reset.css (δε το ήξερα) είτε κάνεις τα hackα που λένε τα παραπάνω links
Επίσης ο IE6 δεν αντιλαμβάνεται το :hover σε: “a img” παρά μόνο σε “a”. Πού το είδες να δουλεύει????Είσαι σίγουρος ότι δε χρειάζεται hack???
Thanks για το rest.css .
δεν υπάρχει λόγος να βάλεις hover στο “a img”. Όπως σου είπα ποιο πάνω υπάρχουν πολλά παραδείγματα και η κοινά αποδεκτή λύση (χωρίς hack) είναι η χρήση background-image όπου το αρχείο εικόνας έχει και τα δύο state του button. Ακόμα ένα παράδειγμα εδώ http://www.edginet.org/techie/website/cssimg.html.
όλα τα προηγούμενα λύνονται με το reset.css ή τέλος πάντων με το να αρχικοποιήσεις το a tag.
Ακόμα και αυτή η μέθοδος είναι ένα ζόρι. Γιατί να μην μπορώ να βάλω hover στο a img??
Και σε δυναμικές σελίδες όπου υπάρχουν πολλές εικόνες θα πεις στην php να αλλάζει στο css το background image?
Welcome to the club. :)
Ορίστε και κάτι για any time needed:
Master CSS