IE 6 und CSS

[me_wa]

Ich bin durch die Google Suche hier gelandet. Mit dem IE 6 gibt es ja immer wieder Probleme. Habe mir auch "Bugs / Lösungen für Internet Explorer, Firefox und Co." hier durchgelesen, hab verschiedenes ausprobiert (display: inline;margin Werte verändert, etc.), ich komme aber einfach nicht auf die Lösung.

Ich habe eine neue Seite aufgesetzt www.fasten-ratgeber.de, und hätte mir eine Bekannte nicht gesagt, dass die Seite bei ihr total komisch aussieht hätte ich es wahrscheinlich nie bemerkt. Im IE 6 wird der Textbereich unterhalb des Menü angezeigt, allerdings mit dem dem richtigen Abstand von links. Mit meinem CSS Wissen und auch durch herumprobieren bin ich leider noch keine Lösung gefunden. Vielleicht kann ein Profi hier kurz mal draufschauen und mir einen Tipp geben.

[MrMurphy]

Hallo,

sauberer Quelltext, da macht das Testen mal richtig Spaß.

Ich würde die folgenden 3 Änderungen bzw. Ergänzugen durchführen:

1. Im HTML-Quelltext das Bild

<a href="http://www.fasten-ratgeber.de/" title="Fasten Ratgeber"><img src="Fasten%20Ratgeber%20-%20Themen%20%20Heilfasten,%20Fastenwandern,%20Fastenreisen,%20Fastenkur-Dateien/fasten-ratgeber.jpg" alt="Fasten Ratgeber" height="200" width="730"></a>

zwischen <div id="container"> und <div id="navigation"> verschieben, im Moment hängt es noch innerhalb der navigation.

2. In der CSS-Datei den Eintrag

div#container { text-align: left; margin: 5px auto; width: 730px; padding: 0; background-color: #FFFFFF; border:1px solid #84A2B4;}

um

position: relative;

erweitern.

3. In der CSS-Datei den Eintrag

div#navigation{width:200px; margin: 10px 0px 0px 0px;padding:0px; background-image: url(menu-bg.jpg); background-color: #FFFFFF;}

um

position:absolute; top: 215px; left: 0px;

erweitern. Den Wert für top kannst du natürlich noch nach Wunsch etwas anpassen.

Dann sollte es passen.

Gruss

MrMurphy

[me_wa]

Hallo MrMurphy,

danke für deinen Tipp, gleich der 1. hat das Problem gelöst. Die anderen hatte ich schon ausprobiert, hatte aber keine Auswirkungen mehr.

Das Bild hatte ich absichtlich in den Navigations-Div genommen, da ich sonst einen kleinen Abstand zwischen den Bild und der Navigation hatte, der eigentlich nicht gewollt war. Diesen sieht man jetzt auch (betrifft alle Browser soweit ich das testen konnte).

Für das Bild habe ich im CSS schon angegeben:

img { padding: 0px; margin: 0px; border: 0px;}

Im Content und Navi Div sind die Abstände auch mit 0 angegeben, und trotzdem ist der Abstand da. Vielleicht hat da auch noch jemand einen Tipp für.

[MrMurphy]

Hallo,

ich gehe mal davon aus, das dich der schmale weiße Rand zwischen dem Bild und dem Beginn der Navileiste stört.

Warum der dort auftaucht kann ich mir auch nicht erklären. Abhilfe scheint aber ein negativer Rand unterhalb des Bildes zu schaffen, also in der CSS-Datei den Eintrag

img { padding: 0px; margin: 0px; border: 0px;}

um den negativen unteren margin erweitern:

img { padding: 0px; margin: 0px; margin-bottom: -5px; border: 0px;}

Falls das unerwünschte Auswirkungen auf andere Grafiken hat musst du den negativen unteren Rand nur auf das gewünschte Bild beschränken.

Gruss

MrMurphy

[hero-master]

Moin
ich klinke mich mal ein in die gesellige Runde

Warum der dort auftaucht kann ich mir auch nicht erklären.

Das liegt daran, dass das Bild ein Inlineelement ist, sich also "so verhält" wie ein Text. Ein Bild endet bei der Grundlinie eines Textes. Doch gibt es noch Buchstaben mit einer Unterlänge (g,p,ß), für die Platz gelassen wird. Bei Texten fällt das nicht auf, bei Bildern desöfteren schon
Lösung: Gib dem Bild oben das Gefühl ein Blockelement zu sein:

a img {display:block}

Generell ist das Markup noch nicht ganz tiptop, aber das ist ja dann wieder eine andere Sache.
Im IE6 wirst du noch öfters Probleme bekommen, da du ihn durch das Einsetzen des XML-Prologs in den Quirksmodus schickst:
http://www.css4you.de/wsdoctypeswitch/index.html