Spalten mit DIVs führt zu Problemen nachfolgender Zeilen

1 millz (Gast)

Hallo Ihr.

Ich habe ein relativ einfaches Problem, das nur beim IE auftritt. der Firefox macht alles prima. Ebenso der Opera und der Netscape. Also brauche ich zur Lösung meines Problems ein IE-spezifisches CSS-File um Cross-Browser-Compatibility zu garantieren.

Ich habe folgendes einfaches Codefragment:

<div class="l_i-" style="cursor:hand">
<div class="dreigeteilt">
  <div class="vorne">
    <a href="localhost"><img src="gfx/spacer.gif" width="21" /></a>
  </div>
<div class="mitte">
  <a href="localhost">
    Menuepunkt
  </a>
</div>
<div class="hinten">
  <img src="gfx/menue/pfeil2.gif" />
</div>
<div class="clearBoth"></div>
</div>
</div>

Dieses Code-Fragment wiederholt sich beliebig oft. Je nach dem wieviele Menüpunkte es gibt.
Im IE wird mir aber ein Zeilenumbruch nach dem Pfei und vor dem "menüpunkt" angezeigt.
So hier: screenshot

2 Jörg Kruse

Hallo millz,

wie sehen denn die dazu gehörigen CSS-Angaben aus? Ohne Formatierung ist der Umbruch bei Divs die Normaleinstellung der Browser

3 millz (Gast)

Huch, die hab ich voll vergessen :D.

Für den Firefox, wo es ja funktioniert:

.dreigeteilt{
line-height: 21px;
}
.vorne{
	display: inline;
	float: left;
}
.mitte{
	display: inline;
	float: left;
}
.hinten{
	position:absolute;
	left: 200px;
}

für den IE hab ich bisher:

.dreigeteilt{
line-height: 21px;
}
.vorne{
	float: left;
}
.mitte{
	margin: auto;
}
.hinten{
	display: inline;
	position: absolute;
	left: 200px;
}

4 Jörg Kruse

Du musst für .hinten auch noch eine top-Angabe machen:

.hinten{
position: absolute;
border:1px solid green;
left: 200px;
top:0;
}

... dann klappt's auch im IE. Die Angabe display:inline; kann dafür entfernt werden, da sie bei absoluter Positionierung keinen Effekt erzielt

5 millz (Gast)

Hey.

Mit "top: 0" wird der pfeil ja ganz oben am Bildschirm positioniert.
Das ist nicht gewollt. der Pfeil wird immer bei dem menüpunkt angezeigt, der gerade aktiv ist.
Geh einfach mal auf www.da-mille.de/schoenerstein.de
Gugg dir das ganze mal mit dem IE und einmal mit dem FF an.
(Der Pfeil ist vorerst aber nur bei erster Ebene zu sehen).

MfG

6 Jörg Kruse

OK, das ggeht so natürlich nicht. Probier es mal mit position:relative und negativem top-Wert (und das display:inline; wieder reinnehmen):

.hinten{
display: inline;
position: relative;
top:-21px;
left: 200px;
}

7 millz (Gast)

Soweit, sogut.
Bis hierher schonmal danke.
Also ich vollführe die Änderungen natürlich nur an der CSS Datei für den IE.

leider bürgt die CSS angabe "left: 200px" das PRoblem, das die 200 Pixel abstand zur Linken seite relativ zur DIV-Box ist, welche den Menüpunkt beinhaltet. Das wäre ja alles kein Problem, wäre die Box immer gleichgroß. Da aber verschiedene menüpunkte eine verschiedene länge aufweisen, ist der Pfeil nie Rechtsbündig zum rechten Rand des Menüs (Wie im FF).
ICh hab mir überlegt:
a) einfach nur eine Breite für den DIV Containter festlegen, welcher die Menüpunkte beihaltet. also class="mitte". Das wäre die einfachste und praktischste Lösung?

8 Jörg Kruse

Ja, mit einer festen Breite für .mitte sollte .hinten wohl bündig sein

9 millz (Gast)

Soweit so gut.
Jetzt hab ich nur noch ein Problem, dass ich mir überhaupt nicht erklären kann.
Könntest du dich mal durch das menü klicken (mit dem IE)?
Manchmal werden noch Zeilenumbrüche angezeigt, die für mich nich nachvollziehbar sind.
Bsp:
Wenn das menü vollständig aufgeklappt ist und ein Menüpunkt aktiv ist, wird "WIR" falsch angezeigt.
Kannst du mir auch da helfen?

10 millz (Gast)

hat sich geklärt, ich realisiere es über absolute abgaben beim bild. die Position errechne ich mittels php

nach oben

Spalten mit DIVs führt zu Problemen nachfolgender Zeilen

Beitrag schreiben (als Gast)

Verwandte Themen