Height 100% σε standards mode

Ερωτήσεις και απαντήσεις σχετικές με την HTML, XHTML και την κατασκευή σελίδων για το Web.

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

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

Height 100% σε standards mode

Δημοσίευση από skeftomilos » 17 Αύγ 2006 11:34

Ζητώ τη βοήθειά σας καθώς αντιμετωπίζω χρόνιο πρόβλημα με το ύψος 100% σε strict mode, που με κρατά καθηλωμένο σε quirks mode. Ο παρακάτω κώδικας παράγει το επιθυμητό αποτέλεσμα:

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
  <head>
    <title>Height-100-percent</title>
  </head>
  <body>
    <table cellpadding="0" cellspacing="0" width="100%" height="100%">
      <tr>
        <td align="center" bgcolor="#ffefdf" style="border&#58;1px solid #7f0000">
          Strict Please!
        </td>
      </tr>
    </table>
  </body>
</html>
Εικόνα

Μόλις γίνει αλλαγή σε strict mode προκύπτει αυτό:

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http&#58;//www.w3.org/TR/REC-html40/loose.dtd">
<html>
  <head>
    <title>Height-100-percent</title>
  </head>
  <body>
    <table cellpadding="0" cellspacing="0" width="100%" height="100%">
      <tr>
        <td align="center" bgcolor="#ffefdf" style="border&#58;1px solid #7f0000">
          Oh! Nooo!
        </td>
      </tr>
    </table>
  </body>
</html>
Εικόνα

...ενώ προσθέτοντας στο body height:100% παίρνω αυτό:

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http&#58;//www.w3.org/TR/REC-html40/loose.dtd">
<html>
  <head>
    <title>Height-100-percent</title>
  </head>
  <body style="height&#58;100%">
    <table cellpadding="0" cellspacing="0" width="100%" height="100%">
      <tr>
        <td align="center" bgcolor="#ffefdf" style="border&#58;1px solid #7f0000">
          Bouou Houou!
        </td>
      </tr>
    </table>
  </body>
</html>
Εικόνα

Υπάρχει λύση;
Τελευταία επεξεργασία από το μέλος skeftomilos την 19 Αύγ 2006 17:33, έχει επεξεργασθεί 1 φορά συνολικά.
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

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

Height 100% σε standards mode

Δημοσίευση από patriot » 17 Αύγ 2006 19:48

Καταρχάς να πω ότι δεν ξέρω πολλά για τα DTP's απλά σου γράφω ότι ξέρω μήπως και σε βοηθήσουν. Ξεκινάω:

Κάποτε το "transitional" ήταν αυτό:

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
Σήμερα δεν είναι αυτό. Έφτιαξαν ένα νέο που είναι:

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http&#58;//www.w3.org/TR/REC-html40/loose.dtd">
Όπως το transitional έχει παλιό και νέο, έτσι έχει και το strict:
Παλιό

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
Νέο

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http&#58;//www.w3.org/TR/html4/strict.dtd">
1) Έβαλες 3 κώδικες. Ο πρώτος έχει το παλιό transitional και όλα είναι οκ. Ο δεύτερος έχει το νέο και ΠΑΛΙ είναι οκ. Νομίζω πως καταλάθος έβαλες κάτι λάθος κώδικα την δεύτερη φορά αφού δεν έβαλες κώδικα με strict. EDIT// εκτός αν το νέο transitional θεωρείται αυτόμάτως strict και εγώ δεν το ξέρω πράγμα πολύ πιθανόν αφού δεν ξέρω πολλά για να DTP's

2) Όσο για το τρίτο. Για να λύσεις το πρόβλημα του υπάρχει λύση αλλά είναι κάπως "χασάπικη". Ο λόγος που βγαίνει μπάρα (σε moz kai opera αλλά όχι ie) είναι εξ' αιτίας του margin και του padding στο body. Δηλ δεν θα έχει κανένα πρόβλημα αν βάλεις αυτό:

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

body &#123;margin&#58;0px; padding&#58;0px;&#125;
Βέβαια μπορεί να μην σε βολεύει έτσι ο κώδικας αλλά....
Το κολπάκι αυτό δουλεύει άσχετα με ποιο doctype έχεις

