Internetexplorer

[katihafemann]

Es scheint ein altes (und anscheinend sehr oft durchgekautes) Problem zu sein. Für mich ist es aber neu und vor lauter suchen und lesen und ausprobieren (alles hat nicht geholfen), weiß ich jetzt gar nichts mehr. Ich habe eine Seite für den Tierschutzverein gebastelt (selbst angelernt)und stoße nun an meine Grenzen. Im IE ist der Text ganz nach oben gerutscht, in Chrome passt alles.
Höhenangabe div? Höhenangabe body? oder beides? ... ohne margin und padding? ...ich weiß es einfach nicht.
Es wäre sehr schön, wenn mir jemand helfen kann (ist auch für einen guten Zweck ;))
Welches Script soll jetzt hier rein? Mache erst mal von style.css die rein, von denen ich denke sie sind wichtig:

body {
background:#F7F2C1;
margin: 0;
padding: 0;
height: 100%;
z-index:1;
}
#text_start {
position:absolute;
margin-top:100px;
margin-left:100px;
width:550px;
line-height:25px;
}

Ich hoffe es findet sich jemand! Dankeschön!

[NeoGriever]

Der Trick ist eine HTML-Browserweiche.

http://www.css4you.de/trickkiste/tr00032.html

Das weglassen der Zahl (IE anstelle IE 7) wird dann bei allen IE-Versionen ausgeführt.

In dieser HTML-Browserweiche kannst du dann extra CSS-Angaben machen, um den Text an die gewünschte Position zu schieben. Zum Beispiel:

<!--[if IE]>  
<style>  
#text_start {  
    margin-top:50px;  
}  
</style>  
<![endif]-->

bei einer CSS-Angabe kannst du einen neuen Wert erzwingen, indem du ein !important dahinter setzt. z. b:

margin-top:50px !important;

(also vor dem semikolon)

Ich hoffe, das hat geholfen.

[katihafemann]

Der Trick ist eine HTML-Browserweiche.

http://www.css4you.de/trickkiste/tr00032.html

Das weglassen der Zahl (IE anstelle IE 7) wird dann bei allen IE-Versionen ausgeführt.

In dieser HTML-Browserweiche kannst du dann extra CSS-Angaben machen, um den Text an die gewünschte Position zu schieben. Zum Beispiel:

<!--[if IE]>

<style>
#text_start {
    margin-top:50px;
}
</style>
<![endif]-->

>   
> bei einer CSS-Angabe kannst du einen neuen Wert erzwingen, indem du ein !important dahinter setzt. z. b:  
>   
> margin-top:50px !important;  
>   
> (also vor dem semikolon)  
>   
> Ich hoffe, das hat geholfen.  
  
  
  
Hallo, danke erstmal für die Antwort. Kann ich das jetzt kopieren und in meine vorhandene style.css setzen (Zahl natürlich anpassen). oder brauche ich eine zusätzliche style? Wahrscheinlich sehe ich heute den Wald vor lauter Bäumen nicht. Danke für Geduld.

[Vinzenz Mai]

Hallo,

Der Trick ist eine HTML-Browserweiche.

Hallo, danke erstmal für die Antwort. Kann ich das jetzt kopieren und in meine vorhandene style.css setzen (Zahl natürlich anpassen). oder brauche ich eine zusätzliche style? Wahrscheinlich sehe ich heute den Wald vor lauter Bäumen nicht. Danke für Geduld.

der Vorschlag ist ein Holzhammer, der viel trifft und viel kaputt macht.
Da, wie ich bereits anmerkte, die Darstellung im IE 9 ok ist, solltest Du nicht dazu greifen, weil dann die Darstellung in IE 9 nicht mehr wie gewünscht ist.

Freundliche Grüße

Vinzenz

[katihafemann]

Hallo,

Der Trick ist eine HTML-Browserweiche.

Hallo, danke erstmal für die Antwort. Kann ich das jetzt kopieren und in meine vorhandene style.css setzen (Zahl natürlich anpassen). oder brauche ich eine zusätzliche style? Wahrscheinlich sehe ich heute den Wald vor lauter Bäumen nicht. Danke für Geduld.

