Πρόβλημα με Internet Explorer

Σε αυτή την περιοχή μπορείτε να βρείτε ή να αναζητήσετε πληροφορίες σχετικές με την PHP

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

Απάντηση
gtsoukn
Δημοσιεύσεις: 33
Εγγραφή: 23 Ιούλ 2015 13:36

Πρόβλημα με Internet Explorer

Δημοσίευση από gtsoukn » 17 Αύγ 2016 16:51

Καλησπέρα.

Στο site μου έχω πρόβλημα στην εμφάνιση μιας μόνο σελίδας μόνο στον Internet Explorer.

Η παρακάτω εικόνα εμφανίζεται μόνο στον Internet Explorer.

Εικόνα

Φαίνεται σαν όλοι οι χαρακτήρες να πέφτουν στην ίδια θέση, ο ένας πάνω στον άλλον.
Σε άλλους browsers εμφανίζεται κανονικά αυτό που θέλω.

Το ...θέμα του IE μάλλον το έχω λύσει μιας και πρόβλημα εμφανίζεται μόνο στη συγκεκριμένη σελίδα.
Θεωρώ ότι το πρόβλημα είναι προγραμματιστικό. Κάτι που δεν αναγνωρίζεται από τον ΙΕ.
Ένα κομμάτι του κώδικα που εμφανίζεται σωστά (και στον ΙΕ) το μετέφερα στο "προβληματικό" κομμάτι του κώδικα και παρουσιάζει το ίδιο αποτέλεσμα (της φωτογραφίας).

Επειδή είμαι κατά των έμμεσων διαφημίσεων, αν κάποιος φίλος γνωρίζει ή υποθέτει πως μπορεί να βοηθήσει ας μου πει να του στείλω το αρχείο (και το site).

Ευχαριστώ.

Άβαταρ μέλους
jpk
Δημοσιεύσεις: 441
Εγγραφή: 09 Μαρ 2011 21:17

Πρόβλημα με Internet Explorer

Δημοσίευση από jpk » 18 Αύγ 2016 01:29

To πρόβλημα που περιγράφεις δεν έχει να κάνει με PHP (εκτός αν έκανες κάτι πολύ περίεργο όπως να ανιχνεύεις τον browser από το request και να είχες άλλο view αν ήταν IE server side).
Το πιθανότερο είναι ότι έχει να κάνει με CSS (και πολύ μικρότερη πιθανότητα με JavaScript). Πρέπει να εντοπίσεις σε ποια έκδοση του Internet Explorer βλέπεις το πρόβλημα και αν σε ενδιαφέρει αυτή η έκδοση (π.χ. δες στα στατιστικά πόσοι την χρησιμοποιούν).

gtsoukn
Δημοσιεύσεις: 33
Εγγραφή: 23 Ιούλ 2015 13:36

Πρόβλημα με Internet Explorer

Δημοσίευση από gtsoukn » 18 Αύγ 2016 02:48

Ευχαριστώ για την απάντηση.

Ξεκινώντας ανάποδα, έστω κι ένας να είναι αυτός που έχει το πρόβλημα, εγώ θέλω να βλέπει το site σωστά.
Εγώ έχω τον ΙΕ 11 (τελευταία έκδοση) και το πρόβλημα υπάρχει.

Επίσης, ειδήμων στον προγραμματισμό δεν είμαι και είναι η πρώτη μου απόπειρα. Κι αυτό που έφτιαξα, παίρνοντας στοιχεία από εδώ κι από εκεί (και από το freestuff) για μένα είναι υπερβολή.

Στο αρχείο που παρουσιάζεται το πρόβλημα έχω μπλέξει php και απλή html (αν το λέω σωστά) και "φαίνεται" ότι όλα ανοίγουν και κλείνουν σωστά (στον κώδικα).
Το style.css είναι ένα και προφανώς αν υπήρχε λάθος το πρόβλημα θα εμφανιζόταν και σε άλλες σελίδες.

Αν σου στείλω (με pm) περισσότερα στοιχεία θεωρείς ότι μπορείς να βρεις τι φταίει;
Γιώργος

Άβαταρ μέλους
jpk
Δημοσιεύσεις: 441
Εγγραφή: 09 Μαρ 2011 21:17

Πρόβλημα με Internet Explorer

Δημοσίευση από jpk » 18 Αύγ 2016 09:17

έστω κι ένας να είναι αυτός που έχει το πρόβλημα, εγώ θέλω να βλέπει το site σωστά.
Σιγά σιγά θα καταλάβεις ότι δεν ισχύει αυτό , δεν έχει κανένα νόημα να σπαταλάς πόρους για ιδιόρρυθμους browsers που έχει το 0,01% (π.χ. IE8) , και εκεί πρέπει να φαίνεται το site αλλά σε τελείως βασική λειτουργία. Το ότι έχεις πρόβλημα στην τελευταία έκδοση IE δεν είναι σε αυτή την κατηγορία
Το style.css είναι ένα και προφανώς αν υπήρχε λάθος το πρόβλημα θα εμφανιζόταν και σε άλλες σελίδες.
Δεν ισχύει αυτό για πολλούς λόγους , για παράδειγμα μπορεί ένας κανόνας css να εφαρμόζεται σε συγκεκριμένη σελίδα και όχι σε άλλες.