Some info:
1) Μπορείς άμα θες να μην βάλεις καθόλου DTP.

2) Έχω διαβάσει (δεν θυμάμαι πηγές αλλά σε τουλάχιστον 2-3 sites) ότι όταν δεν βάζεις ΚΑΘΟΛΟΥ doctype τότε ισχύει αυτομάτως το "transitional".

3) Άμα πας στον validator της W3 μη έχοντας καθόλου DTP ή έχοντας το παλιό θα σου πει ότι ΔΕΝ βλέπει ΚΑΝ doctype.

Δεν νομίζω να σε βοήθησα αλλά μπορεί να σου έδωσα ιδέες. Αν βρεις λύση πες μας.

Extra: Εγώ συνήθως κοιτάζω αυτό το url για τα DTP's
1) Για όποιον γράφει με πολυτονικά....
2) Καλά ακόμα να συνηθίσετε την ιδέα ότι δεν γράφουμε ούτε με greeklish ούτε με κεφαλαία;

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

Height 100% σε standards mode

Δημοσίευση από skeftomilos » 18 Αύγ 2006 00:00

Patriot αν το doctype δεν υπάρχει ή δεν έχει url, τότε ο browser μπαίνει αυτόματα σε quirks mode. Το επιθυμητό οπτικό αποτέλεσμα είναι αυτό του πρώτου screenshot. Θέλω to table να καλύπτει όλη την οθόνη σε οποιαδήποτε ανάλυση, έχοντας συγκεκριμένα (μη μηδενικά) margins από όλες τις πλευρές. Επομένως το δεύτερο screenshot ΔΕΝ είναι OK. :(

Τώρα θα μου πείτε γιατί θέλω σώνει και καλά strict mode αφού με quirky είναι όλα μέλι γάλα. Έλα ντε, γιατί θέλω ΟΕΟ; Αν ξέρει κανείς ας μου απαντήσει και σε αυτό το ερώτημα παρακαλώ! :D
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

Άβαταρ μέλους
cherouvim
Script Master
Δημοσιεύσεις: 3137
Εγγραφή: 13 Ιούλ 2005 22:56
Τοποθεσία: Athens, Greece
Επικοινωνία:

Height 100% σε standards mode

Δημοσίευση από cherouvim » 18 Αύγ 2006 19:55

Αν θες να μπεις στο quirks mode, αλλά να έχεις Strict DTD βάλε το XML declaration στην αρχή του εγγράφου σου.

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

<?xml version="1.0" encoding="utf-8"?>

Άβαταρ μέλους
alkisg
Δημοσιεύσεις: 265
Εγγραφή: 03 Ιουν 2005 11:53
Τοποθεσία: Ιωάννινα
Επικοινωνία:

Height 100% σε standards mode

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

Αυτό σου κάνει; (μόνη αλλαγή στο margin του body)

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http&#58;//www.w3.org/TR/REC-html40/loose.dtd">
<html>
  <head>
    <title>Height-100-percent</title>
  </head>
  <body style="height&#58;100%; margin&#58;0px">
    <table cellpadding="0" cellspacing="0" width="100%" height="100%">
      <tr>
        <td align="center" bgcolor="#ffefdf" style="border&#58;1px solid #7f0000">
          Ούι!
        </td>
      </tr>
    </table>
  </body>
</html>
(το ούι είναι Γιαννιώτικο) :)

edit: το xml mode που λέει ο cherouvim το αναφέρει στο http://www.quirksmode.org/css/quirksmode.html.
Εγώ απ' ότι κατάλαβα, σε quirks mode μπαίνεις αν θες να υποστηρίξεις IE <= 5.5.
Αυτό που ΔΕΝ κατάλαβα είναι γιατί λέγεται strict mode, για να μας μπλέκει με το strict.dtd;;;;; :hammer:

Ξανά-edit: τώρα είδα ότι το είχε πει και ο patriot, αν και το padding δε χρειάζεται...

Άβαταρ μέλους
cherouvim
Script Master
Δημοσιεύσεις: 3137
Εγγραφή: 13 Ιούλ 2005 22:56
Τοποθεσία: Athens, Greece
Επικοινωνία:

Height 100% σε standards mode

Δημοσίευση από cherouvim » 19 Αύγ 2006 00:02

