Design im IE8 unter Win7 falsch

[CHHaaks]

Guten Morgen liebe Forenteilnehmner.

Ich habe ein Problem mit meiner Webseite.
Wenn ich die Seite in IE8 unter Windows xp angucke, ist alles in Ordnung.
Auch in FF 3.5, Opera und Chrome ist alles in Ordnung.

Wenn ich jedoch den IE8 unter Windows 7 verwende,
ist die Linie, die meine Headlines unterstreichen um genau 4px nach unten verschoben.

Leider weiß ich an dieser Stelle nicht mehr weiter.

Folgende Screenshots zeigen das Problem:

Hier die Anzeige unter Windows7 im IE8

Und das gleiche nochmal unter WinXP im IE8

Für alle, die sich das live angucken wollen hier die url:

www.wsam.biz

Da ich nicht weiß, an welcher Stelle sich das Problem befindet,
habe ich keine CSS - Files gepostet.
Werde diese selbstverständlich bei Bedarf nachreichen.

Vielen Dank schon mal im Voraus.

Mfg

C.Haaks

[Gunnar Bittersmann]

@@CHHaaks:

nuqneH

Für alle, die sich das live angucken wollen hier die url:
www.wsam.biz

Verweise einbinden: http://www.wsam.biz/

Da ich nicht weiß, an welcher Stelle sich das Problem befindet,
habe ich keine CSS - Files gepostet.
Werde diese selbstverständlich bei Bedarf nachreichen.

Ein Link(!) zu deiner Seite reicht. Da ist alles zu sehen.

Der IE hat Probleme mit der Schriftart leHavre und nimmt die nächste in der der Liste: Century Gothic. Deren Höhe ist etwas geringer.

Es ist wohl keine gute Idee, die horizontale Line in zwei Teile aufzuteilen. Warum geht die Überschrift nicht über die volle Breite?

Der Pfad '../images/' ist auch grenzwertig. Von deinem Webroot-Verzeichnis geht’s nicht weiter hoch, deshalb ist '../' gleich './'.

Warum gibst du nicht '/images/' oder 'http://www.wsam.biz/images/' an? (SELFHTML: <http://de.selfhtml.org/html/allgemein/referenzieren.htm@title=Referenzieren in HTML>)

Qapla'

[CHHaaks]

Moin Moin

Verweise einbinden: http://www.wsam.biz/

Hehe... das mit dem Link habe ich heute Morgen irgendwie übersehen gehabt :).

Ein Link(!) zu deiner Seite reicht. Da ist alles zu sehen.

Was meinst Du damit?
Ich habe lediglich die Screenshots eingebunden.
Da ich hier keine Bilder hochladen kann ist das die einzige Möglichkeit.
Und da ich nicht davon ausgehen kann, dass alle Leute die gleichen Möglichekeiten in Form von verschiedenen Browsern und Betriebsystemen hat,
ist das die einzige Möglichkeit das vernünftig zu zeigen.

Der IE hat Probleme mit der Schriftart leHavre und nimmt die nächste in der der Liste: Century Gothic. Deren Höhe ist etwas geringer.

Danke... das wird in der Tat das Problem sein.

Es ist wohl keine gute Idee, die horizontale Line in zwei Teile aufzuteilen. Warum geht die Überschrift nicht über die volle Breite?

Weil die Seite "gewachsen" ist und ich diese Linie nicht über die volle Breite geplant hatte. Das erschien mir die einfachste Lösung.

Der Pfad '../images/' ist auch grenzwertig. Von deinem Webroot-Verzeichnis geht’s nicht weiter hoch, deshalb ist '../' gleich './'.

Warum gibst du nicht '/images/' oder 'http://www.wsam.biz/images/' an? (SELFHTML: <http://de.selfhtml.org/html/allgemein/referenzieren.htm@title=Referenzieren in HTML>)

Weil ich in meiner Testumgebung in einem Unterordner des Webroots entwickel.
Und da sich der Pfad der einbindenden Bildatei relativ zum Speicherort der CSS Datei befindet (welche in dem Unterordner /includes ist) muss ich erstmal eine Ebene höher.

Aber vielen Dank für den Hinweis mit der Schrift.
Ich denke das wird das Problem sein ... da wäre ich im Leben nicht draufgekommen. :).
Wahr scheinlich werde ich die Linie dann doch über die volle Breite machen müssen.

