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 23.12.2003 13:14
max-width - und wie gehts im IE
 
Suche schon länger eine Lösung um dem IE eine max-width beizubringen.

min-width kann er zwar auch nicht, aber da gibt es ja bewährte Lösungen.

:shock: Skalieren ist ja Prima, nur im Zeitalter von Bildschirmen die über 1260 Pixel Breite darstellen können wäre eine Breitenbegrenzung sinnvoll.

Beispiel:
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: 0px 2px 0 2px;
                background-color: #FF9933;
                color: #000000;
                font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
                font-size: 101%;
                text-align: center;
        }

        #frame {
                width: 98%;
                min-width: 560px; /* 760px */
                max-width: 800px; /* 1000px */
                margin: 3px auto 0px auto;
                border: 1px solid #222222;
                padding: 0 5px 5px 5px;
                background-color: #FEFEFE;
                color: inherit;
                text-align: left;
        }
        p {
                margin: 1.4em 0;               
                font-size: 0.8em;
        }
        -->
</style>

</head>
<body>

<div id="frame">
   

Sollte jetzt alles wieder links stehen.....</p>
</div>

</body></html>
Mozilla kann es natürlich :arrow: wäre auch interessant zu wissen welche BROWSER es noch gibt, die es nicht können. :roll:

Flocke 29.12.2003 14:18
Hi Ulle,

ich habe mal einen kleinen Versuch gemacht, allerdings ohne das Endergebnis voll an Deine Ausgangslage wieder anzugleichen. Ich habe es zumindets geschafft, dem IE die Maximalbreite beizubringen. Der Gag liegt in einem zusätzlichen DIV, daß Du im Dein Frame-DIV legst. Ich habe es "wrapper" genannt:

Code:
  #wrapper {
      max-width: 700px;
      width: 700px;
      overflow: hidden;
  }
Die 700px habe ich genommen, damit ich den Effekt auf meinem 1024 auch früh genug sehe :))

Ist diese Lösung für dich tragbar ??

Grüße aus Mainz,

Jens

ulle 29.12.2003 19:17
Code:
width: 700px;
:shock: Durch die Fixe width Angabe ist doch jetzt :arrow: min-width = max-width ; d.h. unwirksam.


Nein, das ist nicht gut. Der CLOU ist ja das sich die WEBsite (bzw. #frame) solange auf 98% bewegt bis die max-width erreicht ist.

min-width und max-width sind ja auch für relative width-Angaben gedacht.

Oder habe ich Deinen Ansatz nicht verstanden :?:

Flocke 29.12.2003 19:31
Hi Ulle,

Du hast ja recht, daß mit meinem Ansatz min-width = max-width ist. :oops: Der Effekt, den Du haben willst, nämlich eine Höchstbreite festzulegen, wird dadurch aber trotzdem erreicht. 8)

Ich habe zudem dem wrapper nicht min-width zugewiesen. Ich habe so den #Eindruck beim Testen gehabt, der gewünschte Effekt träte daruch ein. Vielleicht habe ich aber auch nur Deine Anforderung falsch verstanden.

ulle 29.12.2003 19:44
:D Na ja, wenigstens muß man auf Deiner WEBsite nicht verhungern...


Übrigens hast Du da ja wohl auch noch ein Problem mit der Breite, gell.

:shock: Sobald ein Scroll-Balken vertikal erscheint, hast Du auch einen horizontal.

Ich schätze mal dass Du solch eine Eigenschaft definiert hast :arrow:

Code:
html,body {
  overflow: auto;
}
macht nur Sinn, wenn Du die max-height von 100% nie überschreitest.

Flocke 30.12.2003 00:41
:oops: Falsch geschätzt :oops: [Auch wenn das jetzt hier sehr OT ist.]

<OT>
Meine Webseite (ich schätze Du meinst die Rezepte u d nicht die anderen Bereiche) stammt noch aus einer Zeit, in der ich CSS nur zur absoluten Positionierung und für Textauszeichnungen nutzte. Mehr kannte ich nicht. Die Seite selber wird per Javascript dank einer Dreamweaver-Extension von ProjectSeven beim Aufrufen zusammengebaut.

Heute würde ich sowas nie mehr machen, doch damals .... (das war vor etwa zwei Jahren).

Und der Relaunch zieht sich leider ein wenig hin. Diesmal wirds korrekt.
</OT>

Doch was hat das damit zu tun, ob der Ansatz funktioniert ? Er ist leider nicht so perfekt, wie man es sich wünschen würde. Oder doch ? Funktioniert er nun so, wie Du das willst ? Bei Deiner ersten Antwort hattest Du offenbar noch nicht getestet, nur eine Annahme gemacht.

ulle 30.12.2003 10:45
Zitat:
Bei Deiner ersten Antwort hattest Du offenbar noch nicht getestet, nur eine Annahme gemacht.
:arrow: auch getestet

Es funktioniert nicht wie gewünscht. Der [FRAME-Container] soll ja Skalierbar sein, ein minimum nicht unterschreiten, was man im IE mit einem BLIND-Gif erreichen kann, und ein maximum nicht überschreiten.

Sobald eine width-Angabe ohne %-Wert getroffen wird ist der Bereich FIX.

Alex 30.12.2003 10:59
ich hab mir da auch schon x mal den kopf drüber zerbrochen und bin bisher genau aus diesem grund immer wieder bei fixer breite gelandet. bis man sowas problemlos machen kann werden wohl noch locker 3-4 jahre vergehen, traurig aber wahr :(

es gibt aber eine recht einfache lösung mit javascript, hab das mal irgendwo gesehen. ich persönlich würde die dann auf jeden fall nutzen, wenn ich eine variabel breite seite gestalten wollte. es ist immerhin für einen großteil der user von vorteil, die leute ohne js kriegen dann halt kilometerlange zeilen.

gerrit 03.01.2004 20:49
Gibt ne Lösung...
 
Tja, das ist in der Tat n kniffliges Problem mit der mangelnden Unterstützung von max-width in IE.
Ich persönlich verwende trotzdem flüssige Layouts aus folgenden Gründen:
1. Niemand mit einer hohen Auflösung surft fullscreen (und wenn, dann macht er/sie es absichtlich und möchte gerne lange Textzeilen haben)
2. Mit fixer Weite schliesst man wiederum diejenigen mit kleineren Bildschirmen aus (Subnotebooks etc.), oder macht die Breite so klein, dass IMHO zuviel Bildschirmßplatz verschwendet wird

Mal ganz abgesehen davon: der IE kann (perverserweise, imho) JavaScript-Ausdrücke als Eigenschaftswerte in CSS interpretieren. Wie man damit max-width simuliert wird unter http://www.svendtofte.com/code/max_width_in_ie/ ausführlich beschrieben. Ist allerdings nicht ganz trivial...

Alex 04.01.2004 13:20
Re: Gibt ne Lösung...
 
Zitat:
Zitat von gerrit
1. Niemand mit einer hohen Auflösung surft fullscreen (und wenn, dann macht er/sie es absichtlich und möchte gerne lange Textzeilen haben)
da ist was dran, fällt mir bei mir selbst in letzter zeit auch auf. soweit hab ich noch gar nicht gedacht :)

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 ????

ulle 12.01.2004 16:18
wie gehen die denn genau :?:

Flocke 12.01.2004 16:25
guckstdu: http://msdn.microsoft.com/workshop/a...omment_ovw.asp

Beispiel:
Code:
<!--[if gte IE 5]>
    <link href="deinCSS.css" rel="stylesheet" type="text/css">
<![endif]-->
Du kannst das mit gte IE5 ruhig so lassen, denn Conditional Commenst werden nur vom IE PC ab Version 5 verstanden. Weder der Mäck noch der IE 4 können was damit anfangen. Ist auch nicht schlimm, denn wer den IE 4 hat ist eh selbst dran schuld und der IE Mäck ist sowieso was ganz anderes und hat vollkommen andere Fehler, als die Windoof-Variante.


Alle Zeitangaben in WEZ +2. Es ist jetzt 05:08 Uhr.

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

© Dirk H. 2003 - 2023