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

Fehler im IE

Status
Für weitere Antworten geschlossen.
I

Icy

Neues Mitglied
Mal wieder läuft im FF udn Opera alles super und im IE nicht. Vielleicht könnt ihr mir ja helfen :-/
Es geht um folgende Seite: klick
Link zur CSS-Datei: klick

Jetzt habe ich drei Fehler im IE:

1. Seite wird nicht zentriert angezeigt
Habe aber den alles umfassenden Container wie folgt definiert:
HTML: 
#box {
	margin-left: auto;
	margin-right: auto;
}

2. Der Hintergrund der Navi-Leiste ist rechts nicht breit genug
Ich habe aber die Hintergrundgrafik auf repeat gestellt, also sollte es doch eigentlich bis zum Ende wiederholt werden?

3. Die Navi-Leiste hat einen kleinen Abstand zum Header
Obwohl ich margin-top auf 0 gestellt habe:

HTML: 
#navi {
	margin-top: 0px;
}


Ich hoffe ihr könnt mir mal wieder helfen :)

MfG Icy
 
zu 2. Da der IE das padding (jeweis 5px) nicht zur gesamtbreite hinzurechnet,
musst du die manuell machen. Setze mal folgendes hinzu:
Code: 
#navi {
    width: 583px;
[COLOR=Blue]    w\idth:593px;[/COLOR]
    height: 20px;
    background: url(img/navi.png);
    padding: 5px;
    margin-top: 0px;
    text-align: center;
}
Dann dürfte dieses Problem ersteinmal vom Tisch sein.
 
Zuletzt bearbeitet:
Hi,

Code: 
#box  { margin:0 auto;  }

sollte die Seite zentrieren.

Normal ist aber auch:
Code: 
*  { padding:0; margin:0; }
in der ersten Zeile deiner CSS.
Dann hast du mehr Kontrolle über die Abstände in den unterschiedlichen Browsern (nachfolgend müssen natürlich alle Abstände entsprechend definiert werden).

Wenn du oben und unten noch Abstand brauchst bitte die 0 ersetzen.

zu 2:
Code: 
background: url(img/navi.png);

.png-Dateien sind beim IE problematisch nimm besser .jpg oder .gif

Muss das nicht so formatiert werden:
Code: 
background:#hintergrundfarbe url('deinegrafik.jpg') repeat-x top left;

bei dir sehe ich kein repeat und keine Positionierung.

zu 3:
dadurch das du die browserinternen Vorformatierungen nicht durch *..(siehe weiter oben) ausgeschaltet hast, kann es sein, das der IE beim header ein margin-bottom macht beim FF aber nicht.
 
Ie6

Ich glaube ihr habt beide recht,
Der IE6 wendet das fehlerhafte Boxverhalten im Quirks Mode bei border und padding an.

In diesem Fall schaltet der IE in den Quirks Mode, da keine Doctype angegeben wurde
 
Da hast du natürlich recht. Aber ich habe auch sch***e geschrieben.
Deine CSS mußt du wie folgt ändern:
Code: 
#navi {
    width: 583px;
    height: 20px;
    background: url(img/navi.png);
    padding: 5px;
    margin-top: 0px;
    text-align: center;
}
* html #navi {  /* nur fuer Internet Explorer */
     w\idth: 593px; 
}

Oder du setzt einfach ein DOCTYPE, im besten in STRICT. Ich habe die erfahrung gemacht, das der IE dann das Box-Modell richtig anzeigt.
 
Hey klasse, danke euch allen.

Jetzt bleibt aber nur noch der Fehler, dass zwischen Header und Navi ein kleiner freier Streifen ist (obwohl ich margin auf 0 gesetzt hatte).

Außerdem die Frage: Ich habe versucht, die Navi-Links mit text-align: justify; auszurichten (also im Blockformat). Leider nimmt er das nicht an :(

MfG Icy
 
Da bin ich mir jetz nicht sicher. Aber ich glaube, den Blocksatz kann man in einzeilig nicht darstellen.

Und mit dem Abstand, weiss ich jetzt auch nicht weiter. Tut mir leid.
 
Hi,

Der IE6 wendet das fehlerhafte Boxverhalten im Quirks Mode bei border und padding an.
Zum Vergrößern anklicken....

@neuroleptika
exakt! :-)

