XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   Knowledge Base (http://xhtmlforum.de/forumdisplay.php?f=79)
-   -   max-width - und wie gehts im IE (http://xhtmlforum.de/showthread.php?t=32149)

ulle 10.01.2004 12:58

Ein Test :arrow:
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//DE" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"  xml:lang="de">
<head><title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style type="text/css">  <!--
  html,body {
      margin: 0px;
      padding: 3px 2%;
      background-color: #FF9933;
      color: #000000;
      font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
      font-size: 101%;
  }

  #frame {
    min-width: 760px; /* 760px */
    max-width: 900px; /* 1000px */
        margin: 0px auto;
  }

  #inner {
      border: 1px solid #000000;
      padding: 3px 5px;
      background-color: #FEFEFE;
  }
  p {
      margin: 1.4em 0;     
      font-size: 0.8em;
  }
  -->
</style>

</head>
<body><div id="frame">

<div id="inner">
       

Inhalt jeglicher Form.....</p>
</div>

</div></body></html>

Nun dem IE bringen wir wohl kein max-width bei. Okay

JavaScript kommt für mich nicht in Frage !

Ich habe jetzt nochmal einen Versuch zumindest einen optischen Effekt zu erreichen, bzw. die Verbreiterung im IE auszubremsen.

Könnte mal jemand diese Veranstaltung auf anderen Browsern sich anschauen.

Mozilla / Opera zentrieren schön, bzw, stellen auch den [max-width] ein.

IE6 ist in der [witdh] "gebremst", weil sich der relative padding des BODY auswirkt, und zentriert auch.

Hat jemand noch andere Möglichkeiten zum Testen

gerrit 10.01.2004 16:24

Merkwürdigerweise hat Safari dein Beispiel garnicht gemocht. Irgendwas im CSS-Code hat ihn den gesamten Block verschlucken lassen, keine Formatierungen wurden angezeigt. Nichtmal wenn ich einzelne Eigenschaften kopiert habe, hat er sie verwenden wollen. Ich tippe mal auf Encoding als Ursache. Ist ja auch egal, ich habe einfach dein Beispiel mit dem unteren Code nochmal versimplifizert neu erstellt, und alles funktioniert einwandfrei.

Ein paar Fragen/Anmerkungen: Wozu die vielen verschachtelten div's?
Warum hast du min-width gesetzt, warum sollte auf zB PDAs oder Fenstern die kleiner sind als 760px unbedingt ein horizontaler Scrollbalken kommen? Und vor allem: warum hast dus auf 760px gesetzt, so kommen dank Padding auch bei 800x600 horizontale Scrollbalken.

Warum verwendest du den XHTML1.1-Doctype? Den musst du nämlich vom Webserver her als MIME-Typ Application/xml+xhtml ausliefern. Außer Mozilla versteht das keiner, und der Quellcode wird als XML-Tree dargestellt. Wenn du die Seiten als text/html senden willst, musst du dich auf XHTML1.0 beschränken.


Ausserdem: IMHO macht max-width nur Sinn in Kombination mit einer Angabe in em. Denn sonst skaliert die Textspalte bei Schriftgrößenänderungen nicht mit und es kann zu unlesbaren Ergebnissen führen. Doch Lesbarkeit ist doch gerade das Ziel dieser ganzen max-width-Geschichte, oder?

Ausserdem verstehe ich nicht, warum du durch die expression()-Technik nicht auch Internet-Explorer-Usern die Möglichkeit geben willst, von max-width zu profitieren. Es beeinträchtigt ja vernünftige Browser in keinster Weise, und verlässt sich auch nicht auf JS.

Code:

<html>
<head>
<style type="text/css">

body {
  background: #f93;
  margin: 0;
  padding: 3px 2%;
  font: .76em Verdana, sans-serif;
}

p {
  min-width: 760px;
  max-width: 900px;
  border: thin solid black;
  padding: 3px 5px;
  margin: auto;
}
</style>
</head>
<body>


