Verschiebung im IE und Opera?

Status
Nicht offen für weitere Antworten.
O

Ogre

Mitglied
Aloah,

Ich bin gerade dabei ein Layout zu entwickeln. Das ganze habe ich - als großer Firefox-Fan - im Mozilla-Browser entwickelt. Wenn ich mir nun aber das ganze in Opera oder IE angucke, stelle ich einen kleinen Fehler fest:

http://home.arcor.de/spellsource/css/pigeon/

Das Menü auf der rechten Seite wird im Mozilla breiter dargestellt (wie es sein sollte) und in den anderen Browsern leicht zusammengeqetscht. Woran könnte das liegen?

Danke
O.
 
Hi

Was ich dir empfehlen würde: Mach mal Hintergrundfarben überall rein. Dann siehst du genau, wo welche Elemente sich befinden und kannst so effizienter arbeiten.

Desweiteren würde ich dir empfehlen eine Struktur, wie sie eine Navigation ist, als Liste zu implementiere. In deinem Fall vielleicht so:
HTML: 
<dl>
<dt>Menüpunkt 1</dt>
<dd>Das hier ist der erste Untertext</dd>
<dt>Menüpunkt 2</dt>
<dd>Das ist der zweite Untertext</dd>
<dt>Menüpunkt 3</dt>
<dd>Ich weis nicht was ich schreiben soll</dd>
<dt>Menüpunkt 4</dt>
<dd>Das ist schließlich nur ein Test</dd>
</dl>
Es ist nämlich so, dass, je simpler dein Code ist, desto grösser ist die Wahrscheinlichkeit, dass ihn auch alle Browser korrekt anzeigen.
 
Dein HTML-Dokument besitzt keine Doctype-Angabe, womit der IE 6.0 in den Quirks-Modus fällt und (wie seine 5er Vorgänger-Versionen) das Box-Modell nicht korrekt interpretiert.

In deinem Fall heisst das: der IE addiert den Innenabstand padding: 20px nicht zur Weiten- / Höhenangabe für das DIV #menu hinzu und das wird DIV mit einer Weite von 125px angezeigt. FireFox, Mozilla, Netscape berechnen die Breite aber nach dem Box-Modell: Innenabstand links + Weite + Innenabstand rechts = Gesamtbreite, also 20px + 125px +20px = 165px.

Lösung:
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> 
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title></title>
 
Sorry, habe gestern ganz vergessen, den Opera-Browser bei der Problemlösung zu berücksichtigen, da dieser das Box-Modell ja auch falsch interpretiert.

Lösung: der Innenabstand padding: 20px für das DIV #menu wird entfernt bzw. der Wert auf 0 gesetzt und die Weite auf 165px erhöht:

Code: 
#menu {
position: absolute;
width: 165px;
height: 300px;
margin-left: 500px;
margin-top: 180px;
padding: 0;
border-top: 1px dotted #643525;
}
Der gewünschte Innenabstand wird dann für ein weiteres DIV bestimmt, das den Inhalt umschliesst:

Code: 
.clMenu { padding: 20px; }
HTML: 
<div id="menu">
  <div class="clMenu">
           <!-- hier folgt der Inhalt -->
  </div>
</div>
Anmerkung: mit dieser Technik (= Weiten- und Höhenangaben nicht mit Innenabständen kombinieren) vermeidest du die Darstellungskonflikte bzgl. des unterschiedlichen Boxen-Modells im IE5 / IE5.5 und Opera-Browser.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück