kein float im IE

[wapplegraph]

Hallo

Im IE werden zwei Hauptelemente nicht gefloated.
Könnte mir jemand helfen?

<div id="balken_h">
		<div id="bilder_top">
			[COLOR="Red"]<div id="galerie"></div>
			<div id="einzel_bild"></div>[/COLOR]
		</div>
	</div>
	
	<div id="wrapper">
		[COLOR="Red"]<div id="wrapper_left">[/COLOR]
			<div id="navigation">

			</div>
			<div id="content">
		
			</div>
		</div>
		
		
		
		[COLOR="red"]<div id="balken_v">[/COLOR]
			
			<div id="navigation2"><a href="kontakt">Kontakt</a>
</div>

		</div>
	</div>

#galerie und #einzelbild sollte nebeneinander liegen
und #wrapper-left und #balken_v

div#galerie
			{
			width:800px;
			height:150px;
			background-image:url(../../images/hg/regenbogen.jpg);
			float:left;
			}
			
		div#einzel_bild
			{
			width:200px;
			height:150px;
			background-image:url(../../images/hg/wechsel/kraftort.jpg);
			margin-left:800px;
			clear:right;
			border-right:#000000 solid 2px;
			border-left:#000000 solid 2px;			
		
			}


div#wrapper_left
		{
		width:800px;
		
		background-color:#C9B62C;
		background-image:url(../../images/hg/ecken.jpg);
		background-position:left bottom;
		background-repeat:no-repeat;
		
		float:left;
		}

div#balken_v
		{
		width:200px;
		height:100%;
		overflow:hidden;
		margin:0px;
		
		background-color:#7691BC;
		
		border-left:#000000 solid 2px;
		border-right:#000000 solid 2px;
		
		clear:right;
		}

Merci wapplegraph

 

[mschoening]

Mach die Spalten mal nach diesem Prinzip:

<style type="text/css">
	.clear {
		clear: both;
	}
	
	#spalte1 {
		float: left;
	}
	
	#spalte2{
		margin-right: [Breite von "spalte1" plus Abstand];
	}
</style>

<div id="spalte1">
	Spalte 1
</div>

<div id="spalte2">
	Spalte 2
</div>

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

 

[hello]

dein code sieht ziemlich chaotisch aus (also zumindest hier) wenn er bei dir im prog auch so aussieht dan würde ich als erstes mal den ein bisschen struckturieren

ich würde den tipp von mschoening befolgen und auf sein prinzip wechseln
mfg
manuel

 

[wapplegraph]

Ja also er ist hier nicht so schön dargestellt, doch der Aufbau ist ja der gleiche.
Ich habe jetzt das von mschoenig angewandt einfach mit margin-left und das Resultat ist wie folgt:

Im IE 7 perfekt.
Im IE 6 kein float: siehe hier
Im IE 5.5 float bei den Bildern, jedoch kuriose Abstände und Breiten: siehe hier
Im IE 5.01 float, jedoch kleine Abstände: siehe hier

Ich würde sagen, die kleinen Abstandfehler hängen mit den Rahmen zusammen.

Hier wären alle Fotos.

 

[mschoening]

Hi,
ich hab mich auch vertan. Es müssen für den IE 6 beide Spalten gefloatet werden. Hab den Fehler leider nicht bemerkt gehabt. Sorry. Hier ist der korrekte Code:

<style type="text/css">
    .clear {
        clear: both;
    }
    
    #spalte1 {
        float: left;
    }
    
    #spalte2{
        [COLOR=Red]float: left;[/COLOR]
        margin-right: [COLOR=Red][nur der Abstand][/COLOR];
    }
</style>

<div id="spalte1">
    Spalte 1
</div>

<div id="spalte2">
    Spalte 2
</div>

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

 

[wapplegraph]

Hallo jetzt komme ich gar nicht mehr draus.

2x float:left
und margin-right?

Wenn ich dies ausprobiere, so gibt es ein riesen Chrüsimüsi.

 

[mschoening]

Mist ich bin einfach nicht konzentriert, kommt davon wenn man mit dem iPhone postet. Das margin-right muss natürlich in die #spalte1

 

[mschoening]

So jetzt sitze ich am Rechner. So gehört es sich:

<style type="text/css">
    .clear {
        clear: both;
    }
    
    .spalte {
        float: left;
        height: 100px;
        width: 100px;    
    }
    
    #spalte1 {
        background: #000;
        margin-right: 10px;
    }
    
    #spalte2{
        background: #ff0000;
    }
</style>

<div id="spalte1" class="spalte">
    Spalte 1
</div>

<div id="spalte2" class="spalte">
    Spalte 2
</div>

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

 

[wapplegraph]

Mhm

Das funktioniert gar nicht:

div#galerie
			{
			width:800px;
			height:150px;
			margin-right:200px;
			
			background-image:url(../../images/hg/regenbogen.jpg);
			
			float:left;
			}
			
		div#einzel_bild
			{
			width:200px;
			height:150px;
			background-image:url(../../images/hg/wechsel/kraftort.jpg);
			
			border-right:#000000 solid 2px;
			border-left:#000000 solid 2px;	
			
			float:left;		
		
			}

http://www.natur-raum.ch/aufbau/

 

[mschoening]

Doch das funktioniert: http://www.maximilianschoening.com/test_at.html