Provlimata me css styles kai browser compatibility

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

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

Απάντηση
wabbit
Δημοσιεύσεις: 52
Εγγραφή: 24 Αύγ 2006 22:55

Provlimata me css styles kai browser compatibility

Δημοσίευση από wabbit » 24 Αύγ 2006 23:14

exw ena form me method="get"
an kanw:

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

<input id="btnGo" type="image" alt="Go" src="img/go.gif" />
Tote otan kanw submit stelnei kai ta x,y coordinates apo to image

Dokimasa na to ftiaksw allazontas to se:

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

<input type="submit" class="sendButton" />
kai eftiaksa 2 class gia sendButton

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

.sendButton &#123;
  width&#58; 25px;
  height&#58; 23px;
  margin&#58; 0;
  padding&#58; 0;
  border&#58; none;
  background&#58; transparent url&#40;../img/go.gif&#41; no-repeat center top;
  text-indent&#58; -1000em;
  cursor&#58; pointer; /* hand-shaped cursor */
  cursor&#58; hand; /* for IE 5.x */
&#125;

.sendButton2 &#123;
  width&#58; 25px;
  height&#58; 23px;
  padding&#58; 55px 0 0;
  margin&#58; 0;
  border&#58; 0;
  background&#58; transparent url&#40;../img/go.gif&#41; no-repeat center top;
  overflow&#58; hidden;
  cursor&#58; pointer; /* hand-shaped cursor */
  cursor&#58; hand; /* for IE 5.x */
&#125;
To prwto doulevei apsoga se Firefox alla dystixws oxi se IE. O Logos einai oti o IE kanei indent to backround-image mazi me to text, enw kanonika tha eprepe na kanei mono to text. Mia lysh einai na kanw add display: block Alla o IE tha emfanisei kai to text pou grafei Submit alla kai to image taytoxrona to ena panw sto allo.

H defterh lysh doulevei omorfa se IE, alla den doulevei se Firefox giati to padding mou anevazei to image 55px psila, kai etsi megalonei kai to <div> mou se height kai genikws vgenei ena xalia apotelesma.

Anarotiomoun an yparxei kapoia lysh na eksafanisw to text, kai na doulepsei kai se IE alla kai se allous browsers mazi, alliws an tha mporousa na exw mia alternative lysh, as poume na paw pisw sto input type"image" kai na exw ena javascript pou tha eksafanizei ta x and y coordinates.

Eyxaristw:)
Wabbit

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

Provlimata me css styles kai browser compatibility

Δημοσίευση από skeftomilos » 25 Αύγ 2006 01:26

Wabbit σήμερα είχα το ίδιο πρόβλημα, και η λύση που σου βρήκα θα φανεί χρήσιμη και σε μένα. :) Για τις φόρμες που στέλνονται POST δε με πειράζει καθόλου αν σταλούν μαζί τα x και y. Αλλά για τις φόρμες GET, π.χ. search forms, είναι άσχημο το x=53&y=4 στο url. Πάντως τα x και y στέλνονται μόνο με κλικ στο κουμπί, όχι με πληκτρολόγηση Enter. Παρακάτω είναι μια λύση JavaScript, δοκιμασμένη σε IE5, IE6, FF και Opera:

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

<form action="search-results.aspx">
  Αναζήτηση&#58; <input name="term">
  <input type="image" src="images/search.gif" onclick="this.form.submit&#40;&#41;;return false">
</form>
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

wabbit
Δημοσιεύσεις: 52
Εγγραφή: 24 Αύγ 2006 22:55

Provlimata me css styles kai browser compatibility

Δημοσίευση από wabbit » 25 Αύγ 2006 02:08

Nai ontos afth h lysh me to javascript doulevei kai einai kalh. Apla anarotiomouna giati afth to mperdema me ta browsers, na min mporw na ta kanw na doulepsoun me css styles, genikos o IE metafrazei ta text-align, text-ident gia images, enw tha eprepe na einai mono gia text. An kapoios tha eixe kai tin css lush, tha htan oraia na tin kanei post. Se efxaristo pantos skeftomilos gia afthn thn praktikh lysh :)

sibas
Honorary Member
Δημοσιεύσεις: 1853
Εγγραφή: 21 Φεβ 2003 01:21
Τοποθεσία: Μια εδώ.. Μια εκεί.. Σήμερα είμαι εδώ!!!
Επικοινωνία:

Provlimata me css styles kai browser compatibility

Δημοσίευση από sibas » 25 Αύγ 2006 10:09

Δοκίμασε αυτό ίσως να σου κανει :lol:

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

.sendButton &#123;
 width&#58; 25px;
 height&#58; 23px;
 margin&#58; 0;
 padding&#58; 55px 0 0;
 border&#58; none;
 background&#58; transparent url&#40;../img/go.gif&#41; no-repeat center top;
 overflow&#58; hidden;
 cursor&#58; pointer; /* hand-shaped cursor */
 cursor&#58; hand; /* for IE 5.x */
&#125;

.sendButton&#91;class&#93;&#123;
 text-indent&#58; -1000em;
 padding&#58; 0;
&#125;

wabbit
Δημοσιεύσεις: 52
Εγγραφή: 24 Αύγ 2006 22:55

Provlimata me css styles kai browser compatibility

Δημοσίευση από wabbit » 25 Αύγ 2006 10:24

Βασικά μόλις βρήκα την λύση. Μια πολύ παρόμοια. Διάβασα λίγο παραπάνω για CSS και έκανα χρήση το λεγόμενο browser-hack, και δουλέβει μια χαρά και σε IE και σε Firefox. Είναι απλά ένα CSS style που ο ΙΕ το προσπερνάει. Οπότε συνδύασα αυτά τα δυο styles που είχα ήδη. Αν κάποιος έχει κάποια γνώμη πάνω σε αυτό, συμφωνεί η διαφωνεί, θα ήθελα να την ακούσω. Σε ευχαριστώ επίσης sibas για την δική σου λύση που αν κατάλαβα καλά είναι το ίδιο σκεπτικό απλά εκφρασμένο με διαφορετικό τρόπο.

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

.sendButton &#123;
  width&#58; 25px;
  height&#58; 23px;
  padding&#58; 55px 0 0;
  margin&#58; 0;
  border&#58; 0;
  background&#58; transparent url&#40;../img/go.gif&#41; no-repeat center top;
  overflow&#58; hidden;
  cursor&#58; pointer; /* hand-shaped cursor */
  cursor&#58; hand; /* for IE 5.x */
&#125;
html>body .sendButton &#123; /* For non-IE browsers*/
  padding&#58; 0px;
  text-indent&#58; -1000em;
&#125;

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

Provlimata me css styles kai browser compatibility

Δημοσίευση από skeftomilos » 26 Αύγ 2006 15:51

CSS hacks are ugly. Την εποχή του ενθουσιασμού ήταν εύκολο να παραβλέψει κανείς την ασχήμια τους και χρησιμοποιήθηκαν κατά κόρον. Προκαλούν όμως πολλά προβλήματα και καλό είναι να αποφεύγονται.

- Vitamin Features: Stop Hacking, or be Stopped
- QuirksBlog: CSS hacks are starting to break
- Stop using CSS hacks now
- The future of CSS hacking
- Call to action: The demise of CSS hacks and broken pages
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

Απάντηση

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

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

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