IE 5.5 bis 7 mehrere Probleme

[Haruzept]

Hallo Leute!

Ich habe mehrere Probleme mit den IE Browsern.

Alle Browser schieben die Navigation unter das Hintergrundbild

HTML Code:

<!-- Anfang von #navi -->  
<div class="navi">  
<ul style="list-style-type:none">  
<li class="navi1"><a href="index.html"><b>Startseite</b></a></li>  
<li class="navi1"><a href="firmenprofil.html">Firmenprofil</a></li>  
<li class="navi1"><a href="it-handel.html">Hard- und Software</a></li>  
<li class="navi1"><a href="angebote.html">Angebote</a></li>  
<li class="navi1"><a href="it-service.html">IT - Service</a></li>  
<li class="navi1"><a href="praesentationssysteme.html">Präsentationssysteme</a></li>  
</ul>  
<ul class="navi">  
<li class="navi1"><a href="kontakt.html">Kontakt</a></li>  
<li class="navi1"><a href="impressum.html">Impressum</a></li>  
</ul>  
<ul class="shop">  
<li class="navi1"><a href="http://shop.udo-gaertner.de/" target="_blank"><img src="Bilder/zumshop.png" alt="Shop"></a>  
</li>  
</ul>  
</div>  
<!-- Ende von #navi -->  

CSS Code:

.navi {  
  /*background-image: url('../Bilder/bg.gif');*/  
  margin-top: 0px;  
  padding-top: 10px;  
}  
  
.navi li {  
  display: inline;  
  padding-left: 10px;  
}  
  
.navi1 a:link {  
  color: #000;  
}  
  
.navi1 a:visited {  
  color: #000;  
}  
  
.navi1 a:hover {  
  color: #008080;  
}  
  
.navi1 a:active {  
  color: #000;  
}  

Problem 2:

Im IE 5.5 und 6 wird das Bild "Shop" mit einem Hintergrund dargestellt, obwohl das Bild trans. ist.

Problem 3:

Im IE 5.5 Geht der Hintergrund nur bis zum Bild "Shop"

Der CSS Code:

#text {  
  padding-left: 155px;  
  margin-top: -19px;  
  padding-top: 90px;  
  background-image: url('../Bilder/bg.gif');  
  min-height: 450px;  
  width: 845px;  
  height: 100%;  
}  

Mit freundlichen Grüßen

Haruzept

[Der Martin]

Moin,

Ich habe mehrere Probleme mit den IE Browsern.
Alle Browser schieben die Navigation unter das Hintergrundbild

welches Hintergrundbild? In deinem Codeausschnitt finde ich keins - bis auf das Hintergrundbild für div.navi, das du auskommentiert hast. Und was meinst du mit "unter das Hintergrundbild"? Ich sehe nichts, was ein irgendwie seltsames Verhalten auslösen sollte.

<!-- Anfang von #navi -->

<div class="navi">
<ul style="list-style-type:none">
<li class="navi1"><a href="index.html"><b>Startseite</b></a></li>
<li class="navi1"><a href="firmenprofil.html">Firmenprofil</a></li>
<li class="navi1"><a href="it-handel.html">Hard- und Software</a></li>
<li class="navi1"><a href="angebote.html">Angebote</a></li>
<li class="navi1"><a href="it-service.html">IT - Service</a></li>
<li class="navi1"><a href="praesentationssysteme.html">Präsentationssysteme</a></li>
</ul>
<ul class="navi">
<li class="navi1"><a href="kontakt.html">Kontakt</a></li>
<li class="navi1"><a href="impressum.html">Impressum</a></li>
</ul>
<ul class="shop">
<li class="navi1"><a href="http://shop.udo-gaertner.de/" target="_blank"><img src="Bilder/zumshop.png" alt="Shop"></a>
</li>
</ul>
</div>
<!-- Ende von #navi -->

  
Dafür fällt mir an diesem HTML-Ausschnitt auf, dass ...  
 \* du die Navigation in drei getrennte Listen aufteilst, anstatt zusammen zu  
   lassen, was zusammengehört.  
 \* div.navi dann überflüssig ist, da es dann nur ein Kindelement enthält,  
   also seine Formatierungen ebensogut auf das ul-Element anwendbar wären  
 \* alle Listenpunkte dieselbe Klasse haben, die Klasse somit überflüssig  
   ist, weil die li-Elemente auch über .navi li selektierbar sind  
  