Στείλε μου PM αλλά πριν στείλεις οτιδήποτε πέρασε από τον w3c validator το html (που τελικώς παράγεται , όχι την PHP) σου και το css να σιγουρευτείς ότι δεν υπάρχουν λάθη.

Για το html:
https://validator.w3.org/

Για το css:
https://jigsaw.w3.org/css-validator/

gtsoukn
Δημοσιεύσεις: 33
Εγγραφή: 23 Ιούλ 2015 13:36

Πρόβλημα με Internet Explorer

Δημοσίευση από gtsoukn » 19 Αύγ 2016 22:13

Καλησπέρα.

Πέρασα τα σχετικά αρχεία από έλεγχο και βγήκαν αρκετά λάθη, τα περισσότερα ήταν επαναλαμβανόμενα (ίδια λάθη σε διαφορετικά σημεία).
Ακολουθώντας τα lnks προτάσεων με παρέπεμπαν σε HTML 5.2. Αν δεν κάνω λάθος εγώ το έφτιαξα σε HTML 4. Το έφτιαξα πριν 1 και πλέον χρόνο.

Από τα αποτελέσματα των ελέγχων:

Για το css

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

#.p-box-page-info .p-box-wrap {
	padding-left: 230px; 
	min-height: 120px;
	background: url(../img/***_logo.jpg) 20px 10px no-repeat;
}
Σφάλμα: Lexical error at line 182, column 2. Encountered: "." (46), after : "#" .p-box-page-info .p-box-wrap { padding-left: 230px; min-height: 120px; background: url(../img/***_logo.jpg) 20px 10px no-repeat; }

Το σφάλμα προφανώς είναι το #.p-box-page-info .p-box-wrap
Πώς πρέπει να το γράψω για να είναι σωστό;

Για το html

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

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
Error: A meta element with an http-equiv attribute whose value is X-UA-Compatible must have a content attribute with the value IE=edge.
Εδώ προφανώς πρέπει να διαγράψω το chrome=1. Μήπως μετά έχω προβλήματα στον Chrome;

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

<meta http-equiv="Cache-Control" content="no-cache">
Error: Bad value Cache-Control for attribute http-equiv on element meta.

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

<img src="img/***_logo.png">
Error: An img element must have an alt attribute, except under certain conditions.
Το alt είναι απαραίτητο;
Το alt όπως και το title τα έβλεπα σε αρκετά παραδείγματα εικόνων αλλά για το alt δεν "έβλεπα" κάποια λειτουργία και τα διέγραψα.

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

<table width="98%" align="center">
	<tr><td><marquee behavior="scroll" direction="left" scrolldelay="50" scrollamount="2">.........</marquee></td></tr>
</table>
Error: Element marquee not allowed as child of element td in this context. (Suppressing further errors from this subtree.)

Στα παρακάτω δε νομίζω ότι χρειάζεται να αναφέρω τον κώδικα.
Η χρήση των παρακάτω είναι ...απαρχαιωμένη και προτείνεται η χρήση css.

Error: The width attribute on the table element is obsolete.
Error: The width attribute on the td element is obsolete.
Error: The align attribute on the td element is obsolete.
Error: The align attribute on the table element is obsolete.
Error: The font element is obsolete.
Και άλλα τέτοια σχετικά.
Και πώς μπορεί να χρησιμοποιηθεί css όταν κάθε πίνακας μπορεί να είναι τελείως διαφορετικός από έναν άλλο;

Από όλα τα παραπάνω σφάλματα είναι κάποιο "υπεύθυνο" για το πρόβλημά μου;
Γιώργος

Άβαταρ μέλους
jpk
Δημοσιεύσεις: 441
Εγγραφή: 09 Μαρ 2011 21:17

Πρόβλημα με Internet Explorer

Δημοσίευση από jpk » 20 Αύγ 2016 08:56

Γεια σου gtsoukn ,
Είναι περίεργο που σου βρήκε μόνο αυτά ο w3c validator αν και πιστεύω ότι είναι μια καλή αρχή (Σε εμένα σε Eclipse IDE έγινε κόκκινο και πορτοκαλί το σύμπαν ;) ). Υπάρχουν πολλά γενικά αλλά διαλέγω να σου γράψω μόνο τρία ,
- μην χρησιμοποιείς inline styles χωρίς πολύ συγκεκριμένο λόγο , ( αφού έχεις το css αρχείο γιατί δεν χρησιμοποιείς αυτό για τα styles ; )
- όταν χρησιμοποιείς ένα font family σιγουρέψου ότι υπάρχει (π.χ. το Trebuchet MS δεν υπάρχει), αν θες να χρησιμοποιήσεις ένα font family που δεν είναι standard τότε πρέπει να το ορίσεις στο css.
- δεν έχεις λόγο να χρησιμοποιείς τόσα tables για λόγους view (εμφάνισης) , είναι κάτι που κάναμε την δεκαετία του '90 (άντε αρχές της δεκαετίας του 2000) που δεν είχαν αναπτυχθεί τόσο τα CSS , σήμερα τα tables είναι μόνο για δομημένα δεδομένα.

Πάμε σε αυτά που ρώτησες
#.p-box-page-info .p-box-wrap 
Το p-box-page-info είναι ή style class (έχει οριστεί δηλαδή με style="") ή id (έχει οριστεί με id="") , άρα ή είναι #p-box-page-info ή .p-box-page-info
X-UA-Compatible
Το συγκεκριμένο meta tag κάποτε είχε νόημα μόνο για τον Internet Explorer (οπότε δεν έχει νόημα να υπάρχει το Chrome μέσα σε αυτό). Έλεγε για λόγους συμβατότητας στον Internet Explorer πια έκδοση αποτελέσματος εμφάνισης να χρησιμοποιήσει (π.χ. IE=9), τώρα δεν είμαι τόσο σίγουρος ότι έχει νόημα. Περισσότερα στο https://msdn.microsoft.com/en-us/librar ... s.85).aspx
http-equiv Cache-Control
Δεν είμαι σίγουρος γιατί σου έβγαλε αυτό ο w3c validator (μπορεί να είναι θέμα κεφαλαίων / μικρών) , από ότι κατάλαβα αυτό που θέλεις να πεις είναι να μην γίνεται caching (για κάποιο λόγο) αλλά δεν μπορείς να βασιστείς έτσι και αλλιώς σε ένα meta για αυτό. Όσο αφορά τα js και css αρχεία υπάρχουν πολλές τεχνικές όπως π.χ. το version id του app αλλά δεν θα σε μπλέξω με αυτά.
An img element must have an alt attribute
Φυσικά και είναι απαραίτητο , απλά περιέγραψε το image και μην το γεμίζεις μόνο με λέξεις κλειδιά για SEO γιατί θα έχεις το ανάποδο αποτέλεσμα.
Element marquee not allowed as child of element td in this context.
Νομίζω τα λέει όλα το μήνυμα συν ότι έχει νόημα να ξανασκεφτείς την χρήση marquee και δεν είναι standard και σαν πρόταση έχει απορριφθεί από το w3c και το πως τελικά θα το εμφανίσει ο κάθε browser είναι ένα θέμα , δες : https://en.wikipedia.org/wiki/Marquee_element
Και πώς μπορεί να χρησιμοποιηθεί css όταν κάθε πίνακας μπορεί να είναι τελείως διαφορετικός από έναν άλλο;
Εννοείς πως μπορεί κάθε πίνακας να έχει διαφορετική εμφάνιση; Με βάση τι; Όπως έγραψα στην αρχή η χρήση των tables για λόγους εμφάνισης δεν έχει νόημα, αλλά αν έχεις όντως κάποια απορία γράψε αναλυτικά την ερώτηση για να το δούμε.


Και πάμε τελικά στην κεντρική σου ερώτηση , γράφω την απάντηση από εδώ γιατί είναι κάτι που έχω δει πάρα πολλές φορές τα τελευταία χρόνια , έχει να κάνει με την αποφυγή κενών μεταξύ html elements καθώς η HTML θα προσθέσει κενό αν το κλείσιμο τους ενός δεν συνοδεύετε κατευθείαν με το άνοιγμα του επόμενου. Το πρόβλημα ήταν στο πως επέλεξες να το αντιμετωπίσεις.

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

.grid &#123;
	white-space&#58; nowrap;
	letter-spacing&#58; -1em;
	font-size&#58; 0;
&#125;
Αυτό θα σήμαινε ότι σε όλους τους "απογόνους" του .grid θα έπρεπε να έχεις ορίσει font-size και letter-spacing αλλά δεν είχες. Ή αφαιρείς το letter-spacing από το rule του grid ή προσθέτεις letter-spacing στους απογόνους.

Τώρα το γιατί o Internet Explorer εμφανίζει έτσι το αρνητικό letter-spacing παίρνει πολύ συζήτηση αν έχει κάποιο νόημα ή είναι από τις γνωστές παραξενιές της Microsoft.

gtsoukn
Δημοσιεύσεις: 33
Εγγραφή: 23 Ιούλ 2015 13:36

Πρόβλημα με Internet Explorer

Δημοσίευση από gtsoukn » 21 Αύγ 2016 02:05

Με την αφαίρεση του letter-spacing το πρόβλημα διορθώθηκε.
Ευχαριστώ!!!

Το "μεγάλο" πλέον θέμα μου είναι ότι πρέπει να αρχίσω το διάβασμα (και το ψάξιμο).
Γιώργος

Απάντηση

Επιστροφή στο “PHP Προγραμματισμός”

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

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