✔ Umbruch im Firefox, bei rechter Box

[StefanR]

Hallo ich habe da nen Problem, mit der rechten Seite von meinen Boxen und zwar, wenn ich mir das ganze im Firefox anschaue, sieht das aus, als wenn ich da nen Zeilenumbruch drin hab, nur der IE zeigt das so an wies soll nämlich ohne den Abstand! Hab mal nen Screen von dem Effekt mitrangehang!

Und hier nochmal die CSS Datei:

html {
	height: 90%;
}
body{
	margin:0;
	padding:0 0 0 0;
	text-align:center;
	height: 100%;
}
p {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;		
}
#content {
	margin: auto;
	overflow:auto;
	width: 100%;
	text-align: right;
}
#header {
	background-image: url(logo.png);
	background-position: left;
	background-color: #E8E8E8;
	background-repeat: no-repeat;
}
#navi_top{
	height: 20px;
	text-align: left;
}
#content_area{
	width: 95%;
	margin: auto;
	min-height: 100px;
}
.left {
	float: left;
}
.left_clear {
	float:left;
	clear:both;
}
.right {
	float: right;
}
.right_clear {
	float: right;
	clear: both;
}
.box_mid {
	width: 120px;
	height: 23px;
}
.box_content_right {
	clear: both;
	float: right;
	width: 156px;
	border-right-width: 1px;
	border-left-width: 1px;
	border-right-style: solid;
	border-left-style: solid;
	border-right-color: #979797;
	border-left-color: #979797;
}
.box_content_left {
	clear: both;
	float: left;
	width: 156px;
	border-right-width: 1px;
	border-left-width: 1px;
	border-right-style: solid;
	border-left-style: solid;
	border-right-color: #979797;
	border-left-color: #979797;
}
.clearfix {
	display: block;
}

 

[Gumbo]

Bei so wenig Informationen rate ich einfach mal ins Blaue: Ändere mal die Reihenfolge der Elemente.

 

[StefanR]

Ah okay sry hab ja den HTML Teil nicht mit reingepackt:

<div class="box">
	<div class="left"><img src="box_oben_links.gif" alt="corner_left_top" /><img src="box_oben_mitte.gif" alt="top_mid" class="box_mid" /><img src="box_oben_rechts.gif" alt="corner_top_right" /></div>
	<div class="box_content_left">Hallo</div>
	<div class="left_clear"><img src="box_unten_links.gif" alt="corner_left_bottom" /><img src="box_unten_mitte.gif" alt="bottom_mid" class="box_mid" /><img src="box_unten_rechts.gif" alt="corner_bottom_right" /></div>
	</div>
	<div class="box">
	<div class="right"><img src="box_oben_links.gif" alt="corner_left_top" /><img src="box_oben_mitte.gif" alt="top_mid" class="box_mid" /><img src="box_oben_rechts.gif" alt="corner_top_right" /></div>
	<div class="box_content_right">Hallo</div>
	<div class="right_clear"><img src="box_unten_links.gif" alt="corner_left_bottom" /><img src="box_unten_mitte.gif" alt="bottom_mid" class="box_mid" /><img src="box_unten_rechts.gif" alt="corner_bottom_right" /></div>
	</div>

Und wie meintest das mit Reihenfolge der Elemente?

 

[Maik]

Vielleicht hilft dir diese Variante weiter:

.box_left {
        float: left;
}
.box_right {
        float: right;
}
.box_mid {
        width: 120px;
        height: 23px;
}
.box_content_right, .box_content_left {
        text-align: right;
        width: 156px;
        border-right-width: 1px;
        border-left-width: 1px;
        border-right-style: solid;
        border-left-style: solid;
        border-right-color: #979797;
        border-left-color: #979797;
}
.clear {
clear: both;
}

<div class="box_left">
        <div><img src="box_oben_links.gif" alt="corner_left_top" /><img src="box_oben_mitte.gif" alt="top_mid" class="box_mid" /><img src="box_oben_rechts.gif" alt="corner_top_right" /></div>
        <div class="box_content_left">Hallo</div>
        <div><img src="box_unten_links.gif" alt="corner_left_bottom" /><img src="box_unten_mitte.gif" alt="bottom_mid" class="box_mid" /><img src="box_unten_rechts.gif" alt="corner_bottom_right" /></div>
</div>

<div class="box_right">
        <div><img src="box_oben_links.gif" alt="corner_left_top" /><img src="box_oben_mitte.gif" alt="top_mid" class="box_mid" /><img src="box_oben_rechts.gif" alt="corner_top_right" /></div>
        <div class="box_content_right">Hallo</div>
        <div><img src="box_unten_links.gif" alt="corner_left_bottom" /><img src="box_unten_mitte.gif" alt="bottom_mid" class="box_mid" /><img src="box_unten_rechts.gif" alt="corner_bottom_right" /></div>
</div>

<div class="clear"></div>

 

[StefanR]

Vielleicht hilft dir diese Variante weiter:
[...]

Okay danke, das ging oder geht.

 

[Maik]

Dann markiere den Thread doch bitte auch als erledigt.