> Im IE 5.5 und 6 wird das Bild "Shop" mit einem Hintergrund dargestellt, obwohl das Bild trans. ist.  
  
Etwa das hier:  
  `<img src="Bilder/zumshop.png" alt="Shop">`{:.language-html}  
  
Vermutlich verwendest du ein PNG mit Alphatransparenz, die der IE bis Version 6 nur mit Krücken und einem heftigen Tritt in den Hintern (Einsatz der protprietären CSS-Eigenschaft "filter") versteht.  
  

> Im IE 5.5 Geht der Hintergrund nur bis zum Bild "Shop"  
>   
> ~~~css

#text {  

>   margin-top: -19px;  
>   ...  
>   height: 100%;  
> }

Schade, dass in deinem HTML-Ausschnitt kein Element mit der ID "text" vorkommt. ;-)

So long,
 Martin

[Haruzept]

Ich habe das mit der Navi extra so gemacht, weil ich Kontakt und Impressum in die nächste Zeile haben möchte. Da in einer  Liste kein <br> erlaubt ist, habe ich es so gemacht.

Zum Bild mit "Shop"

Ich habe den Hintergrund mit Photoshop weggemacht und dann als .png gespeichert. Also das Bild selber hat kein Hintergrund.

Ich meine Das Hintergrundbild von der id text. Ich poste hier jetzt noch den HTML Teil davon. Den habe ich ganz vergessen. Sorry deswegen.

<!-- Anfang von #text -->  
<div id="text">  
<h3>Herzlich Willkommen auf unseren Internet-Seiten</h3>  
<ul id="schild">  
<li><img src="Bilder/b1.jpg" alt="Hard und Software"></li>  
<li><img src="Bilder/b2.jpg" alt="IT-Service"></li>  
<li><img src="Bilder/b3.jpg" alt="Präsentationssysteme"></li>  
</ul>  
</div>  
<!-- Ende von #text -->  

Ich habe den BG bei der Navi extra weg gemacht, damit ich sehe das der IE die Links hinter das Bild schiebt.

[Der Martin]

Hi,

Ich habe das mit der Navi extra so gemacht, weil ich Kontakt und Impressum in die nächste Zeile haben möchte. Da in einer  Liste kein <br> erlaubt ist, habe ich es so gemacht.

in der Liste selbst (also um ul-Element) ist kein <br> erlaubt, das ist richtig. Innerhalb der li schon. Aber du möchtest ja auch kein <br>, sondern einen Abstand. Es bietet sich also an, einzelnen li-Elementen ein zusätzliches margin-top oder margin-bottom zu geben. Wenn man die Listenpunkte mit IDs versieht (und nicht mit Klassen, wie du es gezeigt hast), kann man so jeden einzelnen Listenpunkt gezielt selektieren.

Natürlich ist die Unterteilung in mehrere Listen auch eine Möglichkeit; wenn du sie nur wegen der Darstellung wählst, ist sie aber eigentlich falsch. Denn semantisch gesehen ist die Hauptnavigation *eine* Liste von Links.

Zum Bild mit "Shop"
Ich habe den Hintergrund mit Photoshop weggemacht und dann als .png gespeichert. Also das Bild selber hat kein Hintergrund.

Trotzdem ist die spannende Frage: Benutzt du nur die binäre Transparenz (also nur 0%/100% transparent), oder verwendest du Teiltransparenz? Wenn du nur Volltransparenz im Bild verwendest, solltest du das PNG auch in diesem Format speichern, dann kommen alte IEs auch damit zurecht. Oder als GIF.

