nicht angemeldet
<img width="100%"> funktioniert nicht mit dem IE
Hallo,
es soll ein Bild dargestellt werden, das auf die Größe des Browserfenster skaliert wird. Dazu verwende ich folgendes:
<img src="bild.jpg" width="100%">
Das funktioniert auch mit allen Browsern, nur nicht mit dem IE. Der IE stellt das Bild immer in der normalen Auflösung dar und skaliert es nicht. Was muss ich tun, damit dies auch mit dem IE funktioniert?
Vielen Dank schonmal für eure Hilfe.
Grüße
Markus
-
Hej,
<img src="bild.jpg" width="100%">
Der IE stellt das Bild immer in der normalen Auflösung darOffesnichtlich bezieht der IE eine relative width Angabe im Fall von <img> auf das Ausgezeichnete und nicht das Eltern Element.
Überlege dir das Ergebnis mit css#{width;height} umzusetzen, welches dir ohnehin mehr Gestaltungsfreiraum bietet. Berücksichtige dabei, dass der IE css nur gebrochen versteht.
Beste Grüße
Biesterfeld--
Selfcode:
fo:| br:> n4:? ie:{ mo:} va:} de:] zu:| fl:| ss:| ls:]-
Überlege dir das Ergebnis mit css#{width;height} umzusetzen,
<img src="bild.jpg" style="width:100%">
funktioniert leider auch nicht.Grüße
Markus-
Hallo Markus.
<img src="bild.jpg" style="width:100%">
funktioniert leider auch nicht.Bist du dir sicher? Folgendes Konstrukt funktioniert in allen modernen Browsern und dem IE:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>New Document</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <style type="text/css"> [code lang=css]html,body{padding:0;margin:0;height:100%;}</style>
</head>
<body>
<img src="foo.gif" alt="" style="height:50%;width:50%;" />
</body>
</html>[/code]Gruß, Ashura
--
Selfcode: sh:( fo:) ch:? rl:( br:^ n4:& ie:{ mo:) va:) de:> zu:) fl:( ss:| ls:[ js:|
Try it: Become an Opera Lover in 30 days
Meine Browser: Opera 8.0 | Firefox 1.0.4 | Lynx 2.8.3 | Netscape 4.7 | IE 6.0
IE Layout-Workaround №1: <!--[if IE]><style type="text/css">*{display:none;}</style><![endif]-->-
Hallo Ashura,
das Konstrukt das du gepostet hast funktioniert. Meine Grafik jedoch befindet
sich inerhalb einer Tabelle. Vermutlich liegt da das Problem.So sieht meine HTML-Datei aus:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>New Document</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <style type="text/css"> html,body{padding:0;margin:0;height:100%;} </style> </head> <body marginwidth="0" marginheight="0" topmargin="0" leftmargin="0" bgcolor="#000000" color="#FFFFFF"> <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0"> <tr height="0"><td align="center"><font color="#000000" size="1"><p style="font-size:7px">_</p></font></td></tr> <tr><td height="100%" align="center" valign="middle"> <table width="100%" border="0" cellpadding="0" cellspacing="0"><tr><td align="center"> <img src="bild.jpg" alt="" style="width:100%;" /> </td></tr> <tr><td align="center"><font color="#FFFFFF" size="1">Text, text, text...</font></td></tr> </table> </td></tr> <tr height="0"><td align="right"> <font color="#FFFFFF" size="1">Text, text, text...</font> </td></tr> </table> </body> </html>Weiß jemand wo da der Fehler ist?
Gruß
Markus-
Hallo Markus.
So sieht meine HTML-Datei aus:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>New Document</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
[code lang=css]html,body{padding:0;margin:0;height:100%;}> </style> > </head>[/code] Bis hierher sieht der Code seltsamerweise genau wie meiner aus. > `<body marginwidth="0" marginheight="0" topmargin="0" leftmargin="0" bgcolor="#000000" color="#FFFFFF">`{:.language-html} Wozu das hier? Schau dir einmal die Style-Angaben im head genau an. > <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0"> Wie du [hier](http://de.selfhtml.org/html/referenz/attribute.htm) sehen kannst, hat table kein height-Attribut. > Weiß jemand wo da der Fehler ist? Ist die Tabelle wirklich erforderlich? Bitte befasse dich mit [CSS](http://de.selfhtml.org/css/), insbesondere [CSS-basierten Layouts](http://de.selfhtml.org/css/layouts/index.htm). Dadurch entstehen viel mehr Freiheiten, als eine Layouttabelle dir zu geben vermag. Gruß, Ashura -- Selfcode: sh:( fo:) ch:? rl:( br:^ n4:& ie:{ mo:) va:) de:> zu:) fl:( ss:| ls:[ js:| Try it: [Become an Opera Lover in 30 days](http://tntluoma.com/opera/lover/7/) Meine Browser: Opera 8.0 | Firefox 1.0.4 | Lynx 2.8.3 | Netscape 4.7 | IE 6.0 IE Layout-Workaround №1: <!--[if IE]><style type="text/css">\*{display:none;}</style><![endif]-->-
Bis hierher sieht der Code seltsamerweise genau wie meiner aus.
Um jeden Fehler auszuschließen habe ich soviel wie möglich aus deinem Code übernommen.
Wozu das hier? Schau dir einmal die Style-Angaben im head genau an.
Ich möchte vermeiden, dass sich um der Tabelle ein Rahmen vom body befindet, so dass der untere Text vollständig unten-rechts anliegt.
Wie du hier sehen kannst, hat table kein height-Attribut.
Ich möchte erreichen, dass sich die andere Tabelle, die sich in dieser Tabelle befindet vertikal zentriert zum Browserfesnter ausgerichtet ist. Wie sonst sollte ich das schaffen, wenn das Eltern-Element nicht eine Höhe von 100% hat?
Ist die Tabelle wirklich erforderlich? Bitte befasse dich mit CSS, insbesondere CSS-basierten Layouts.
Alles mit CSS-basierten Layouts zu machen ist mir zu kompliziert. Ich habe aber inzwischen einen anderen Weg gefunden, der zwar nicht der eleganteste Weg ist, aber funktioniert:
<html> <head> <title></title> <meta content=""> <style type="text/css"> html,body{padding:0;margin:0;height:100%;} </style> </head> <body marginwidth="0" marginheight="0" topmargin="0" leftmargin="0" bgcolor="#000000" color="#FFFFFF"> <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0"> <tr height="0"><td align="center"><font color="#000000" size="1"><p style="font-size:7px">_</p></font></td></tr> <tr><td height="100%" align="center" valign="middle"> <table width="100%" border="0" cellpadding="0" cellspacing="0"><tr><td align="center"> <img id="imglogo" name="imglogo" src="bild.jpg" width="100%"> </td></tr> <tr><td align="center"><font color="#FFFFFF" size="1"><p style="font-size:11px">coming soon...</p></font></td></tr> </table> </td></tr> <tr height="0"><td align="right"> <font color="#222222" size="1"><p style="font-size:7px">(C) Markus Leonhardt</p></font> </td></tr> </table> <script type="text/javascript" DEFER> function Fensterweite () { if (window.innerWidth) { return window.innerWidth; } else if (document.body && document.body.offsetWidth) { return document.body.offsetWidth; } else { return 0; } } document.getElementById("imglogo").width = Fensterweite()-20; function groeseAendern() { document.getElementById("imglogo").width = Fensterweite()-20; } window.onresize = groeseAendern; </script> </body> </html>Trotzdem danke für deine Hilfe.
Grüße
Markus-
Hallo Markus.
Ich möchte vermeiden, dass sich um der Tabelle ein Rahmen vom body befindet,
Das Element body hat von Haus aus keinen Rahmen. Könnte es sein, dass du padding meinst?
so dass der untere Text vollständig unten-rechts anliegt.
Dafür kannst du die Positionierung auf absolute schalten und mittels bottom und right in die Ecke setzen.
Wie sonst sollte ich das schaffen, wenn das Eltern-Element nicht eine Höhe von 100% hat?
Indem du auf diese verschachtelten Tabellen verzichtest und dem Elternelement eine Höhe verpasst?
Alles mit CSS-basierten Layouts zu machen ist mir zu kompliziert.
Nein, es erfordert nur ein wenig Umdenken und ein klein wenig Einarbeitungszeit, je nachdem, wie stark du noch "in Tabellen denkst".
Der minimale Aufwand zahlt sich absolut durch die folgende Effizienz aus.Ich habe aber inzwischen einen anderen Weg gefunden, der zwar nicht der eleganteste Weg ist, aber funktioniert:
(...)
<script type="text/javascript" DEFER>Was ist "DEFER"?
Trotzdem danke für deine Hilfe.
Gerne. Ich bitte dich aber dennoch nochmals, dich ein wenig mit CSS zu befassen.
Auf das Vorhandensein von JavaScript kannst und darfst du dich nicht verlassen, auch wenn es in diesem Fall keine gravierenden Auswirkungen hat.Gruß, Ashura
--
Selfcode: sh:( fo:) ch:? rl:( br:^ n4:& ie:{ mo:) va:) de:> zu:) fl:( ss:| ls:[ js:|
Try it: Become an Opera Lover in 30 days
Meine Browser: Opera 8.0 | Firefox 1.0.4 | Lynx 2.8.3 | Netscape 4.7 | IE 6.0
IE Layout-Workaround №1: <!--[if IE]><style type="text/css">*{display:none;}</style><![endif]--> -
Hallo Markus,
deine "Lösung" enthält neben dem fehlenden Dokumententyp und der fehlenden Zeichensatzangabe noch 11 weitere Fehler. Du solltest imho Abstand davon nehmen, solcherart ungültigen HTML-Code ins Internet zu stellen. Du kannst nicht vorhersehen wie die aktuellen und zukünftigen Browsergenerationen deine Seite(n) darstellen werden, denn es bleibt der Fantasie der Browser überlassen.
Es wird dir immer eine Hilfe sein zuerst einen Validator zu bemühen, wie z.B. diesen hier: http://www.validome.org/lang/gecu,
ziegenmelker
-
-
-
-
Hallo Ashura,
<html>
<body>
<img src="foo.gif" alt="" style="height:50%;width:50%;" />
</body>
</html>das ist so leider nicht valide, das img-Tag ist an dieser Stelle nicht erlaubt. cu, ziegenmelker-
Hallo ziegenmelker.
das ist so leider nicht valide, das img-Tag ist an dieser Stelle nicht erlaubt.
Ich weiß, aber für einen schnellen Test ist das durchaus verschmerzbar. ;)
Gruß, Ashura
--
Selfcode: sh:( fo:) ch:? rl:( br:^ n4:& ie:{ mo:) va:) de:> zu:) fl:( ss:| ls:[ js:|
Try it: Become an Opera Lover in 30 days
Meine Browser: Opera 8.0 | Firefox 1.0.4 | Lynx 2.8.3 | Netscape 4.7 | IE 6.0
IE Layout-Workaround №1: <!--[if IE]><style type="text/css">*{display:none;}</style><![endif]-->-
Hallo Ashura
Ich weiß, aber für einen schnellen Test ist das durchaus verschmerzbar. ;)
Nein, du kannst dich nicht darauf verlassen, dass die Darstellung bei invalidem
Code der von validem entspricht, genauso wie du dich auch nicht darauf verlasssen
kannst, dass die Darstellung bei Änderung des Doctypes identisch bleibt.Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!-
Hallo Detlef.
Nein, du kannst dich nicht darauf verlassen, dass die Darstellung bei invalidem
Code der von validem entspricht,Das mache ich auch nicht, glaube mir.
Aber bei einem solch simplen Beispiel ist es meiner Meinung nach nicht so wichtig. (Bitte jetzt keine Grundsatzdiskussion, ich arbeite ansonsten immer mit validem Code und sauberem Scripting. Bei komplexeren Versuchen akzeptiere ich im Code keine Fehlertoleranz.)genauso wie du dich auch nicht darauf verlasssen
kannst, dass die Darstellung bei Änderung des Doctypes identisch bleibt.Dessen bin ich mir bewusst, wie kommst nun darauf?
Gruß, Ashura
--
Selfcode: sh:( fo:) ch:? rl:( br:^ n4:& ie:{ mo:) va:) de:> zu:) fl:( ss:| ls:[ js:|
Try it: Become an Opera Lover in 30 days
Meine Browser: Opera 8.0 | Firefox 1.0.4 | Lynx 2.8.3 | Netscape 4.7 | IE 6.0
IE Layout-Workaround №1: <!--[if IE]><style type="text/css">*{display:none;}</style><![endif]-->-
Hallo Ashura
Nein, du kannst dich nicht darauf verlassen, dass die Darstellung bei invalidem
Code der von validem entspricht,Das mache ich auch nicht, glaube mir.
Das glaube ich dir durchaus.
Ist das einem Anfänger, der hier mitliest auch bewusst?Aber bei einem solch simplen Beispiel ist es meiner Meinung nach nicht so wichtig. (Bitte jetzt keine Grundsatzdiskussion, ...
Doch! ;-)
Auch simple Beispiele, sollten hier nicht unkommentiert stehen bleiben, wenn sie
fehlerhaft oder/und invalide sind, und ebenfalls relativierende Bemerkungen
dazu.genauso wie du dich auch nicht darauf verlasssen
kannst, dass die Darstellung bei Änderung des Doctypes identisch bleibt.Dessen bin ich mir bewusst, wie kommst nun darauf?
Du ja, aber auch _jeder_, der hier mitliest?
Oft werden hier Darstellungsprobleme gepostet, bei denen entweder überhaupt kein
Doctype angegeben ist, oder das Dokument nicht valide ist. Bei einem Hinweis
darauf, kommen dann oft Antworten der Art, dass es nicht um die Validität
sondern nur um dieses Problem gehe, oder dass sich der Fragesteller darum erst
später kümmern will, wenn dann endlich sein aktuelles Problem beseitigt ist.Auch, wenn ich dich persönlich angesprochen habe, war meine Antwort natürlich
nicht nur für dich persönlich bestimmt.Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!-
Hallo Detlef.
Ist das einem Anfänger, der hier mitliest auch bewusst?
Wohl eher nicht, da hast du wohl Recht.
Doch! ;-)
Auch simple Beispiele, sollten hier nicht unkommentiert stehen bleiben, wenn sie
fehlerhaft oder/und invalide sind, und ebenfalls relativierende Bemerkungen
dazu.Ja, auch hier hast du Recht. Ich habe mich selbst auf schnelles, effizienteres Coding getrimmt, da bleiben Kommentierungen bzw. Dokumentationen meist auf der Strecke.
(Wieviel Text ich nun doch sparen können, wenn ich einfach ein <p></p> um das Bild gesetzt hätte. ;) )Auch, wenn ich dich persönlich angesprochen habe, war meine Antwort natürlich
nicht nur für dich persönlich bestimmt.Ich habe deinen Hinweis verstanden und werde mich bemühen, ihn in Zukunft umzusetzen. :)
Gruß, Ashura
--
Selfcode: sh:( fo:) ch:? rl:( br:^ n4:& ie:{ mo:) va:) de:> zu:) fl:( ss:| ls:[ js:|
Try it: Become an Opera Lover in 30 days
Meine Browser: Opera 8.0 | Firefox 1.0.4 | Lynx 2.8.3 | Netscape 4.7 | IE 6.0
IE Layout-Workaround №1: <!--[if IE]><style type="text/css">*{display:none;}</style><![endif]-->
-
-
-
Hallo Detlef,
Nein, du kannst dich nicht darauf verlassen, dass die Darstellung bei invalidem
Code der von validem entspricht, genauso wie du dich auch nicht darauf verlasssen
kannst, dass die Darstellung bei Änderung des Doctypes identisch bleibt.genau wie man sich nicht darauf verlassen kann, daß ein Anfänger genau solche Fehler nicht per copy&paste übernimmt.
cu,
ziegenmelker
-
-
-
-
-
-
-
Hallo Markus
<img src="bild.jpg" width="100%">
Das funktioniert auch mit allen Browsern, nur nicht mit dem IE.
Das funktioniert auch beim IE, nur nicht innerhalb von Tabellen!
Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!