✔ height-Angabe macht Probleme mit Layout

[Chandini]

Hallo zusammen,

der Inhaltsbereich meiner Homepage ist aufgeteilt in einzelne Inhaltsblöcke. Jeder besteht aus einem div für die Überschrift und einem div für den Text.
Dabei ist bei manchen Blöcken die Angabe einer Höhe nötig. Sobald ich aber eine Höhe eingebe, schließt die Überschrift auf der linken Seite nicht mehr mit dem Inhalt ab (siehe Bild im Anhang). Allerdings nur im IE, beim Rest klappt es. Entferne ich die height-Angabe, ist der linke Rand komplett bündig.

Hier mal der CSS-Code:

  #menuref {
	position: relative;
	border-width: 1px;
	border-color: #000000;
	border-style: solid;
	padding-bottom: 20px;
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 10px;
	margin-bottom: 20px;
	display: block;
  }

  #menurefrechts {
	position: relative;
	float: right;
	text-align: center;
	padding-bottom: 20px;
  }

  #menureflinks {
	position: relative;
  }

  #ueberschrift {
	position: relative;
	background-color: #009999;
	color: #ffffff;
	font-family: Tahoma;
	font-size: 14px;
	font-weight: bold;
	padding-left: 20px;
	padding-top: 1px;
	padding-bottom: 1px;
	border-left-style: solid;
	border-left-color: #000000;
	border-left-width: 1px;
	border-top-style: solid;
	border-top-color: #000000;
	border-top-width: 1px;
	border-right-style: solid;
	border-right-color: #000000;
	border-right-width: 1px;
	margin-bottom: 0px;
  }

Und hier der HTML-Code dazu:

<div id="ueberschrift">Titel</div>
<div id="menuref" class="normal" style="height: 171px">
  <div id="menurefrechts" style="width: 152px">
	<img src="images/test.jpg" alt="" width="150" height="169">
  </div>
  <div id="menureflinks" style="margin-right: 152px">
	Inhalt
  </div>
</div>

Dabei ist es egal, ob ich die Höhe im CSS-Code oder im HTML-Code (so wie jetzt hier) angebe.

Wie krieg ich es jetzt hin, dass es auch im IE richtig angezeigt wird?

Viele Grüße,
Ines

 

[deepthroat]

Hi.

Also ich hab das mit deinem Beispiel gerade ausprobiert und bei mir ist es bündig.

Kannst du mal ein komplettes, minimales Beispiel bauen wo das von dir beschriebene Problem auftritt?

Gruß

 

[Chandini]

Hi auch,

ich habe das auf meiner Homepage öfter verwendet. Auf manchen Unterseiten klappt es, auf anderen nicht. Mit ganz genau demselben Code.

Hier mal ein Link zur Homepage
Link

Wenn du auf Unternehmen - Referenzen gehst, funktioniert es. Auf Portfolio - ERP-Lösungen - kleine Unternehmen klappt es nicht.

Code ist genau derselbe, der einzige Unterschied ist, dass es unterschiedliche Höhenangaben sind. Der Fehler tritt auch nur beim ersten Inhaltsbaustein auf, der zweite und weitere werden korrekt angezeigt.
Wenn ich den ersten Textbaustein von den Referenzen auf die Seite kopiere, auf der der Fehler auftritt, dann tritt der Fehler da auch auf.

Viele Grüße,
Ines

 

[Quaese]

Hi,

es handelt sich offensichtlich um den 3-Pixel-Bug des IE. Hierbei werden Elemente, die neben einem
gefloateten Element positioniert sind, um eben 3 Pixel verschoben. Abhilfe schafft das negative
Verschieben des betroffenen Elementes mit Hilfe von margin.

<div id="menuref" class="normal" style="height: 171px; margin-left: 0 !important; margin-left: -3px;">

Das margin mit der Important-Regel steht für Nicht-IE-Browser.

Weiterhin ist mir aufgefallen, dass deine Navigation ab einer Breite von 1005 Pixel nicht mehr korrekt
funktioniert. So ist es mir zum Beispiel nicht mehr möglich, einen Punkt aus dem zweiten Submenue
auszuwählen.

Ciao
Quaese

 

[Chandini]

Hallo auch,

super hat funktioniert! Danke!

Hmm... das mit dem Menü klappt bei mir auch mit einer Auflösung von 1.280 x 1.024. Werd's mal noch auf nem anderen Monitor testen.

Viele Grüße,
Ines

 

[Quaese]

Hmmm,

da habe ich mich wohl undeutlich ausgedrückt. Ich meinte ab bei einer Breite von
weniger als 1006 Pixel, also ab 1005 Pixeln abwärts. Dann rutscht der letzte
Menupunkt (Service) in die nächste Zeile und stört wie schon erwähnt die zweiten
Submenues - zumindest im Firefox.

Ciao
Quaese

 

[Chandini]

Auch bei einer Auflösung von 1.024 x 768 funktioniert es noch. Nur kleiner darf's nicht werden *g*

Aber das wird noch geändert. Dass sich halt nichts mehr verschiebt, sondern statt dessen ein horizontaler Scrollbalken kommt, wenn das Fenster zu schmal ist.

Viele Grüße,
Ines