Ich meine Das Hintergrundbild von der id text. Ich poste hier jetzt noch den HTML Teil davon. Den habe ich ganz vergessen. Sorry deswegen.

Ach so. :-)

<!-- Anfang von #text -->

<div id="text">
<h3>Herzlich Willkommen auf unseren Internet-Seiten</h3>
<ul id="schild">
<li><img src="Bilder/b1.jpg" alt="Hard und Software"></li>
<li><img src="Bilder/b2.jpg" alt="IT-Service"></li>
<li><img src="Bilder/b3.jpg" alt="Präsentationssysteme"></li>
</ul>
</div>
<!-- Ende von #text -->

  
Und dazu gehört noch das CSS aus dem vorherigen Posting?  
  

> ~~~css

#text {  

>   padding-left: 155px;  
>   margin-top: -19px;  
>   padding-top: 90px;  
>   background-image: url('../Bilder/bg.gif');  
>   min-height: 450px;  
>   width: 845px;  
>   height: 100%;  
> }

Was war jetzt nochmal die Frage?

Im IE 5.5 Geht der Hintergrund nur bis zum Bild "Shop"

Hmmm. Da ist kein Bild "Shop".
Aber vielleicht hast du ein Problem mit der Höhenangabe 100%, bzw. erwartest etwas anderes. Diese 100% beziehen sich ja auf das Elternelement; wenn dieses selbst keine vorgegebene Höhe hat, richtet sich dessen Höhe aber wieder nach dem Inhalt. Folge: Die Angabe "100%" für das Kindelement ist wirkungslos, weil das Elternelement sowieso nicht höher ist.

Aber merkst du was? Es ist sehr schwierig, immer nur über Teilaspekte zu diskutieren, die aus dem Gesamtzusammenhang herausgelöst sind. Wir kommen andauernd an Stellen, wo wieder Zusatzinformationen fehlen. Daher bitte: Stell ein aufs Wesentliche reduziertes Online-Beispiel bereit, an dem man das Ganze im Zusammenhang sehen kann.

So long,
 Martin

PS: Ich bin (wie hier im Forum bekannt) einer der wenigen Exoten, die einen IE5.5 wirklich noch benutzen, daher als Testkandidat prädestiniert. ;-)
PPS: Willst du dir wirklich die Mühe machen, so alte Browser noch zu unterstützen, wo doch sogar IE6 schon stark rückläufig ist?

[Haruzept]

Ich poste mal ein Bild wie es in den alten Browsern aussieht.

Im IE 5.5 Geht der Hintergrund nur bis zum Bild "Shop"

Hmmm. Da ist kein Bild "Shop".

PPS: Willst du dir wirklich die Mühe machen, so alte Browser noch zu unterstützen, wo doch sogar IE6 schon stark rückläufig ist?

Ja, da es eine Firmenseite ist mache ich mir gerne die Mühe.

[Der Martin]

Hallo,

Ich poste mal ein Bild wie es in den alten Browsern aussieht.
Vergleich in IETester, 320k PNG

danke, jetzt kann ich mir schon wesentlich mehr vorstellen!

Im IE 5.5 Geht der Hintergrund nur bis zum Bild "Shop"

Das dürfte Zufall sein und von der Fensterbreite abhängen - oder legst du für die Navigation oder ein allumfassendes Containerelement auch eine Breite fest?

Das hier:

#text {

padding-left: 155px;

  
... dürfte dein Problem sein. Der IE5 mit seinem bekannten Box Model Bug berechnet die Breite von Elementen und Elementinhalten anders. Die korrekte Spezifikation besagt, dass die angegebene Breite (width) nur die Breite des \*Elementinhalts\* ist, und dass padding, border und margin zum Gesamt-Platzbedarf des Elements noch hinzugerechnet werden. Für den IE5 ist das padding dagegen schon Teil der Breite (width), das Element wird also entsprechend schmaler.  
  
Vermutlich wirst du hier eine Korrektur nur für IE5.x anbringen müssen und für diese Browser width:1000px; angeben.  
  

> > PPS: Willst du dir wirklich die Mühe machen, so alte Browser noch zu unterstützen, wo doch sogar IE6 schon stark rückläufig ist?  
> Ja, da es eine Firmenseite ist mache ich mir gerne die Mühe.  
  
Gerne? Naja, wenn's der Auftraggeber so will ... ;-)  
  
Übrigens: So wie das Shop-Bild auf mich wirkt, wäre hier tatsächlich ein Bild mit Palettenfarben und Volltransparenz (PNG oder GIF) angebracht.  
  
Ciao,  
 Martin  

-- 
[Gott hilft niemandem](http://forum.de.selfhtml.org/?t=134084&m=869527), er erfreut sich nur an unseren Leiden.  
  (Ashura)  

[Haruzept]

Ich bin es nochmal!

Zuerst Danke für eure Hilfe. Ich habe jetzt immer noch zwei Fehler, die ich nicht weg bekomme.

Ich jetzt fast alle Fehler behoben, bis auf das Problem mit dem IE 5 und 5.5 mit seinem Fehler und das bei 5-7 zwischen header und text sowie text und navi je 5 Pixel Abstand sind. Ich habe versucht diesen mit margin-top: -5px; zubeheben, diese Angabe hat aber keine Wirkung.

Hier der HEAD meiner Seite

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" lang="de-de">  
<title>UDO GÄRTNER GMBH - IHR IT-PARTNER</title>  
<link href="css/style.css" rel="stylesheet" type="text/css">  
<!-- [if !IE 8]>  
<link href="css/ie5-7.css" rel="stylesheet" type="text/css">  
<![endif]-->  

Hier der CSS Code von "ie-5-7.css"

#text {  
 	width:1000px;  
}

Gruß Haruzept.

[ChrisB]

Hi,

Ich jetzt fast alle Fehler behoben, bis auf das Problem mit dem IE 5 und 5.5 mit seinem Fehler

Welchem noch gleich - der Sache mit dem Hintergrund?

und das bei 5-7 zwischen header und text sowie text und navi je 5 Pixel Abstand sind. Ich habe versucht diesen mit margin-top: -5px; zubeheben, diese Angabe hat aber keine Wirkung.

Die vollständige Seite online betrachten zu können, würde es leichter machen, die von dir genannten Fehler nachzuvollziehen.

MfG ChrisB

[Haruzept]

Welchem noch gleich - der Sache mit dem Hintergrund?

Der Fehler mit dem Hintergrund ist auch noch da.

und das bei 5-7 zwischen header und text sowie text und navi je 5 Pixel Abstand sind. Ich habe versucht diesen mit margin-top: -5px; zubeheben, diese Angabe hat aber keine Wirkung.

Die vollständige Seite online betrachten zu können, würde es leichter machen, die von dir genannten Fehler nachzuvollziehen.

Mehr als den Code hier reinposten kann ich grade auch nicht. Ich habe schon ein Webspace bestellt, das sollte die Tagen online sein.

Der HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" lang="de-de">  
<title>UDO GÄRTNER GMBH - IHR IT-PARTNER</title>  
<link href="css/style.css" rel="stylesheet" type="text/css">  
<!-- [if !IE 8]>  
<link href="css/ie5-7.css" rel="stylesheet" type="text/css">  
<![endif]-->  
</head>  
  
