• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

ie / ff kompatibilität

J

jary

Neues Mitglied
Habe wie so häufig mit der Browserkompatibilität zu kämpfen.
Die Seite ist jetzt online und fast fertig. Ein klein wenig Arbeit noch, dann habe ichs auch geschafft, Inhalt und Layout von vorne bis hinten zu trennen...:smile:

Jetzt habe ich natürlich Kompatibilitätsprobleme, der ie stellt Seite nach links verschoben dar.

Die Seite: www.hausdermusik.info

Könnt ihr mir helfen?

thx!
 
Werbung:
Nimm diesen Doctype (in die allererste Zeile), dann sollte es klappen:
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
 
Dankeschön. Das war wohl zumindest der erste Schritt...:)
Geht jetzt in die richtige Richtung, aber das Menü klebt oben links, die Bilder rutschen nach.

Hab mal gelesen, des manche Browser kein padding, andre kein margin kennen. Liegt das daran? Wenn ich die Angaben im CSS bezüglich des Menüs verdopple und sowohl padding als auch margin mit den gleichen Werten setze, sieht die Seite im ff jedenfalls genauso falsch aus, wie im ie...:smile:

Hab ein wenig rumprobiert, bin aber leider zu keinem Ergebnis gekommen.:(

(Was das gleiche Thema, aber eigentlich nicht so wichtig ist: Warum sieht im ie der Schatten der mittleren Inhaltebox so bescheiden aus? Im ff sieht der Schatten so aus, wie ich ihn gebastelt habe...)
 
Werbung:
jary schrieb:
Hab mal gelesen, des manche Browser kein padding, andre kein margin kennen. Liegt das daran?
Zum Vergrößern anklicken....
Nein,
Du hast keine Einheit zu den margin und Paddingwerten geschrieben.
Code: 
         margin:203[COLOR="DarkRed"][B]px[/B][/COLOR] 0[COLOR="#8b0000"][B]px[/B][/COLOR] 0[COLOR="#8b0000"][B]px[/B][/COLOR] 110[COLOR="#8b0000"][B]px[/B][/COLOR];

jary schrieb:
Warum sieht im ie der Schatten der mittleren Inhaltebox so bescheiden aus? Im ff sieht der Schatten so aus, wie ich ihn gebastelt habe...)
Zum Vergrößern anklicken....
Ich finde sie sieht überall etwas grob aus.
Die Tranzparenz brauchst du nicht. Der mittlere (tranzparente) Bereich wird durch #wrapper abgedeckt.
 
Aber da stimmt noch einiges nicht, oder?
Dein Menü klebt bei mir (FF3) oben links in der Ecke, die Worte liegen übereinander, so dass man gar nichts lesen kann.
Die Bilder kleben rechts daneben am oberen Rand und sehen aus, als sollten sie eigentlich auch nicht da sein.

Zwei Fragen:
a) Warum zeichnest Du die Bilder nicht auch als Liste aus, wie das Menü? Ist doch auch eine Liste. Bei Dir haben die keine Bedeutung.
b) Warum machst Du den Bildwechsel mit JavaScript statt CSS?
 
...und wieder Dankeschön!

Den Schatten habich jetzt ohne Transparenz als jpg gespeichert. Jetzt passts.

zu a) und b)
Den Bildwechsel im CSS zu machen ist mir einfach nicht eingefallen...:smile:
Hab ich jetzt aber zumindest offline mal umgesetzt. Dazu hab ich die Bilder auch als Liste angeordnet, komme aber mit dem Listenlayout nicht zurecht. Kriege es entweder im ie oder im ff hin. Bei beiden gleichzeitig nicht.

Mein Menü passt jetzt im ff, im ie sind die Abstände zu groß. Aber alles, was ich anders schraube, macht mir die Abstände im ff kaputt (das gleiche habe ich übrigens offline mit den gelisteten Bildern...)
 
Werbung:
In welchem IE?
Im IE 7 und 8 kann ich keine Unterschiede zu FF erkennen.
Falls es der IE 6 ist, dann versuch's mal damit:

#navi li { width:21px;
float:left;
text-align:left;
font-family:arial;
font-size:0.9em;
font-weight:bold;
margin:203px 0px 0px 110px;
display: inline;
}
Zum Vergrößern anklicken....
 
Es ist der double-float margin Bug (IE5-IE6)
Er verdoppelt den margin-Wert wenn er in die selbe Richtung wie der float zeigt.
Code: 
#navi li { width:21px; 
         [COLOR="DarkRed"][B]float:left;[/B][/COLOR]
         text-align:left;
         font-family:arial;
         font-size:0.9em;
         font-weight:bold;
         margin:203px 0px 0px [COLOR="#8b0000"][B]110px[/B][/COLOR];
         }

Die Korrektur für den IE6 könnte so aussehen:
Code: 
* html #navi li { 
margin-left: 55px;
         }

@prm
display:inline hilft oft gegen den white-space Bug.
Er schlägt aber nur in vertikalen Listen/Menüs zu.
 
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben