Borders στον IE και height

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

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

Απάντηση
Άβαταρ μέλους
xmavidis
Honorary Member
Δημοσιεύσεις: 1217
Εγγραφή: 02 Δεκ 2003 19:59
Τοποθεσία: Ηράκλειο

Borders στον IE και height

Δημοσίευση από xmavidis » 22 Ιούλ 2006 15:37

Έχω πρόβλημα με τα borders στο menu (μόνο στον IE). Δεν εμφανίζονται τα πάνω και κάτω borders.

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

border: 1px solid #000;
Επίσης το height των li που έχω στο menu δεν αυξάνεται όπως πρέπει (γίνεται κανονικά σε firefox και opera).

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

padding-bottom: 12px;
padding-top: 12px;
I want to know God’s thoughts; the rest are details.
Albert Einstein

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

Borders στον IE και height

Δημοσίευση από skeftomilos » 22 Ιούλ 2006 17:26

Μήπως ο IE προτιμάει #000000 αντί για #000;

Για τα list items μπορείς να δοκιμάσεις το line-height (αν δε βρεις άκρη διαφορετικά).
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

Άβαταρ μέλους
patriot
Honorary Member
Δημοσιεύσεις: 1590
Εγγραφή: 20 Αύγ 2002 19:21
Τοποθεσία: Σπίτι μου!

Borders στον IE και height

Δημοσίευση από patriot » 23 Ιούλ 2006 00:56

2) Αν και εγώ συνήθως το γράφω ανάποδα: (επειδή απλά έτσι έτυχε να το δω σε κάποιο παράδειγμα και έτσι το έμαθα)
border:#000 1px solid;
κατά τα άλλα δεν παίζει ρόλο. Ούτε και το #000 αντί για #000000. Το πρόβλημα κατά πάσα πιθανότητα είναι αλλού. Μην ξεχνάς ότι οι εντολές των css "πιάνουν" αναλόγως με το ποια μπαίνει τελευταία προς τα κάτω. Προφανώς έχεις βάλει παρακάτω κάτι άλλο που εξουδετερώνει αυτό το border.

2) Το padding πιάνει με μεγάλη δυσκολία στον explorer ορισμένες φορές. Βάλε margin που ουσιαστικά κάνει το ίδιο.


ΥΓ: Skeftomile νομίζω πως το line-height δεν πιάνει σε όλους τους browsers. Κάνω λάθος;
1) Για όποιον γράφει με πολυτονικά....
2) Καλά ακόμα να συνηθίσετε την ιδέα ότι δεν γράφουμε ούτε με greeklish ούτε με κεφαλαία;

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

Borders στον IE και height

Δημοσίευση από skeftomilos » 23 Ιούλ 2006 05:19

patriot έγραψε:ΥΓ: Skeftomile νομίζω πως το line-height δεν πιάνει σε όλους τους browsers. Κάνω λάθος;
IE, Firefox και Opera δουλεύει. Παραέξω δεν ξέρω.
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

Άβαταρ μέλους
xmavidis
Honorary Member
Δημοσιεύσεις: 1217
Εγγραφή: 02 Δεκ 2003 19:59
Τοποθεσία: Ηράκλειο

Borders στον IE και height

Δημοσίευση από xmavidis » 23 Ιούλ 2006 11:48

το line-height δε πιάνει.

#nav li a:link{
width: 40px;
text-decoration:none;
color: #3D4E50;
text-align: center;
display: inline;
padding: 7px 12px 7px 12px;
border: 1px solid #000000;
height: 7px;
line-height: 7px;
}
I want to know God’s thoughts; the rest are details.
Albert Einstein

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

Borders στον IE και height

Δημοσίευση από skeftomilos » 23 Ιούλ 2006 20:26

Δε βάζουμε μόνο a:link, βάζουμε και a:visited! :D

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

#nav li a:link, #nav li a:visited {
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

Άβαταρ μέλους
xmavidis
Honorary Member
Δημοσιεύσεις: 1217
Εγγραφή: 02 Δεκ 2003 19:59
Τοποθεσία: Ηράκλειο

Borders στον IE και height

Δημοσίευση από xmavidis » 23 Ιούλ 2006 23:29

Το είχα ξεχωριστά αλλά τώρα το έβαλα. Το πρόβλημα λύθηκε κι ελπίζω σε λίγες μέρες να μπορέσω να ανεβάσω το site.
I want to know God’s thoughts; the rest are details.
Albert Einstein

Άβαταρ μέλους
milianos
Δημοσιεύσεις: 269
Εγγραφή: 11 Νοέμ 2004 01:39
Τοποθεσία: schwabenland
Επικοινωνία:

Borders στον IE και height

Δημοσίευση από milianos » 23 Ιούλ 2006 23:45

Μπορείς με μια απλή λίστα και την χρήση CSS να φτιάξης ενα όμορφο Navigation Menu αλλά για να λειτουργήσει πρέπει αυτό να γίνει σωστά και ολοκληρωμένα.

Εδω ενα παράδειγμα σχεδόν χωρίς καθόλου γραφικά εκτός απο ενα μικρό βέλος.

Και εδω ο κώδικας απο αυτό ο navigation menu

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

<html>
<head>
<title>Μακεδονία - Θράκη</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-7">
<style type="text/css">
.nav &#123;
	width&#58; 140px;
	font-family&#58; verdana;
	margin&#58; 0px;
	padding&#58; 0px;
	list-style&#58;none;
	border&#58; 1px solid #666666;
	border-bottom-width&#58; 0px;
&#125;

.nav li a &#123;
	font-size&#58; 11px;
	line-height&#58; 23px;
	height&#58; 23px;
	display&#58;block;
	color&#58;#666666;
	text-decoration&#58; none;
	font-weight&#58; normal;
	background-color&#58; #ccc;
	border&#58; 1px solid #666666;
	border-left-width&#58; 0px;
	border-right-width&#58; 0px;
	border-top-color&#58; #fff;
	cursor&#58; hand;
&#125;

.nav li a span &#123;
	height&#58; 23px;
	text-indent&#58; 4px;
	display&#58;block;
	margin-left&#58; 25px;
	background-color&#58; #e4e4e4;
&#125;

.nav li a&#58;hover &#123;
	background&#58; url&#40;http&#58;//www.interema.de/aktuell/img/nav.gif&#41; no-repeat 5px 4px;
	background-color&#58; #e4e4e4;
&#125;

.nav li a&#58;hover span &#123;
	color&#58;#000000;
	background-color&#58; #ccc;
&#125;
</style>
</head>

<body>
<ul class="nav">
	<li><a href="#"><span>Αλεξανδρούπολη</span></a></li>
	<li><a href="#"><span>Καστοριά</span></a></li>
	<li><a href="#"><span>Κοζάνη</span></a></li>
	<li><a href="#"><span>Εδεσσα</span></a></li>
	<li><a href="#"><span>Ηγουμενίτσα</span></a></li>
	<li><a href="#"><span>Γρεβενά</span></a></li>
	<li><a href="#"><span>Κατερίνη</span></a></li>
	<li><a href="#"><span>Δράμα</span></a></li>
	<li><a href="#"><span>Καβάλα</span></a></li>
	<li><a href="#"><span>Φλώρινα</span></a></li>
	<li><a href="#"><span>Λάρισσα</span></a></li>
	<li><a href="#"><span>Τρίκαλα</span></a></li>
</ul></body>

</html>
Η χρήση της span tag γίνεται φυσικά για λόγους καλαισθησίας, συμμετρίας κλπ και το nav menu μπορεί να λειτουργήσει σε όλους τους Browsers και χωρίς αυτή.


Άβαταρ μέλους
xmavidis
Honorary Member
Δημοσιεύσεις: 1217
Εγγραφή: 02 Δεκ 2003 19:59
Τοποθεσία: Ηράκλειο

Borders στον IE και height

Δημοσίευση από xmavidis » 24 Ιούλ 2006 10:26

Με λίστα το έκανα. Αφού είναι όλο css.
I want to know God’s thoughts; the rest are details.
Albert Einstein

Απάντηση

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

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

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