Το mode είναι standards mode. Το DTD είναι strict.

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

Height 100% σε standards mode

Δημοσίευση από skeftomilos » 19 Αύγ 2006 03:44

Alkisg thanks για την πρόταση αλλά δε θέλω να χάσω τα περιθώρια. Αυτό είναι το πρόβλημα που με τρελαίνει με τη strict mode, ότι μόλις μπουν περιθώρια (margin ή padding) ξεχειλώνει το layout.

Cherouvim αν μπει XML declaration τότε θα πρέπει να μετατραπεί η HTML σε XHTML, έτσι δεν είναι; Όμως δε θέλω κάτι τέτοιο, η HTML μου κάνει. Το θέμα είναι αν η strict mode είναι όντως δύστροπη με το height 100%, ή κάνω κάτι λάθος.
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

Άβαταρ μέλους
alkisg
Δημοσιεύσεις: 265
Εγγραφή: 03 Ιουν 2005 11:53
Τοποθεσία: Ιωάννινα
Επικοινωνία:

Height 100% σε standards mode

Δημοσίευση από alkisg » 19 Αύγ 2006 12:45

Το πρόβλημα του ύψους το έχω δει αρκετές φορές, ενώ στο πλάτος υπολογίζουν τα margins, στο ύψος δεν τα υπολογίζουν. Δεν ξέρω αν θεωρείται bug ή αναφέρεται σε κάποιο standard. Θα πρέπει στο height του table να αφαιρέσεις τα margins του body, π.χ.
body margin=1%
table height=99%

Υπάρχει κανένας τρόπος να γίνει αφαίρεση PIXEL; Δηλαδή αν δώσεις
body margin=5px
μετά να πεις κάτι σαν
table height=100% - 5px

Αν θυμάμαι καλά, ο IE τουλάχιστον υποστήριζε expressions...

Επίσης, αντί να έχεις margin στο body μπορείς να βάλεις padding στο table, οπτικά θα είναι ίδιο και θα φαίνεται και σωστά...

Άβαταρ μέλους
cherouvim
Script Master
Δημοσιεύσεις: 3137
Εγγραφή: 13 Ιούλ 2005 22:56
Τοποθεσία: Athens, Greece
Επικοινωνία:

Height 100% σε standards mode

Δημοσίευση από cherouvim » 19 Αύγ 2006 12:49

Δεν γίνεται να πεις 100% - 5πχ, και τα css expressions καλό είναι να τα αποφεύγουμε.

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

Height 100% σε standards mode

Δημοσίευση από skeftomilos » 19 Αύγ 2006 17:18

alkisg έγραψε:Το πρόβλημα του ύψους το έχω δει αρκετές φορές, ενώ στο πλάτος υπολογίζουν τα margins, στο ύψος δεν τα υπολογίζουν. Δεν ξέρω αν θεωρείται bug ή αναφέρεται σε κάποιο standard
Όλοι οι browsers είναι συνεπείς σε αυτή τη συμπεριφορά, οπότε πρέπει να είναι standard.
alkisg έγραψε:Επίσης, αντί να έχεις margin στο body μπορείς να βάλεις padding στο table, οπτικά θα είναι ίδιο και θα φαίνεται και σωστά...
Μακάρι να ήταν τόσο απλό. Για να δημιουργηθεί οπτικά το περιθώριο θα πρέπει να προστεθεί μέσα στο table ένα element με background και border, και με height 100%. Και τότε να τι συμβαίνει:

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http&#58;//www.w3.org/TR/REC-html40/loose.dtd"> 
<html>
  <head>
    <title>Height-100-percent</title>
  </head>
  <body style="height&#58;100%;margin&#58;0px">
    <table cellpadding="0" cellspacing="0" width="100%" height="100%">
      <tr>
        <td style="padding&#58;10px" height="100%">
          <div style="height&#58;100%;background-color&#58;#ffefdf;border&#58;1px solid #7f0000">
            Ούι! Ούι! Μάνα μου!
          <div>
        </td>
      </tr>
    </table>
  </body>
</html>
Εικόνα

Το περιθώριο πρέπει να είναι σε pixel, όχι τοις εκατό.
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

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

Height 100% σε standards mode