der Vorschlag ist ein Holzhammer, der viel trifft und viel kaputt macht.
Da, wie ich bereits anmerkte, die Darstellung im IE 9 ok ist, solltest Du nicht dazu greifen, weil dann die Darstellung in IE 9 nicht mehr wie gewünscht ist.

Freundliche Grüße

Vinzenz

Wie viel Leute nutzen denn IE 7 noch? Weil zumutbar ist die Seite da so nicht. Mit dem Trick komme ich auch nicht richtig klar. Bei mir ändert sich nichts. Wahrscheinlich irgendwas noch falsch eingesetzt. Mir brummt der Kopf und die Seite ist immer noch do.f.

[Vinzenz Mai]

Hallo Kati,

Wie viel Leute nutzen denn IE 7 noch?

das ist nicht so wichtig, weil *eine* entscheidende Person diesen Browser und den T-Online-Browser nutzt.

Weil zumutbar ist die Seite da so nicht. Mit dem Trick komme ich auch nicht richtig klar.

Der ist ja auch jenseits von Gut und Böse.

Bei mir ändert sich nichts. Wahrscheinlich irgendwas noch falsch eingesetzt. Mir brummt der Kopf und die Seite ist immer noch do.f.

1. Abschalten
2. bitte in Zukunft sinnvoll zitieren, denn ...
3. ... ich mag kein TOFU
4. die Ursache herausfinden,
5. das Problem sinnvoll lösen

Freundliche Grüße

Vinzenz

[Der Martin]

Hallo,

1. Abschalten

das ist ein sehr guter Rat - und das heißt: nicht nur den PC abschalten, sondern auch gedanklich etwas Abstand vom Projekt gewinnen. Ein Spaziergang, ein entspannendes Bad, ein gemütlicher Abend mit dem Freund, eine Runde im Fitnesscenter, vielleicht auch eine Disco- und/oder Kneipentour.
Jeder entspannt sich auf andere Weise.

Und morgen ausgeschlafen und mit frischem Fleiße wieder an dieselbe Sch... äh, ich meine, mit frischer Energie wieder ans Werk. ;-)

2. bitte in Zukunft sinnvoll zitieren, denn ...
3. ... ich mag kein TOFU

Dem schließe ich mich an.

Ciao,
 Martin

[Gunnar Bittersmann]

@@katihafemann:

nuqneH

Kann ich das jetzt kopieren und in meine vorhandene style.css setzen

Nein, kannst du nicht. Conditional comments haben in Stylesheets nichts zu suchen.

Du kannst Angaben für IE 7 mit '*+html'-Hack machen, also bspw.:
*+html #text_start { margin-top:50px }

(Nur um bei NeoGrievers Beispiel zu bleiben; nicht, dass das was bringen würde.)

Qapla'

[dave]

Hi,

meiner Meinung nach die eleganteste Möglichkeit auf unterschiedliche IE-Versionen zu reagieren ist das öffnende html-Tag durch folgendes Konstrukt zu ersetzen:

<!--[if lt IE 7]><html lang="de" class="no-js lt-ie9 lt-ie8 lt-ie7"><![endif]-->  
<!--[if IE 7]><html lang="de" class="no-js lt-ie9 lt-ie8"><![endif]-->  
<!--[if IE 8]><html lang="de" class="no-js lt-ie9"><![endif]-->  
<!--[if gt IE 8]><!--><html lang="de" class="no-js"><!--<![endif]-->

Dann kannst du im CSS einfach über Klassen die gewünschten Versionen ansprechen, um alles kleiner IE8 zu bekommen z.B. so:

.lt-ie8 #text_start {  
  margin-top:50px;  
}

Das angesprochene !important ist meiner Meinung nach nur sinnvoll wenn du inline-style-Angaben überschreiben möchtest. (Hier also nicht)

Ein Online-Beispiel (aufs wesentliche reduziert) würde helfen dein Problem nachzuvollziehen, zumindest ich kann das mit den von dir gegebenen Informationen nicht.
Tritt es bei dir hier auf?
Dieses Beispiel habe ich mit jsfiddle gemacht, find ich ganz nützlich für kleine Code-Schnipsel die man herzeigen will.

~dave

[Gunnar Bittersmann]

@@dave:

nuqneH