<body>  
<!-- Anfang von #container -->  
<div id="container">  
  
  
<!-- Anfang von #header -->  
<div id="header">  
<img src="Bilder/kopf.jpg" alt="Kopf">  
</div>  
<!-- Ende von #header -->  
  
  
<!-- Anfang von #navi -->  
<div class="navi">  
<ul>  
<li><b>Startseite</b></li>  
<li><a href="firmenprofil.html">Firmenprofil</a></li>  
<li><a href="it-handel.html">Hard- und Software</a></li>  
<li><a href="angebote.html">Angebote</a></li>  
<li><a href="it-service.html">IT - Service</a></li>  
<li><a href="praesentationssysteme.html">Präsentationssysteme</a></li>  
<li><a href="http://shop.udo-gaertner.de/" target="_blank"><img src="Bilder/zumshop.png" alt="Shop"></a></li>  
<li><a href="kontakt.html">Kontakt</a></li>  
<li><a href="impressum.html">Impressum</a></li>  
</ul>  
</div>  
<!-- Ende von #navi -->  
  
  
<!-- Anfang von #text -->  
<div id="text">  
<h3>Herzlich Willkommen auf unseren Internet-Seiten</h3>  
<ul id="schild">  
<li><img src="Bilder/b1.jpg" alt="Hard und Software"></li>  
<li><img src="Bilder/b2.jpg" alt="IT-Service"></li>  
<li><img src="Bilder/b3.jpg" alt="Präsentationssysteme"></li>  
</ul>  
</div>  
<!-- Ende von #text -->  
  
  
<!-- Anfang von #footer -->  
<div id="footer">  
<p>Copyright © 2009 UDO GÄRTNER GMBH. Alle Rechte vorbehalten.</p>  
</div>  
<!-- Ende von #footer -->  
  
  
</div>  
<!-- Ende von #container -->  
</body>  
</html>

CSS Code:

@charset "utf-8";  
  
body {  
  font: 100% Verdana, Arial, Helvetica, sans-serif;  
  background-color: FFF;  
  margin: 0;  
  padding: 0;  
  text-align: center;  
  color: #000;  
  height: 100%;  
}  
  
#container {  
  width: 1000px;  
  height: 100%;  
  margin: auto;  
  text-align: left;  
}  
  
.navi {  
  background-image: url('../Bilder/bg.gif');  
  margin-top: 0px;  
  margin-top: -16px;  
}  
  
.navi li {  
  display: inline;  
  padding-left: 10px;  
}  
  
.navi li a:link {  
  color: #000;  
}  
  
.navi li a:visited {  
  color: #000;  
}  
  
.navi li a:hover {  
  color: #008080;  
}  
  
.navi li a:active {  
  color: #000;  
}  
  
#text {  
  padding-left: 155px;  
  margin-top: -19px;  
  padding-top: 90px;  
  background-image: url('../Bilder/bg.gif');  
  min-height: 450px;  
  width: 845px;  
}  
  
#schild li {  
  display: inline;  
  padding-left: 15px;  
}  
  
#footer {  
  background-image: url('../Bilder/bg_footer.gif');  
  font-size: 0.8em;  
  color: #FFF0F0;  
  text-align: center;  
  bottom: 0px;  
  margin-top: -16px;  
}  
  
h3 {  
  padding-left: 55px;  
}  
  
img {  
  border: 0px;  
}

Gruß Haruzept

[Haruzept]

Habe die Fehler jetzt alle behoben.

Danke für eure Hilfe!

[Gunnar Bittersmann]

@@Haruzept:

nuqneH

<div class="navi">
<ul style="list-style-type:none">

Auch diese Angabe gehört ins Stylesheet. Verwende nie Inline-Styles ('style'-Attribute)!

<li class="navi1"><a href="index.html"><b>Startseite</b></a></li>

Warum ist dieser Menüpunkt fett? Glaskugel: Ist das die gerade angezeigte Seite? Dann sollte sie im Menü nicht verlinkt sein. (Punkt 10 der zehn meist-missachteten Homepage-Design-Richtlinien [Nielsen])

<li class="navi1"><a href="firmenprofil.html">Firmenprofil</a></li>
--8<--
<li class="navi1"><a href="praesentationssysteme.html">Präsentationssysteme</a></li>
</ul>

Es ist nicht sinnvoll, allen Geschwisterelementen dieselbe Klasse zu verpassen, denn es wird ja nichts klassifiziert.

In CSS sind diese mit dem Nachfahrenselektor '.navi li' ansprechbar.

<ul class="navi">

Bist du sicher, dass du der Liste dieselbe Klasse geben wolltest wie deren 'div'-Elternelement?

Qapla'