Δημοσίευση από skeftomilos » 19 Αύγ 2006 17:34

cherouvim έγραψε:Το mode είναι standards mode. Το DTD είναι strict.
Ουπς! Thanks Cherouvim, τώρα το έπιασα. Άλλαξα και τον τίτλο του θέματος.
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

Άβαταρ μέλους
alkisg
Δημοσιεύσεις: 265
Εγγραφή: 03 Ιουν 2005 11:53
Τοποθεσία: Ιωάννινα
Επικοινωνία:

Height 100% σε standards mode

Δημοσίευση από alkisg » 19 Αύγ 2006 18:48

Το να βάλεις το border είναι το εύκολο κομμάτι... το δύσκολο είναι ότι αν αρχίζεις και βάζεις κι άλλα elements με height=... (όπως έβαλες το div στο παράδειγμά σου), τότε γίνεται μπάχαλο.

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http&#58;//www.w3.org/TR/REC-html40/loose.dtd">
<html>
  <head>
    <title>Height-100-percent</title>
  </head>
  <body style="margin&#58;0px; height&#58;100%">
    <table cellpadding="0" cellspacing="10px" style="width&#58;100%; height&#58;100%; background-color&#58;yellow">
      <tr>
        <td style="background-color&#58;silver;border&#58;1px solid red">
          Ούι! Ούι! Μάνα μου!
        </td>
      </tr>
    </table>
  </body>
</html>
Συνημμένα
height.png
Φαίνεται σωστά σε IE και FireFox...

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

Height 100% σε standards mode

Δημοσίευση από skeftomilos » 19 Αύγ 2006 19:22

cellspacing!

Yeap, αλλά αυτό δεν επιτρέπει να οριστούν ανεξάρτητα τα περιθώρια left, rignt, top, bottom. :(
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

Άβαταρ μέλους
alkisg
Δημοσιεύσεις: 265
Εγγραφή: 03 Ιουν 2005 11:53
Τοποθεσία: Ιωάννινα
Επικοινωνία:

Height 100% σε standards mode

Δημοσίευση από alkisg » 19 Αύγ 2006 19:49

Αυτό με borders?

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http&#58;//www.w3.org/TR/REC-html40/loose.dtd">
<html>
  <head>
    <title>Height-100-percent</title>
  </head>
  <body style="margin&#58;0px; height&#58;100%">
    <table cellpadding="0" cellspacing="0px" style="width&#58;100%; height&#58;100%; background-color&#58;yellow; border-left&#58; 30px solid red; border-right&#58; 40px solid green; border-top&#58; 50px solid blue;
    border-bottom&#58; 60px solid purple">
      <tr>
        <td style="background-color&#58;silver; border&#58;1px solid red">
          Ούι! Ούι! Μάνα μου!
        </td>
      </tr>
    </table>
  </body>
</html>
Συνημμένα
height.png
height.png (13.01 KiB) Προβλήθηκε 1875 φορές

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

Height 100% σε standards mode

Δημοσίευση από skeftomilos » 20 Αύγ 2006 03:49

Λευκά borders στο table αντί για margin! Πολύ εφευρετικό! :D

Θα πω ένα πιο συγκεκριμένο παράδειγμα από πραγματική περίπτωση, ένα iframe που να καταλαμβάνει όλη τη σελίδα, εκτός από κάποια περιθώρια γύρω-γύρω. Το κόλπο με τα borders πιάνει στον Firefox, αλλά όχι στον IE και τον Opera:

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http&#58;//www.w3.org/TR/REC-html40/loose.dtd"> 
<html>
  <head>
    <title>Height-100-percent</title>
  </head>
  <body style="height&#58;100%;margin&#58;0px">
    <table cellpadding="0" cellspacing="0" width="100%" height="100%" style="border&#58;20px solid #ffefdf">
      <tr>
        <td height="100%">
          <iframe width="100%" height="100%"></iframe>
        </td>
      </tr>
    </table>
  </body>
</html>
Εικόνα

Εικόνα

Το screenshot του Opera δείχνει επιπλέον για πιο λόγο χρειάζεται ΚΑΙ padding:0px στο body.
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

Απάντηση

Επιστροφή στο “HTML και XHTML”

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

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