Mfg
C.Haaks

[CHHaaks]

Moin nochmal.

Aber vielen Dank für den Hinweis mit der Schrift.
Ich denke das wird das Problem sein ... da wäre ich im Leben nicht draufgekommen. :).

Ich habe jetzt die Höhe des div Elements fest vorgegeben und das löst das Problem.

Vielen Dank nochmal...
Wäre da wirklich nie im Leben drauf gekommen - ich binde den leHavre font per
@font-face {
    font-family: leHavre;
    src: url(fonts/LeHavre.ttf) format("truetype");
}
ein.
Deswegen ist es im FF Opera und Chrome auch richtig angezeigt worden, da die damit was anfangen können - und mein XP Rechner hatte den font installiert.
Ich habe deswegen nur Unterschiede im OS als Ursache angenommen und war für alles andere Betriebsblind :).

Mfg

C.Haaks

[Kai345]

[latex]Mae  govannen![/latex]

Wäre da wirklich nie im Leben drauf gekommen - ich binde den leHavre font per
@font-face {
    font-family: leHavre;
    src: url(fonts/LeHavre.ttf) format("truetype");
}
ein.
Deswegen ist es im FF Opera und Chrome auch richtig angezeigt worden, da die damit was anfangen können - und mein XP Rechner hatte den font installiert.

Falls du alle* IE berücksichtigen willst: Mit FontSquirrel eine .eot-Datei erstellen lassen.

Übrigens nette Schrift, wär' mir aber zu teuer (falls es die gleiche „Le Havre“ ist, die ich auf Anhieb gefunden habe)

* Na ja nicht wirklich alle, aber mindestens ab IE 4.

Cü,

Kai

[CHHaaks]

Falls du alle* IE berücksichtigen willst: Mit FontSquirrel eine .eot-Datei erstellen lassen.

Wenn ich mir eine eot Datei erstelle, funktioniert dann die Fontanzeige noch im Opera oder Chrome?
Für den FF muss ich ja anscheinend noch eine Woff Datei erstellen.

Übrigens nette Schrift, wär' mir aber zu teuer (falls es die gleiche „Le Havre“ ist, die ich auf Anhieb gefunden habe)

* Na ja nicht wirklich alle, aber mindestens ab IE 4.

Cü,

Kai

Habe die Schrift vor Urzeiten von http://www.opentype-font.com/Opentype_detail_LeHavre-CE-Regular_.ttf.html runtergeladen gehabt.

Danke für den positiven Feedback - sonst hört man ja immer nur, was schlecht ist auf einer Seite :).

mfg

C.Haaks

[Kai345]

[latex]Mae  govannen![/latex]

Falls du alle* IE berücksichtigen willst: Mit FontSquirrel eine .eot-Datei erstellen lassen.

Wenn ich mir eine eot Datei erstelle, funktioniert dann die Fontanzeige noch im Opera oder Chrome?
Für den FF muss ich ja anscheinend noch eine Woff Datei erstellen.

Nö. FF, Opera und andere (neuere) Browser nutzen die ttf-Datei, IE die eot.

Fontsquirrel erzeugt auch automatisch das passende CSS dazu (Wobei der Unterschied eigentlich nur in einer zusätzliche Zeile besteht).

Ich benutze z.B für Quellcode folgendes:

@font-face {  
  font-family: 'DejaSM';  
  src: url('/DejaVuSansMono.eot');  
  src: local("DejaVu Sans Mono"), local('DejaVu Sans Mono Book'), url('/DejaVuSansMono.ttf') format('truetype');  
}

Cü,

Kai

[ChHaaks]

Ich benutze z.B für Quellcode folgendes:

@font-face {

font-family: 'DejaSM';
  src: url('/DejaVuSansMono.eot');
  src: local("DejaVu Sans Mono"), local('DejaVu Sans Mono Book'), url('/DejaVuSansMono.ttf') format('truetype');
}

  
Moin Moin,  
  
danke - habe ich gestern sofort umgesetzt gehabt - und funktioniert hervorragend :).  
  
mfg  
  
ChHaaks