@nichtsgehtmehr
äh...,*räusper*, ich glaube es ging um den Abstand nach oben und nicht zur Seite. *stimmeimmerleiserwerdend*

Lese hier:
SELFHTML: Stylesheets / CSS-Formate definieren / Das CSS Box-Modell
Und in deinem Link steht es auch:
Zitat:
Vereinfacht dargestellt: Den Bereich der Hintergrundfarbe (width + 2 x padding, height + 2 x padding) reduziert der IE auf die Werte von width und height.
Der Internet Explorer kennt natürlich den Innenabstand, nur stellt er das Element kleiner dar, als seine Browser-Kollegen.
Zum Vergrößern anklicken....

Das Problem mit dem Innenabstand hatte ich in noch keiner meiner erstellten Webseiten.
Imho liegt das daran das ich immer einen CSS-Prolog definiere
(* { padding:0; margin:0; } und noch einige andere ganz oben in der CSS ).

Vielleicht war mein link nicht der Beste, Bücher sagen das nämlich nicht so.

Selfhtml ist ein gutes Nachschlagewerk, aber ich habe gelernt, da manche Aussagen mit Vorsicht zu genießen:z.B.
Die dortige Behauptung die Größeneinheit pixel (px) sei eine
absolute/relative Einheit ist z.B. blanker Unsinn und läßt sich schon mit wenigen dürren Sätzen für jeden nachvollziehbar widerlegen.

Nicht sauer sein wegen meiner Widerrede, aber vielleicht haben wir alle was von so einer kontroversen Diskussion. :wink:
 
Nee, sauer bestimmt nicht, und ich lasse mich gerne eines besseren belehren. Ich weiss leider auch nicht alles, und lerne gerne noch was dazu. ;-)

Edit:
@nichtsgehtmehr
äh...,*räusper*, ich glaube es ging um den Abstand nach oben und nicht zur Seite. *stimmeimmerleiserwerdend*
Zum Vergrößern anklicken....
Nee, es ging um den Punkt 2 - war vielleicht meine schuld, das ich zuerst Punkt 3 geschrieben hatte, aber dann geändert. das hast du evtl. zu spät mitbekommen.
 
Hi,

Nee, es ging um den Punkt 2 - war vielleicht meine schuld, das ich zuerst Punkt 3 geschrieben hatte, aber dann geändert. das hast du evtl. zu spät mitbekommen.
Zum Vergrößern anklicken....

umpf...:oops:

Wer lesen kann ist im Vorteil!

Jetzt bleibt aber nur noch der Fehler, dass zwischen Header und Navi ein kleiner freier Streifen ist (obwohl ich margin auf 0 gesetzt hatte).
Zum Vergrößern anklicken....

body margin:0 zu geben reicht imho nicht aus, probiers mit dem *-selektor wie schon von mir beschrieben (dann mußt du natürlich die anderen Abstände evtl. neu definieren),
oder gib #header noch mal extra margin-bottom:0; z.B..

text-align:justify ist natürlich kokolores.

Du definierst deine navi semantisch falsch.

Das ist semantisch eine ungeordnete Liste und dahinein gehört sie gepackt.

Du hast zwei Möglichkeiten das zu tun:
1. mit display:inline;
Das sieht dann so aus:
Code: 
#navi li  { display:inline; padding-left:1em; }

Alles ist hübsch nebeneinander. padding dient um Abstand zwischen den Listenpunkten herzustellen.
Das ist die einfachste Möglichkeit.

2. Du läßt die Liste floaten , dann hast du mehr Einfluß auf die Darstellung, brauchst aber Extraregeln für den IE und mußt natürlich hinterher an der richtigen Stelle clearen.

 
Um auf den weißen Streifen unter dem Bild zurückzukommen:
HTML: 
img {
display : block;
}
Und der Streifen ist weg.

Komisch, genau den gleichen Tipp habe ich heute schon mal wegen einem Bild in einer Tabellenzelle gegeben.
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben