|
|||
![]()
Hallo,
das leidige Thema IE ![]() Diesem eine max-width über mit Hilfe von Expression (JavaScript innerhalb von CSS) und Conditional Comment beizubringen ist keine große Sache. Abgesehen davon dass der IE sich nur die Pixel-Breite des Viewports auslesen läßt, also nicht etwa andere Einheiten wie "em", aber gut - wir nehmen ja was geht. Code:
<!--[if lt IE 7]> <style type="text/css"> #id1, #id2 { width:expression(document.body.clientWidth > 900 ? "54em": "auto" ); } </style> <![endif]--> min-width dagegen läßt sich leider nicht so trivial einstellen. Da müssen schon schwerere Geschütze an den Start. "IE :hover/:focus auf alle Elemente (expression)" konsequent weitergedacht bedeutet zwar einen gehbaren Lösungsansatz, bedarf aber auch einem Event (leider). Code:
<!--[if lt IE 7]> <style type="text/css"> body { ulle: expression( this.onmouseover = new Function ("if (document.body.clientWidth < 760) { this.className = 'body-min-width'; }") ); } </style> <![endif]--> ![]() Dies ist aber eher SUB-optimal, onload-Event wäre wohl optimal, leider funktioniert dieser nicht in der "expression" Konfiguration. Somit ist zusätzlich "echtes" JavaScript für dieses Addon wohl vorausgesetzt. Trotzdem poste ich mal den Ansatz, evtl. hat ja jemand noch eine weitere Idee ![]() Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de-DE" lang="de"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>xxxx</title> <style type="text/css" media="screen,projection" title="Druckvorschau => Markup-Semantic"> /*<![CDATA[*/ * { margin: 0; padding: 0; border-collapse:collapse; border-spacing: 0; } html[xmlns] { height : 100%; padding-bottom : .005em; } html, body { color: #000000; background: #DDDDDD; line-height: 1.45; } body { font-size: 100.01%; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; padding: 5px; min-width: 46em; } .body-min-width { width: 46em; } #id1, #id2 { margin: 1em auto; border: 1px solid #000000; padding: 1em; background-color: #FFFFFF; max-width: 54em; } /*]]>*/ </style> <!--[if lt IE 7]> <style type="text/css"> body { ulle: expression( this.onmouseover = new Function ("if (document.body.clientWidth < 760) { this.className = 'body-min-width'; }") ); } #id1, #id2 { width:expression(document.body.clientWidth > 900 ? "54em": "auto" ); } </style> <![endif]--> </head><body> <div id="id1"> textfluss...... </div> <div id="id2"> link-test </div> </body></html>
__________________
</ulle> |
Sponsored Links |
Sponsored Links |
|
|||
![]()
Hallo,
ich habe eine schicke Lösung für dich, welche min-width beim IE simuliert ohne Javascript zu verwenden. http://www.cssplay.co.uk/boxes/minwidth.html Es werden die Themen min-width im Quirks und Normalen Modus behandelt. Dein Problem wurde übrigens von mir hier schon zur Frage gestellt und beantwortet ![]() |
|
|||
![]()
@heiko_rs - ja ist mir bekannt, trotzdem Danke
@klopfdreh - es soll aber im Standard Modus funktionieren! _______________ Folgende Überlegungen: - min/max-width für den IE kleiner Version 7 soll realisiert werden - mit Conditional Comments kann ich ja alles verstecken - Expression ist JavaScript (leider nur einzeilig) - Richtiges JavaScript ![]() Wichtig -> es soll ein RESIZE des Window und der Schriftgrad behandelt werden. Es gibt bestimmt eine Menge Scripts die dies können, aber einlesen, einfach benutzen wollte ich nicht. Leider bin ich mit JavaScript ungefähr genauso im Dialog wie mit einem Japaner ![]() Nach 2 Tagen "try and error" habe ich folgende Lösung für umschliessende Container. Diese sind mit der Einheit EM definiert um den Schriftgrad zu berücksichtigen. In der Annahme das sehschwache Nutzer auch einen großeren Bildschirm benutzen, aber nicht müssen (scrollbalken). Um den Schriftgrad zu erkennen habe ich einen Container als Referenz zusätzlich eingesetzt, dieser ist 1em hoch bzw. breit und wird ins Nirvana verschoben. Somit ist der Bezug von einem EM in Pixel gegeben und die Berechnung für die Eigenschaften min/max-width möglich. Gleichzeitig wird dieser zusätzlich Container auf RESIZE überwacht, das wäre eine Schriftgradveränderung, und reagiert. Die berechneten Werte werden beim Laden des Dokuments gesetzt. Ich habe meinen Develop-Alert noch im Script gelassen, somit ist ein einfacheres Nachvollziehen bzw. Testen möglich. Evtl. gibt es ja jemand der JavaScript besser beherrscht und das Script verbesseren kann. Das gesamte "Teil" wird am Ende des Dokuments eingesetzt, Container-ID und min/max-Werte sind einzustellen: Zitat:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de-DE" lang="de"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>xxxx</title> <style type="text/css" media="screen,projection" title="Druckvorschau => Markup-Semantic"> /*<![CDATA[*/ * { margin: 0; padding: 0; border-collapse:collapse; border-spacing: 0; } html[xmlns] { height : 100%; padding-bottom : .005em; } html, body { color: #000000; background: #DDDDDD; line-height: 1.45; } body { font-size: 100.01%; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; padding: 5px; background-color: #AAAAAA; } #idname1, #idname2, #idname3 { margin: 0 auto 1em; border: 1px solid #FF0000; padding: 1em; background-color: #FFFFFF; max-width: 56em; min-width: 45.3em; } p { font-size: .8em; background-color: #BBBB00; } /*]]>*/ </style> </head><body> <div id="idname1"> textfluss...</p> <p style="text-align: right;">...textfluss</p> </div> <div id="idname2"> textfluss...</p> <p style="text-align: right;">...textfluss</p> </div> <div id="idname3"> textfluss...</p> <p style="text-align: right;">...textfluss</p> </div> <!--[if lt IE 7]> <div onresize="window.history.go(0);" id="em-lenght" style=" width: 1em; height: 1em; position:absolute; top: -1000px; left: -1000px;"></div> <script type='text/javascript'> idList = new Array(); /* set min-width / max-width in (em) by hand */ var min = 45.3; var max = 56; /* set boxModel Values from BODY and IDs (addition) */ var boxModelFix = 12; // Pixel var boxModelRelativ = 2; // EM /* set all #id */ idList[0] = 'idname1'; idList[1] = 'idname2'; idList[2] = 'idname3'; function Element (id) { this.id = id; } for (var cnt=0 ; cnt < idList.length; cnt++) { idList[cnt] = new Element (idList[cnt]); } function checkBodyWidth(handle) { var em = document.getElementById("em-lenght").offsetWidth boxModelValues = Math.ceil(em * boxModelRelativ) + boxModelFix; maximal = Math.ceil(em * max); minimal = Math.ceil(em * min); beginbody = document.body.offsetWidth; var value = 'auto'; if (document.body.offsetWidth > (maximal + boxModelValues) ) { value = maximal+'px'; } maxv = value; if (document.body.offsetWidth <= (minimal + boxModelValues) ) { value = minimal+'px'; } minv = value; for (var i=0 ; i < idList.length; i++) { document.getElementById(idList[i].id).style.width = value; } alert ( 'Handle: ' + handle +'\n' +'- - - - - - - - - - -\n' +'body(begin): ' + beginbody +'\n' +'em: ' + em +'\n' +'- - - - - - - - - - -\n' +'maximal: '+ (maximal + boxModelValues) + ' / '+max+'em ' + '+ boxModel\n' +'value(max): ' + maxv +'\n' +'- - - - - - - - - - -\n' +'minimal: '+ (minimal + boxModelValues) + ' / '+min+'em ' + '+ boxModel\n' +'value(min): ' + minv +'\n' ); return; } /* Set width value */ checkBodyWidth('load/Markup'); /* Control window.onresize */ function windowSize() { if (document.body.offsetWidth) { return document.body.offsetWidth; } else { return 0; } } function newLoad () { if (windowSizeSave != windowSize() ) { window.history.go(0); } } if (!window.windowSizeSave && document.body.offsetWidth) { window.onresize = newLoad; windowSizeSave = windowSize(); } </script> <![endif]--> </body></html>
__________________
</ulle> |
|
|||
![]()
Könnte jemand mal dieses Test-Case im IE5 bzw. 5.5 testen, es ist das gleiche wie oben - ich habe lediglich den JS-Alert gelöscht.
Im IE6 funktioniert es gut und ergibt bis auf einen kleinen Rundungsfehler die gleichen Ergebnise wie im FF 1.07 und Opera 8.5. Es reagiert auf Änderungen im Schriftgrad und der Fenstergröße. DANKE Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de-DE" lang="de"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>xxxx</title> <style type="text/css" media="screen,projection" title="Druckvorschau => Markup-Semantic"> /*<![CDATA[*/ * { margin: 0; padding: 0; border-collapse:collapse; border-spacing: 0; } html[xmlns] { height : 100%; padding-bottom : .005em; } html, body { color: #000000; background: #DDDDDD; line-height: 1.45; } body { font-size: 100.01%; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; padding: 5px; background-color: #AAAAAA; } #idname1, #idname2, #idname3 { margin: 0 auto 1em; border: 1px solid #FF0000; padding: 1em; background-color: #FFFFFF; max-width: 56em; min-width: 45.3em; } p { font-size: .8em; background-color: #BBBB00; } /*]]>*/ </style> </head><body> <div id="idname1"> textfluss...</p> <p style="text-align: right;">...textfluss</p> </div> <div id="idname2"> textfluss...</p> <p style="text-align: right;">...textfluss</p> </div> <div id="idname3"> textfluss...</p> <p style="text-align: right;">...textfluss</p> </div> <!--[if lt IE 7]> <div onresize="window.history.go(0);" id="em-lenght" style=" width: 1em; height: 1em; position:absolute; top: -1000px; left: -1000px;"></div> <script type='text/javascript'> idList = new Array(); /* set min-width / max-width in (em) by hand */ var min = 45.3; var max = 56; /* set boxModel Values from BODY and IDs (addition) */ var boxModelFix = 12; // Pixel var boxModelRelativ = 2; // EM /* set all #id */ idList[0] = 'idname1'; idList[1] = 'idname2'; idList[2] = 'idname3'; function Element (id) { this.id = id; } for (var cnt=0 ; cnt < idList.length; cnt++) { idList[cnt] = new Element (idList[cnt]); } function checkBodyWidth(handle) { var em = document.getElementById("em-lenght").offsetWidth boxModelValues = Math.ceil(em * boxModelRelativ) + boxModelFix; maximal = Math.ceil(em * max); minimal = Math.ceil(em * min); var value = 'auto'; if (document.body.offsetWidth > (maximal + boxModelValues) ) { value = maximal+'px'; } if (document.body.offsetWidth <= (minimal + boxModelValues) ) { value = minimal+'px'; } for (var i=0 ; i < idList.length; i++) { document.getElementById(idList[i].id).style.width = value; } return; } /* Set width value */ checkBodyWidth('load/Markup'); /* Control window.onresize */ function windowSize() { if (document.body.offsetWidth) { return document.body.offsetWidth; } else { return 0; } } function newLoad () { if (windowSizeSave != windowSize() ) { window.history.go(0); } } if (!window.windowSizeSave && document.body.offsetWidth) { window.onresize = newLoad; windowSizeSave = windowSize(); } </script> <![endif]--> </body></html>
__________________
</ulle> |
|
||||
![]()
Ulle, ich gratuliere dir!
Läuft sehr gut im IE 5.01 und im IE 5.5, nur Firefox 1.04 zickt rum: Der baut einen ebenso sinnlosen wie verwirrenden Scrollbalken ein und zeichnet nach dem Ändern der Fenstergröße komische Fragmente übers Bild (im Screenshot ein weißer Streifen), die im Ernstfall auf Lesetext liegen können… Anbei die Screenshots:
__________________
toscho.de |
|
|||
![]()
Hallo toscho,
danke für Deine Mühe. Zitat:
Zitat:
Zitat:
![]() Ideal für oben gezeigten Anwendungsfall wäre wohl die min-width im BODY festgelegen und nur die max-width Values in den zentrierten Containern. Zuerst hatte ich auch nur mit dem BODY gestestet, das gab aber Probleme mit der Event-Erkennung des RESIZE, da ja der BODY dann eine definierte Größe hatte. Und die 'onresize' Überwachung in den BODY aufnehmen wollte ich auf keinen Fall, sollte ja nur ein Addon sein. Die RESIZE-Überwachung für den Viewport habe ich dann doch bei Selfhtml gefunden. Ob die Methode [window.history.go(0);] wirklich in jedem Fall aus dem Browser-Cache einen Reload zieht habe ich auch noch nicht ausgetestet, aber ich gehe davon aus dass diese wie der Zurück-Button des Browser funktioniert. Ich werde wohl noch eine Verbesserung versuchen.
__________________
</ulle> |
|
||||
![]()
Ich habe jetzt mal nachgeforscht: Schuld an dem weißen Streifen sind die 0.8em für P. Die kollidieren mit meiner Mindestschriftgröße von 14px, was in anderen Browsern kein Problem darstellt, bei Mozilla aber offenbar zu Umrechnungsfehlern führt. Entferne ich die Mindestgröße oder die Verkleinerung aus dem Testcase, verschwindet auch der Streifen.
Hat also nichts mit dem eigentlichen Ansatz zu tun.
__________________
toscho.de |
|
|||
![]() Zitat:
DANKE
__________________
</ulle> |
Sponsored Links |
|
||||
![]()
Oh, und nur als Hinweis für Mitleser: Der Geisterbalken im FF kommt daher:
Code:
html[xmlns] { height : 100%; padding-bottom : .005em; } Hat also auch nichts mit dem eigentlichen Problem zu tun. Gruß Thomas
__________________
toscho.de |
Sponsored Links |
![]() |
Themen-Optionen | |
Ansicht | |
|
|
![]() |
||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Problem mit CSS Menü | FuFi | CSS | 1 | 05.01.2015 16:46 |
Verschiebungen bei größerem Bildschirm | seelefant | CSS | 4 | 28.07.2014 16:43 |
Media Querys - Layout geht wird über den Displayrand angezeigt | DarkNemesis84 | CSS | 9 | 05.05.2013 23:00 |
CSS von Plugin beisst! | expand | CSS | 0 | 28.09.2012 18:44 |
Mozilla zeigt DIV zu oft an | cracki | CSS | 6 | 09.03.2008 16:22 |