πρόβλημα με IE και άλλους browsers

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

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

Απάντηση
andreaskor
Δημοσιεύσεις: 199
Εγγραφή: 03 Μάιος 2007 14:28
Επικοινωνία:

πρόβλημα με IE και άλλους browsers

Δημοσίευση από andreaskor » 27 Δεκ 2009 14:48

Γειά σας έχω ένα οριζόντιο menu με <li> και παίρνω το εξής αποτέλεσμα!!

Internet Explorer:
Εικόνα

Firefox και λοιπά:
Εικόνα

Έχω ένα εξωτερικό DIV και μέσα το <ul><li>

Σας παραθέτω και τον κώδικα του CSS:

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

#menu &#123;
	float&#58; right;
	background&#58;url&#40;../img/menuSeperator.gif&#41; bottom right no-repeat;
	height&#58; 39px;
	margin-top&#58; 15px;
	width&#58; 648px;
	display&#58; block;
	padding&#58; 0px;
&#125;

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

#menu ul &#123;
	list-style&#58; none;
	height&#58; 39px;
	margin-right&#58; 75px;
	float&#58; right;
&#125;

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

#menu ul li &#123;
	float&#58; left;
&#125;

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

#menu ul li a&#58;visited &#123;
	text-align&#58; center;
	margin-right&#58; 4px;
	display&#58; block;
	width&#58; 160px;
	height&#58; 30px;
	background&#58; url&#40;../img/button.gif&#41; left top no-repeat;
	color&#58; #FFF;
	text-decoration&#58; none;
	font&#58; Calibri;
	font-weight&#58; bold;
	font-size&#58; 19px;
	padding-top&#58; 9px;
&#125;

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

#menu ul li a&#58;hover&#123;
	background&#58;url&#40;../img/buttonHover.gif&#41; left top no-repeat;
&#125;

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

#menu ul li.active a &#123;
	text-align&#58; center;
	margin-right&#58; 4px;
	display&#58; block;
	width&#58; 160px;
	height&#58; 30px;
	background&#58; url&#40;../img/buttonActive.gif&#41; left top no-repeat;
	color&#58; #FFF;
	text-decoration&#58; none;
	font&#58; Calibri;
	font-weight&#58; bold;
	font-size&#58; 19px;
	padding-top&#58; 9px;
&#125;

Το προβλημά μου είναι πώς: εάν δώσω λίγο ύψος στην γραμμή για να ρθει στα ίσια με το menu, μου χαλάει η εμφάνιση σε explorer!! Και το ανάποδο!!

Άβαταρ μέλους
Kainourios
Ruby Moderator
Δημοσιεύσεις: 504
Εγγραφή: 18 Μάιος 2005 16:20
Τοποθεσία: Κορυδαλλός
Επικοινωνία:

πρόβλημα με IE και άλλους browsers

Δημοσίευση από Kainourios » 27 Δεκ 2009 15:30

Μια γρήγορη λύση είναι να χρησιμοποιήσεις κάποιο CSS hack.

Για internet explorer 6 και κάτω εκδόσεις βάλε μπροστά από το css attribute το σύμβολο _

Για internet explorer 7 και κάτω εκδόσεις βάλε μπροστά από το css attribute το σύμβολο *

Για internet explorer 8 και κάτω εκδόσεις βάλε στο τέλος του css attribute το σύμβολο \9

Παράδειγμα:

#menu {
height: 39px; /* Αυτό το βλέπουν όλοι οι browsers */
height: 100px\9; /* Αυτό θα το βλέπει ο internet explorer 8, 7, 6 */
*height: 70px; /* Αυτό θα το βλέπει ο internet explorer 6 και 7 */
_height: 50px; /* Αυτό θα το βλέπει ο internet explorer 6 */

margin-top: 15px;
width: 648px;
display: block;
padding: 0px;
}

Με τον παραπάνω τρόπο θα βλέπεις διαφορετικά το height σε κάθε έκδοση internet.

Στα CSS πιάνεται το τελευταίο attribute που δηλωθεί, οπότε ανάλογα τον browser βλέπει και το ανάλογο height. Αν έβαζα το κανονικό height στο τέλος (μετά από τα υπόλοιπα CSS hacks heights) τότε όλοι θα έπαιρναν το τελευταίο κανονικό height.

andreaskor
Δημοσιεύσεις: 199
Εγγραφή: 03 Μάιος 2007 14:28
Επικοινωνία:

πρόβλημα με IE και άλλους browsers

Δημοσίευση από andreaskor » 27 Δεκ 2009 16:26

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

Απάντηση

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

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

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