meiner Meinung nach die eleganteste Möglichkeit auf unterschiedliche IE-Versionen zu reagieren ist das öffnende html-Tag durch folgendes Konstrukt zu ersetzen:

<!--[if lt IE 7]><html lang="de" class="no-js lt-ie9 lt-ie8 lt-ie7"><![endif]-->

<!--[if IE 7]><html lang="de" class="no-js lt-ie9 lt-ie8"><![endif]-->
<!--[if IE 8]><html lang="de" class="no-js lt-ie9"><![endif]-->
<!--[if gt IE 8]><!--><html lang="de" class="no-js"><!--<![endif]-->

  
Von Eleganz keine Spur. Verstoß gegen DRY: html-Tag mit @lang-Atrribut und womöglich weiteren Attributen (@id) und Klasse "no-js" wird etliche Male wiederholt.  
  
(IMHO ist die Klasse "no-js" auch völlig überflüssig.)  
  
  
Elegant ist ein [JavaScript-Einzeiler](http://forum.de.selfhtml.org/archiv/2012/1/t208553/#m1418873):  
  
`var ieversion = document.documentMode /*@cc_on || 7 @*/;`{:.language-javascript}  
  
Machen wir einen Zweizeiler draus:  
  
`if (ieversion) document.documentElement.className += " ie" + ieversion;`{:.language-javascript}  
  
(Und ja, ich bin mir der Problematik der Verfügbarkeit von JavaScript bewusst.)  
  
  

> Dann kannst du im CSS einfach über Klassen die gewünschten Versionen ansprechen, um alles kleiner IE8 zu bekommen  
  
Das kann man auch ganz einfach ohne Klassen mit '`*+hmlt`{:.language-css}' für IE 7 (und wenn’s denn noch sein muss mit '`* html`{:.language-css}' für IE < 7.  
  
Qapla'

-- 
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.  
(Mark Twain)

[Gunnar Bittersmann]

@@Gunnar Bittersmann:

nuqneH

Machen wir einen Zweizeiler draus:

Hm, warum eigentlich?

if (var ieversion = document.documentMode /*@cc_on || 7 @*/) document.documentElement.className += " ie" + ieversion;

Aber ob kurz-und-knackiger, aber potentiell missverständlicher Code (= in if) nun elegant ist?

Qapla'

[Vinzenz Mai]

Hallo Gunnar,

Aber ob kurz-und-knackiger, aber potentiell missverständlicher Code (= in if) nun elegant ist?

wegen "potentiell missverständlich" meiner Meinung nach nicht.

Freundliche Grüße

Vinzenz

[Der Martin]

Hallo,

if (var ieversion = document.documentMode /*@cc_on || 7 @*/) document.documentElement.className += " ie" + ieversion;
Aber ob kurz-und-knackiger, aber potentiell missverständlicher Code (= in if) nun elegant ist?

ja, auf jeden Fall. Dass dieser Code, der zwei Gedankengänge verschachtelt, nicht für den ersten Abend eines VHS-Kurses über Javascript geeignet ist, ist eine andere Sache. Wir sollten hier von Nutzern ausgehen, die bereits die ersten Gehversuche hinter sich haben.

Ciao,
 Martin

[molily]

if (var ieversion = document.documentMode /*@cc_on || 7 @*/) document.documentElement.className += " ie" + ieversion;

Aber ob kurz-und-knackiger, aber potentiell missverständlicher Code (= in if) nun elegant ist?

Kurz, knackig und ein Syntaxfehler. Zuweisungen sind als Expressions, also in if (…) erlaubt, Variablendeklarationen sind jedoch eigene Statements.

Mathias

[dave]

Hi,

Verstoß gegen DRY: html-Tag mit @lang-Atrribut und womöglich weiteren Attributen (@id) und Klasse "no-js" wird etliche Male wiederholt.

<?php  
  $lang = 'de';  
  echo '<!--[if lt IE 7]><html lang="'.$lang.'" class="no-js lt-ie9 lt-ie8 lt-ie7"><![endif]-->';  
  echo '<!--[if IE 7]><html lang="'.$lang.'" class="no-js lt-ie9 lt-ie8"><![endif]-->';  
  echo '<!--[if IE 8]><html lang="'.$lang.'" class="no-js lt-ie9"><![endif]-->';  
  echo '<!--[if gt IE 8]><!--><html lang="'.$lang.'" class="no-js"><!--<![endif]-->';  
?>

Oder irgendeine angebracht Variation davon.
Ich finde das Argument DRY hier lächerlich.

(IMHO ist die Klasse "no-js" auch völlig überflüssig.)

Da kannst du durchaus recht haben. Ich finde sie macht das Leben in manchen Situation einfacher und stört nie.

(Und ja, ich bin mir der Problematik der Verfügbarkeit von JavaScript bewusst.)

Aber sie ist dir egal, oder wie?

Dann kannst du im CSS einfach über Klassen die gewünschten Versionen ansprechen, um alles kleiner IE8 zu bekommen

Das kann man auch ganz einfach ohne Klassen mit '*+html' für IE 7 (und wenn’s denn noch sein muss mit '* html' für IE < 7.

Das ist mir durchaus bewusst.
Wo ist der Vorteil von *+html gegenüber .lt-ie8?
Letzteres ist vor allem auch für alle, die nicht die Erfahrung in CSS haben die du voraussetzt, eindeutig lesbar und verständlich.

~dave

[Vinzenz Mai]

Hallo Kati,

ich kann im IE9 keinen Unterschied zwischen der Darstellung in Firefox, Opera und IE sehen.

Welcher IE weist das von Dir angesprochene Verhalten auf?

Freundliche Grüße

Vinzenz

[katihafemann]

Hallo Kati,

ich kann im IE9 keinen Unterschied zwischen der Darstellung in Firefox, Opera und IE sehen.

Welcher IE weist das von Dir angesprochene Verhalten auf?

Freundliche Grüße

Vinzenz

Hallo Vinzenz,
ich habe es (gerade) bei der Chefin vom Tierheim gesehen, sie schaut immer über den Telekom-Browser rein und soweit ich das recherchiert habe, benutzen die den IE. Bei "browsershot" zeigt er es im 7.0 verschoben an.

[Gunnar Bittersmann]

@@katihafemann:

nuqneH

Ich habe eine Seite für den Tierschutzverein gebastelt (selbst angelernt)

Du hast zum Lernen die falschen Quellen benutzt?

Du hast kein http://de.selfhtml.org/html/text/index.htm@title=Mark-up geschrieben, sondern div-Suppe.

Fundtierunterkunft: "ich möchte eine überschrift sein, bitte bitte lass mich ein <hX> sein!"

<div style="background-color:#94C523;height:3px;line-height:3px;font-size:0; margin-top:147px;"></div>? Aua!

Verzichte auf Inline-Style-Angaben; notiere alle Styles im Stylesheet!
Verzichte auf unsinnige Elemente wie dieses div; eine Linie kann border eines bestehenden Elements sein.

Die Katzenbilder sind doch eher Verzierung als Inhalt. Sie gehören nicht als img-Elemente ins HTML, sondern als Hintergrundbilder ins CSS. BTW, sie sind unsauber ausgeschnitten/plaziert.

Löblich ist die Navigationsleiste als Liste ausgezeichnet. In HTML5 wäre nav statt div angebracht, ansonsten brauchst du den Container auch gar nicht. Und warum @id="subnavi"? Was ist die Primärnavigation?

Und wenn doch nur die aktuelle Seite nicht verlinkt wäre! (Punkt 10 der zehn meist-missachteten Homepage-Design-Richtlinien [Nielsen])

Mein Tip: Kümmere dich nicht um die jetzigen Darstellungsfehler im IE 7, sondern bast^W baue die Website nochmal – mit vernünftigem Mark-up (ohne dabei die Darstellung im Sinn zu haben).

Danach machst du dich ans Styling. Gehe dabei nicht von einer bestimmten Viewportbreite aus! Ich muss horizontal scrollen, um überhaupt die versteckten Öffnungszeiten sehen zu können.

Verzichte dabei auf absolute Positionierung! Für dieses Layout brauchst du das nicht.

Und mit ein bisschen Glück sieht es dann auch gleich im IE 7 richtig aus.

Qapla'

[katihafemann]

Problem gelöst:
Im div #text-start habe ich das margin rausgenommen und nur top stehen gelassen! Zahl angepasst und fertig!