bla</p>
</body>
</html>


ulle 10.01.2004 19:10

Zitat:

Warum verwendest du den XHTML1.1-Doctype? Den musst du nämlich vom Webserver her als MIME-Typ Application/xml+xhtml ausliefern. Außer Mozilla versteht das keiner, und der Quellcode wird als XML-Tree dargestellt. Wenn du die Seiten als text/html senden willst, musst du dich auf XHTML1.0 beschränken.
Ach was :arrow: das wäre mir neu, zumal mein Server die Seiten ausliefert, ohne Probleme und definitionen.

:shock: http://www.xhtmlforum.de/viewtopic.php?t=711

Da ist genau diese diskussion.......

gerrit 10.01.2004 20:35

Zitat:

Zitat von ulle
Ach was :arrow: das wäre mir neu, zumal mein Server die Seiten ausliefert, ohne Probleme und definitionen.

Dann freue ich mich dir etwas neues sagen zu dürfen.
text/html ist der MIME-Typ für HTML-Dokumente.
application/xml ist der MIME-Typ für XML-Dokumente.

Wenn du Dokumente nicht mit dem richtigen Inhaltstyp auslieferst (also zB vom Webserver den Content-Type-HTTP-Header richtig setzen lässt), kann das Benutzerprogramm nicht erkennen, ob es sich um XML oder HTML handelt.

XHTML 1.0 ist, wie du sicherlich weißt, eine Reformulierung von HTML 4.01 in XML. Es wurde so gestaltet, dass es vollkommen abwärtskompatibel zu HTML ist. Daher ist eine Auslieferung als text/html gestattet.

XHTML1.1 ist dagegen NICHT vollkommen abwärtskompatibel. Es ist mehr oder weniger eine neue Sprache/Sprachfamilie. Es muss als application/xhtml+xml ausgeliefert werden (nicht "xml+xhtml" wie ich aus Versehen oben fälschlicherweise schrieb). Wenn man kompatibilität erreichen will, muss man XHTML1.0 verwenden.

s. dazu auch:
http://www.hixie.ch/advocacy/xhtml
http://www.w3.org/TR/xhtml-media-types/

Nur weil etwas *funktioniert* (so groß sind die Unterschiede zwischen XHTML1.0(strict) und XHTML1.1 nicht, was den Sprachumfang betrifft), heisst nicht, dass es *richtig* ist. Deine Dokumente können nicht als XML geparst werden, sondern werden als HTML betrachtet. Das mag jetzt noch keine Folgen haben (da Browser afaik XHTML eh nur als HTML betrachten und keine XML-Well-Formedness-Tests durchführen). Dass kann und wird sich aber in Zukunft ändern.

Flocke 11.01.2004 14:00

Mod: Es wir OT
 
Hallo Ulle, hallo Gerrit,

ich finde die Diskussion interessant und auch wichtig. Ich denke, wir sollten in irgendeiner Form eine Zusammenfassung der Erkenntnisse in CSS4You an prominenter Stelle integrieren.

ABER: Die Diskussion über XHTML 1.1 (die z.B. Mark Pilgrim sehr vehement geführt hat) gehört nicht in dieses Forum und zu dieser Frage. Deshalb bitte ich Euch [als Mod und Menschenfreund :)], diese Diskussion hier zu beenden und eventuell, da würde es Sinn machen, im XHTML-Forum weiterzuführen.

In dieses Froum gehören allerdings Lösungsvorschläge zu Ulles Frage. Mich würde mal interessieren, ob nun mein Vorschlag oder der Linktip von Gerrit die ersehnte Problemlösung gebracht haben.

Danke für die Aufmerksamkeit :)

ulle 12.01.2004 08:43

@gerrit

:arrow: ich würde gerne dieses Thema definitiv zu einer richtigen Lösung bringen.

Hierfür schlage ich unten genannten THREAD als Basis vor, weil er auf einer Diskussion aus dem Sommer aufsetzt.


Hier sollte es weiter gehen :arrow:
http://www.xhtmlforum.de/viewtopic.php?t=713

ulle 12.01.2004 09:44

Zitat:

Ein paar Fragen/Anmerkungen: Wozu die vielen verschachtelten div's?
Der innerste Div sollte der Inhalt für die gesamte Website werden, Layout, der mittler Div [frame] umgeht das BOX-Model (zb. border +1px beim [inner]) falls eine Breite für DIV-frame angegeben wird (zB. 96%). Zugegeben wird im Beispiel nicht benötigt.

Ziel ist es nach wie vor einen max-width für den IE zu bekommen !!!

Durch den relativen Padding im Body wollte ich nur erreichen das beim skalieren der WEBsite mit dem IE der [frame]-Div relative weniger breit wird. Natürlich ist der effekt nicht spektakulär.........


Zitat:

IMHO macht max-width nur Sinn in Kombination mit einer Angabe in em
Also ich verstehe [width = relative] und [min/max-width = static] , und wenn ich keine [width]-Angabe im DIV-Element (=Blockelement) vorgeben, dann ist der Container relative breit, zumindest wenn das Eltern-Element, in diesem Fall der BODY keine Breitenangabe besitzt.

_________________________


So hier nochmal das gewünschte Layout :arrow:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//DE" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"  xml:lang="de">
<head><title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style type="text/css">  <!--
        html,body {
                margin: 0;
                padding: 3px 2%;
                background-color: #FF9933;
                color: #000000;
                font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
                font-size: 101%;
        }
       
        #frame {
                min-width: 760px;
                max-width: 900px;
                margin: 0px auto;
                border: 1px solid #000000;
                padding: 3px 5px;
                background-color: #FEFEFE;
        }
        p {
                margin: 1.4em 0;       
                font-size: 0.8em;
        }
  -->
</style>

</head>
<body>

<div id="frame">
 

Inhalt jeglicher Form.....</p>
 

Inhalt jeglicher Form.....</p>
 

Inhalt jeglicher Form.....</p>
</div>

</body></html>

Zitat:

Ausserdem verstehe ich nicht, warum du durch die expression()-Technik nicht auch Internet-Explorer-Usern die Möglichkeit geben willst, von max-width zu profitieren
:?: Was meinst Du damit

Alex 12.01.2004 15:05

das meint er:
http://www.svendtofte.com/code/max_width_in_ie/
insbesondere dieses bsp hier:
http://www.svendtofte.com/code/max_w...dth_in_ie.html
funktioniert aber auch nur bei aktiviertem javascript und ist foglich nicht die von dir gewünschte lösung

ulle 12.01.2004 15:54

Code:

#frame {
        width:expression(document.body.clientWidth > 900? "900px": "auto" );
        min-width: 760px; /* 760px */
        max-width: 900px; /* 1000px */
        margin: 0px auto;
        border: 1px solid #000000;
        padding: 3px 5px;
        background-color: #FEFEFE;
}

Okay, soweit so gut :arrow: ich kann keine HACKs leiden (ist ja bekannt)

[edit 29.06.2004]
IE-PRINT BUG
siehe hier :arrow: http://www.xhtmlforum.de/viewtopic.php?p=5933#5933
[/edit]

Sogar im IE6 zentriert, ich dachte das ging nicht wirklich :!:

nur leider, wie zu erwarten :arrow:


Code:

Ergebnisse des W3C CSS-Validator mit Objekt:
:
:
:
Fehler
URI : file://localhost/C:\localspace\PHP-Space\buch_test.css
Zeile: 0 Kontext : #frame
Ungültige Nummer : widthEinlese-Fehler - document.body.clientWidth > 900? "900px": "auto" )

Wie kann man den dann diese CSS-Angabe vor dem Validator verstecken.

Flocke 12.01.2004 16:10

Vielleicht durch Conditional Comments verstecken ????


Alle Zeitangaben in WEZ +2. Es ist jetzt 03:59 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2019, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2019