nicht angemeldet
min-width IE - px und em in Kombination möglich?
Hallo Forum,
wie es das Thema schon sagt, ich möchte gern eine min-widht für den IE realisieren und probiere grade mit den expressions daran herum.
Bei meiner Recherche bin ich z.B. darauf gestossen
http://www.cameronmoll.com/projects/book/
Cameron Moll hat in seiner css folgendes für den IE notiert:
#container, #footer {
width: expression(document.body.clientWidth < 742? "740px" : document.body.clientWidth > 1202? "1200px" : "auto");
}
Dazu hab ich noch folgendes in einem weblog gefunden:
Bei der Verwendung dieses Codes ist darauf zu achten, dass die abgefragte Breite nicht mit der später festzusetzenden maximalen bzw. minimalen Breite gleich sein darf.
Eine Angabe in der Form:
document.body.clientWidth < 740 ? "740px"
erzeugt einen Absturz des Internet Explorers, sobald man versucht, die Fenstergröße zu ändern.
Deshalb immer einen kleinen Unterschied zwischen den Vergleichszahlen lassen:
document.body.clientWidth < 745 ? "740px"
ok das nur mal vorab.
Ich habe das eben ausprobiert bei meinem Projekt und das sieht ganz gut aus. Scheint auch stabil zu sein. Zuvor hatte ich eben auch diese Probleme mit Abstürzen.
Nun aber meine eigentliche Frage:
ich möchte dass mein wrapper eine Breite von 50em hat. Und eine Mindestbreite von 800px.
Wenn ich das notiere
* html div#wrapper {
width: expression(document.body.clientWidth < 805? "800px" : document.body.clientWidth > 805? "800px" : "auto");
}
hab ich zwar meine Mindestbreite, aber die Höchstbreite ist eben auch in px angeben.
ich kann ja nun nicht px und em kombinieren..oder doch?
Gibts eine Lösung für dieses Problem?
Vielen Dank für Eure Hilfe,
Mel
-
hallo Mel,
ich möchte gern eine min-widht für den IE realisieren
Das möchten sicher Viele, wenn es ihnen auch eher um "min-width" statt um "min-widht" gehen dürfte. Dir ist allerdings bei der Lektüre von SELFHTML beatimmt aufgefallen, daß da deutlich genug angegeben ist: "Beachten Sie: Der Internet Explorer 6 interpretiert diese Angabe noch nicht". Er kanns wirklich nicht.
und probiere grade mit den expressions daran herum.
Was sind das für "expressions"?
Bei meiner Recherche bin ich z.B. darauf gestossen
http://www.cameronmoll.com/projects/book/Hm. Warum verfolgt jetzt der Rest deines postings eine ganz andere Fragestellung als "min-width"?
ich kann ja nun nicht px und em kombinieren..oder doch?
Bei dem von dir angegebenen Beispielcode werden sie nicht "kombiniert". Also wäre es wohl zulässig, wenn auch wirklich nicht schön.
Grüße aus Berlin
Christoph S.
-
Hi,
wie es das Thema schon sagt, ich möchte gern eine min-widht für den IE realisieren und probiere grade mit den expressions daran herum.
warum expression und damit ungültigem CSS?
hab ich zwar meine Mindestbreite, aber die Höchstbreite ist eben auch in px angeben.
ich kann ja nun nicht px und em kombinieren..oder doch?doch - kannst Du. In http://beratungscentrum-monheim.de/ habe ich max-width:65em und min-width:500px umgsetzt. Die Mindestbreite ist hier wegen der Grafiken in px angegeben.
Für den IE gibt es onload hierfür eine kleine Erweiterung:var max = document.getElementById("seite"); if(!max.style.maxWidth) { var v = document.compatMode ? 10.44 : 11.8; var em = v / document.getElementById("imenu").offsetWidth; if(max.offsetWidth*em >65) max.style.marginRight = max.offsetWidth-65/em+"px"; }Die Umrechnung ist experimentell entstanden ;-) und passt für IE 5.01 bis IE6.
Onload finde ich völlig ausreichend, denn wer verändert die (vorher passend formatierte) Fensterbreite schon? Und selbst wenn, passt sich die nächste aufgerufene Seite ja wieder an.freundliche Grüße
Ingo-
Hallo lieber Ingo!
wie es das Thema schon sagt, ich möchte gern eine min-widht für den IE realisieren und probiere grade mit den expressions daran herum.
warum expression und damit ungültigem CSS?Naja ungültig..wenn ich sie in CC´s packe kann ich ja trotzdem validen Code schreiben. Der grösste Vorteil den ich gerade in der Verwendung von expressions sehe ist der recht kleine Aufwand: 1 Zeile in der CSS- Datei und damit hat es sich. WENN es allerdings in der Kombi em-px klappen würde. .
Ich probiere übrigens auch mit reinen CSS-Lösungen wie von Stu Nicholls vorgeschlagen. (Auch eine faszinierende Sache, ABER: Eingriff ins html und nochmal 2 zusätzliche Container für den IE..würde ich liebend gerne vermeiden).
ich kann ja nun nicht px und em kombinieren..oder doch?
doch - kannst Du. In http://beratungscentrum-monheim.de/ habe ich max-width:65em und min-width:500px umgsetzt. Die Mindestbreite ist hier wegen der Grafiken in px angegeben.Ich benötige aus den gleichen Gründen deshalb eine Mindestbreite in px. ich habe das grade ausprobiert und ja- das klappt in der Tat super bei Dir.
Für den IE gibt es onload hierfür eine kleine Erweiterung:
var max = document.getElementById("seite");
if(!max.style.maxWidth) {
var v = document.compatMode ? 10.44 : 11.8;
var em = v / document.getElementById("imenu").offsetWidth;
if(max.offsetWidth*em >65) max.style.marginRight = max.offsetWidth-65/em+"px";
}> Die Umrechnung ist experimentell entstanden ;-) und passt für IE 5.01 bis IE6. > Onload finde ich völlig ausreichend, denn wer verändert die (vorher passend formatierte) Fensterbreite schon? Und selbst wenn, passt sich die nächste aufgerufene Seite ja wieder an. Ich verstehe diese JS-Anweisung leider nicht wirklcih, würde es aber sehr gerne. Könntest Du das bitte ;) im Detail hier eklären? Gibt es noch eine Alternative zu dem body onload? vielen lieben Dank, mel-
Hi,
Naja ungültig..wenn ich sie in CC´s packe kann ich ja trotzdem validen Code schreiben. Der grösste Vorteil den ich gerade in der Verwendung von expressions sehe ist der recht kleine Aufwand: 1 Zeile in der CSS- Datei und damit hat es sich.
Also was eine expression-Zeile kann, sollte wohl auch mit einer Javasciptzeile umzusetzen sein.
Für den IE gibt es onload hierfür eine kleine Erweiterung:
var max = document.getElementById("seite");
if(!max.style.maxWidth) {
var v = document.compatMode ? 10.44 : 11.8;
var em = v / document.getElementById("imenu").offsetWidth;
if(max.offsetWidth*em >65) max.style.marginRight = max.offsetWidth-65/em+"px";
}> Ich verstehe diese JS-Anweisung leider nicht wirklcih, würde es aber sehr gerne. Könntest Du das bitte ;) im Detail hier eklären? Dazu mußt Du Dir den HTML-Teil ansehen. Das DIV #seite umschließt zur Formatierung alle Elemente im body und dessen variable Breite läßt sich auslesen. Um nun die ausgelesenen px in em umzurechnen, lese ich die Breite der UL #imenu aus, die ich ja in em vorgegeben habe. document.compatMode ist eine Browserweiche für den IE6, in dem der DOCTYPE-Switch erst eingeführt wurde. Je nachdem, ob IE6 oder IE5.x ist der empirisch ermittelte "Umrechnungsfaktor" ein anderer. Ein Problem hatte ich beim Versuch, die Breite von body oder auch #seite im IE zu limitieren. Daher ersetzte ich dies durch ein entsprechendes margin von #seite, was im Endeffekt denselben Effekt hat und dessen Breite reduziert. > Gibt es noch eine Alternative zu dem body onload? Ja. Ich hätte die Funktion, die ja auch das Ausklappen des Menüs erledigt, wie in <http://de.selfhtml.org/css/layouts/navigationsleisten.htm#javascript> über window.onload=hoverIE; aktivieren können. freundliche Grüße Ingo -- [[barrierefreie Webseitenerstellung](http://www.1ngo.de/web/) » [Suchmaschinenoptimierung](http://www.1ngo.de/web/seo.html) | [em?](http://www.1ngo.de/web/em.html)] ([Hommingberger Gepardenforelle](http://www.1ngo.de/hommingberger-gepardenforelle/);-)-
Hallo Ingo,
so ich hab jetzt nochmal viel getestet. U.a auch die Lösung von
http://www.highresolution.info/webdesign/yaml/artikel/modifikation/minmax.htmlGrundproblem dass sich herauskristallisiert ist dass die von mir gewünschte Lösung mit min-width für den IE zwar mit JS gut funktioniert aber die JS-Funktionen eben erst NACH dem Laden der Seite ausgeführt werden (logisch). Und das wiederum ist leider! doch sehr auffällig und störend. Ich hab mich jetzt auch nochmal durch Deine Seite http://beratungscentrum-monheim.de/ geklickt und festgestellt dass dieses "Nachladen" teils doch sehr auffällig ist...(und für den User eher nicht akzeptabel).
Und bei der Verwendung von expressions habe ich zwar nicht dieses Problem mit dem Nachladen aber kann nur Breiten in px angeben.
Diese Erkenntnis ist niederschmetternd..
vg Mel
-
Hi,
Grundproblem dass sich herauskristallisiert ist dass die von mir gewünschte Lösung mit min-width für den IE zwar mit JS gut funktioniert aber die JS-Funktionen eben erst NACH dem Laden der Seite ausgeführt werden (logisch). Und das wiederum ist leider! doch sehr auffällig und störend. Ich hab mich jetzt auch nochmal durch Deine Seite http://beratungscentrum-monheim.de/ geklickt und festgestellt dass dieses "Nachladen" teils doch sehr auffällig ist...(und für den User eher nicht akzeptabel).
Ich muss das mal mit einer größeren Auflsung testen. Wenn's wirklich sehr stärend ist, dann würde ich mir die Arbeit machen, und die Breite in ein Cookie speichern und beim nächsten Aufruf bereits während die Seite lädt das margin ändern.
freundliche Grüße
Ingo-
Hallo,
Ich muss das mal mit einer größeren Auflsung testen. Wenn's wirklich sehr stärend ist, dann würde ich mir die Arbeit machen, und die Breite in ein Cookie speichern und beim nächsten Aufruf bereits während die Seite lädt das margin ändern.
also ich denk mal ganz schwierig wird es halt wenn man eine sehr stark frequentierte Seite hat mir sehr sehr vielen Usern..da ist dieses Nachladen fast nicht machbar ohne die Benutzer zu verärgern.
Ich hab mich jetzt nochmal ganz intensiv mit einer reinen CSS-Lösung beschäftigt und zwar mit dieser hier :
http://www.cssplay.co.uk/boxes/minwidth.html
ich muss sagen nach anfänglicher Abwehr bin ich mehr als begeistert. Vielleicht ist das auch was für Dich? Es funktioniert jedenfalls tadellos und die 2 zusätzlichen Container nehme ich dann doch lieber in Kauf als das Js...
ich hab allerdings bisher nur auf IE6 getestet (wobei mir der IE5 dann glaube icha cuh egal ist was min-widht angeht...) und der IE7 beherrscht ja unglaublicherweise tatsächlich sowieso min-width..in diesem Sinne,
vg Mel
-
Hi,
also ich denk mal ganz schwierig wird es halt wenn man eine sehr stark frequentierte Seite hat mir sehr sehr vielen Usern..da ist dieses Nachladen fast nicht machbar ohne die Benutzer zu verärgern.
wieso? Was hat die Frequentierung damit zu tun und weshalb Nachladen?
Ich habe das Javascript mal um einen Keks erweitert und habe das Gefühl, dass es auf den meisten Seiten wirkt. Probier's doch bitte mal aus. Meine Internet-Anbindung ist dafür irgendwie zu schnell. ;-)freundliche Grüße
Ingo-
Hallo,
also ich denk mal ganz schwierig wird es halt wenn man eine sehr stark frequentierte Seite hat mir sehr sehr vielen Usern..da ist dieses Nachladen fast nicht machbar ohne die Benutzer zu verärgern.
wieso? Was hat die Frequentierung damit zu tun und weshalb Nachladen?nix, das sind nur so meine Gedankengänge. Wenig Besucher-- ein paar verärgerte User. Viele Besucher- mehr verärgerte Besucher--> Druck steigt. ;)
Ich habe das Javascript mal um einen Keks erweitert und habe das Gefühl, dass es auf den meisten Seiten wirkt. Probier's doch bitte mal aus. Meine Internet-Anbindung ist dafür irgendwie zu schnell. ;-)
Ja ich habs eben nochmal getestet. Muss dazu sagen dass ich Virtual PC (auf Mac OS) habe der eh immer schööön langsam reagiert. Aber zum Vergleich vielleichth nicht uninteressant;) Also ein paar Klicks gehen sehr flüssig. Dann wiederum zeigt auf auf einer Seite den Inhalt lang an..udn springt dann wieder zu seiner min-width zurück.
Ich hoffe ich konnte weiterhelfen,vg Mel
-
Hi,
Ja ich habs eben nochmal getestet. Muss dazu sagen dass ich Virtual PC (auf Mac OS) habe der eh immer schööön langsam reagiert.
Aha... damit dürftest Du aber eine recht seltene Ausnahme sein bzw. eigentlich dürfte es kaum jemanden geben, der den IE6 unter Mac wirklich zum Surfen nutzt, oder?
Also ein paar Klicks gehen sehr flüssig. Dann wiederum zeigt auf auf einer Seite den Inhalt lang an..udn springt dann wieder zu seiner min-width zurück.
Ich hoffe ich konnte weiterhelfen,Nunja, nicht wirklich. Auch ich konnte bei einigen Seiten noch einen kurzen Sprung bemerken, weiss aber nicht, woran das liegt. Ich kann nur vermuten, dass es am Timing liegen könnte, d.h. bei diesen Seiten für das div#seite der über Javascript in den head geschriebene Style zu spät zur Verfügung steht. Ich könnte das zwar serverseitig lösen, aber dazu müßte ich erst die meisten zunächst auf PHP umstellen.
freundliche Grüße
Ingo-
'Hi,
Nunja, nicht wirklich. Auch ich konnte bei einigen Seiten noch einen kurzen Sprung bemerken, weiss aber nicht, woran das liegt. Ich kann nur vermuten, dass es am Timing liegen könnte, d.h. bei diesen Seiten für das div#seite der über Javascript in den head geschriebene Style zu spät zur Verfügung steht. Ich könnte das zwar serverseitig lösen, aber dazu müßte ich erst die meisten zunächst auf PHP umstellen.
und was spricht denn nun gegen eine reine css-Lösung?
vg Mel
-
Hi,
und was spricht denn nun gegen eine reine css-Lösung?
kennst Du den eine?
min-widht in px ok, aber max-width in em?freundliche Grüße
Ingo-
Hi,
und was spricht denn nun gegen eine reine css-Lösung?
kennst Du den eine?
min-widht in px ok, aber max-width in em?nein, sorry, ich hatte mich zusehr auf die min-width-css-Lösung konzentriert. mit max-width kenne ich leider auch keine einfache, relativ saubere Lösung.
vg Mel
-
Hallo Mel
nein, sorry, ich hatte mich zusehr auf die min-width-css-Lösung konzentriert. mit max-width kenne ich leider auch keine einfache, relativ saubere Lösung.
Vielleicht hilft dir dies ein wenig.
Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!-
Hi,
Vielleicht hilft dir dies ein wenig.
Eine Tabelle, wenn auch nur für den IE, bzw. solche Eingriffe ins HTML zur Lösung eines CSS-Problems, will ich mir doch lieber sparen.
freundliche Grüße
Ingo-
Hallo Ingo
Eine Tabelle, wenn auch nur für den IE, bzw. solche Eingriffe ins HTML zur Lösung eines CSS-Problems, will ich mir doch lieber sparen.
Mein Posting war primär nicht für dich. ;)
Du hast natürlich recht, mir gefällt diese Version auch nicht wirklich. Mir fällt aber nichts wirklich besseres ein.
Wird ein Javascript verwendet, dann gibt es das Hüpfproblem, je nachdem, wie viele und welche Resurcen für die Seite noch geladen werden und wie schnell. Der Vorteil dabei wäre, dass keine zusätzlichen Elemente erforderlich sind.
Eine zuverlässige Expression, die die Vorgaben einhält (max-width:50em; min-width:800px), dürfte reichlich kompliziert werden (wenns überhaupt geht).
Mir fällt dann lediglich noch diese Variante ein.
Auch nicht viel besser, aber wenigstens ohne Tabelle.Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!-
Hallo Detlev,
Wird ein Javascript verwendet, dann gibt es das Hüpfproblem, je nachdem, wie viele und welche Resurcen für die Seite noch geladen werden und wie schnell. Der Vorteil dabei wäre, dass keine zusätzlichen Elemente erforderlich sind.
das ist -jetzt nachdem ich mich mal intensiv damit beschäftigt habe- auch meine Erkenntis..leider!
Eine zuverlässige Expression, die die Vorgaben einhält (max-width:50em; min-width:800px), dürfte reichlich kompliziert werden (wenns überhaupt geht).
ich denke nicht dass das geht. Man kann die WErte nicht kombinieren.
Mir fällt dann lediglich noch diese Variante ein.
Auch nicht viel besser, aber wenigstens ohne Tabelle.Witzig genau das hab ich mir auch überlegt also so ein Mitteldings aus reinem css und expressions. Ich habs aber gedanklich dann nicht weiter verfolgt weil ich dachte das geht ja eh nicht und ist so hingebastelt also shcon wieder zuviele unsichere Komponenten. Aber an sich gefällt mir diese Variante ganz gut wenn ich mir dieses Beispiel angucke...
Das mit der Tabelle ist so eine Sache. Irgendie widerstrebt es mir - und da bin ich sicher nicht die einzige- für den IE auch noch extra hmtl auszuliefern. Extra css- wenn es sich in verträglichen Grenzen hält ist kein Thema. Trotz allem aber würde ich aber eigentlich jede Lösung der JS-Hüpf-Variante vorziehen denn diese ist wirklich sehr sehr nervig.
Viele Grüsse und Danke für Dein Posting,
Mel-
Hallo Mel
Hallo Detlev,
^ ;)
Das mit der Tabelle ist so eine Sache. Irgendie widerstrebt es mir - und da bin ich sicher nicht die einzige- für den IE auch noch extra hmtl auszuliefern.
Auch diese Variante tut das:
<div id="messen"></div> <div id="outer"><div id="inner"> ... </div></div> ~~~nur für den IE, dazu noch das CSS und die Expression. Jetzt die andere Variante: ~~~html <table><tr><td id="IEmax"><div id="IEmin1"> ... </div></td></tr></table> ~~~das ist auch nicht viel mehr, dafür funktioniert sie aber auch bei deaktiviertem Javascript. Allerdings enthält sie den Tabellenmissbrauch, der bei umfangreichen Seiten dazu führen kann, dass die Seite verzögert (erst wenn alles fertig geladen ist) angezeigt wird. Ehrlich, mir gefällt beides nicht wirklich. > Extra css- wenn es sich in verträglichen Grenzen hält ist kein Thema. Trotz allem aber würde ich aber eigentlich jede Lösung der JS-Hüpf-Variante vorziehen denn diese ist wirklich sehr sehr nervig. Ich frage mich, ob es bei deinen Werten überhaupt notwendig ist, den IE mit min- und max-width zu versorgen. 800px sind schon ziemlich breit, also nichts für schmale Browserfenster. Der IE skaliert nur relativ wenig, so dass dies bei ihm auch bei maximaler Schriftvergrößerung ausreichen sollte. Also, lohnt sich der Aufwand wirklich? Auf Wiederlesen Detlef -- - Wissen ist gut - Können ist besser - aber das Beste und Interessanteste ist der Weg dahin!-
Hallo Detlev,
^ ;)Sorry ;)
Auch diese Variante tut das:
[code lang=html] <div id="messen"></div>
<div id="outer"><div id="inner">
...
</div></div>Ja. Allerdings nicht in CC´s gepackt...
Ich frage mich, ob es bei deinen Werten überhaupt notwendig ist, den IE mit min- und max-width zu versorgen.
800px sind schon ziemlich breit, also nichts für schmale Browserfenster. Der IE skaliert nur relativ wenig, so dass dies bei ihm auch bei maximaler Schriftvergrößerung ausreichen sollte.Also, lohnt sich der Aufwand wirklich?
Also mein Problem ist schon bestens gelöst. Ich habe eine min-widht in px-Angaben benötigt und die kriege ich mit dem CSS prima hin. Ich habe eine Breite in em angeben, so dass das Layout beim Schriftvergrössern mitskaliert. DAs Layout darf aber auf keinen Fall im IE zu klein werden (was bei Schriftgrad: klein etc.) passiert. Denn dadurch ist die Seite nicht merh nutzbar. ABer das ist ja nun unterbunden.
Das mit dem max-width war eher für Ingo interessant.
vg Mel
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-