Probleme Darstellung IE

retom1

Hallo zusammen,
ich habe in den letzten Tagen eine website auf wordpress Basis für einen Bekannten aufgesetzt. Die Darstellung ist mit meinem Mozilla perfekt, aber leider verrupft es mir mit dem Internet Explorer die Fenstergrössen.
Die Website befindet sich unter: http://www.rougemont.primecut.ch
Gehe ich richtig in der Annahme, dass der Fehler irgendwo in der style.css Datei liegen muss? Hat es einen Befehl darunter, welcher IE nicht versteht oder anders interpretiert?
http://www.rougemont.primecut.ch/wp-content/the…Theme/style.css

Über Tipps wäre ich sehr dankbar. Mühe mich nun schon stundenlang mit diesem Problem ab...

ich verwende:
wordpress 2.7.1
TU Theme

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

Whoppy

Deine Seite hat ein paar Fehler und der IE reagiert empfindlich auf Fehler. Korrigiere die Fehler und zu 99% klappts auch mit der Darstellung im IE.

Gruß Whoppy

koslowski

Hi,

erstmal haben li und a kein HasLayout für den IE. Daran stört sich besonders der IE6, der die Abstände der Navigationspunkte vergrößert.

Abhilfe schafft hier:

HTML

* html div.left li  {
     height:1px;
}
* html div.left a  {
     height:1px;
}

Das schreibst du in den Cond.Comment und wird nur vom IE6, IE5 gelesen.
Probier mal beides aus.

Der #header wird ja im IE nur teilweise angezeigt. Er hat ja keinen Inhalt, nur die HG-Grafik, ein leeres h2 und einen leeren Link.

Mach das doch so:

Quelltext des Abschnittes:

HTML

<div id="header">
<h1><span></span>Deine Hauptüberschrift</h1>
</div>

CSS dazu:

HTML

h1 {
height: 262px;
position: relative;
width: 800px;
}
h1 span {
background: url(images/header.png) no-repeat left top;
height: 100%;
position: absolute;
width: 100%;
}

Alles anzeigen

[FONT=Arial][size=12]Erstmal aus der h2 ne h1 gemacht (ist ja deine Hauptüberschrift).
Das h1[/SIZE][/FONT][FONT=Arial][size=12] wird relativ positioniert, damit es dem absolut positionierten span als
Bezugspunkt dienen kann[/SIZE][/FONT].

[FONT=Arial][size=12]Das span wird auf die Größe vom h1 aufgespannt und bekommt die HG-Grafik
zugewiesen.
Dadurch das es absolut positioniert ist, schwebt es praktisch über
der h1-Überschrift. Der Text wird also nicht aus dem Viewport geschoben
die Grafik wird einfach über den Text geschoben. So haben die
Sumas auch noch was zu indexieren. ;)

Je nachdem was du für ein line-height (in body?) definiert hast und ob #header HasLayout
hat ist beim IE oben eine kleine Lücke, bzw. wird die Grafik evtl. nicht oder nicht richtig angezeigt.
Dann gibst du dem IE per Cond. Comment einfach:

HTML

#header  {
   zoom:1;    /* Gibt Haslayout! */
   line-height:normal;  /* Läßt die Lücke verschwinden falls eine da war */
}

Ach ja, ein valides Dokument ist natürlich eine sinnvolle Grundlage, mit der man Fehler leichter in den Griff bekommt. ;-)
[/SIZE][/FONT]

retom1

hallo zusammen,
herzlichen Dank für die schnellen Antworten! Das ist ja wirklich klasse!

Ich bin leider ein ziemlicher Anfänger in der Website-Programmierung.
@ koslowski: in welches File und an welche Stelle schreibe ich diese HasLayout Definitionen? Ich finde nichts, was sich Cond.Comment nennt.
und der Teil #header kommt ins style.css anstelle von:

Code

{
    margin: 0;
    padding: 0;
    background: url(images/header.png);
    width: 800px;
    height: 262px;
}

?

Sorry für meine Unwissenheit, aber das ist für Leute für mich ja gerade das geniale an wordpress.. normalerweise bringen wir trotzdem eine funktionierende site zustande :)

viele Grüsse
Reto

koslowski

Hi,

du schreibst folgendes direkt unterhalb von dieser Zeile:

PHP

<link type="text/css" rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" media="screen" />

in die header.php:

PHP

<!--[if lt IE 8]><link rel="stylesheet" type="text/css" media="screen" href="<?php bloginfo('template_directory'); ?>/ie.css" /><![endif]-->

Das ist dein Cond. Comment.

Dann erstellst du mit deinem Editor eine ie.css.
Dort schreibst die Anwesiungen rein die nur für den IE gelten sollen.

Dann lädst du diese Datei in dein Theme hoch.

Die Quelltextänderungen schreibst du auch in die header.php innerhalb deines div#header.

Die CSS-Anweisungen für h1 und h1 span schreibst du in die style.css.

Und alles hochladen nicht vergessen. ;)

retom1

danke!

Eieieie. Tadelt mich, steinigt mich, lacht mich aus! :)

Es hat geklappt!! Nach langem hin und her probieren habe ich gescheiter Vogel bemerkt, dass eine ie-style.css existiert :D und dort sind natürlich alle designanpassungen die ich in der style.css vorgenommen habe nicht drin. Hab diese nun nachgetragen und es läuft...

Trotzdem vielen Dank für die Hilfe Koslowski und auch an Whoppy, ich werde versuchen die bestehenden Fehler noch zu korrigieren.

liebe Grüsse und danke nochmals
Reto

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Probleme Darstellung IE

Jetzt mitmachen!