✔ IE-Problem mit DIV-Positionierung

Status
Nicht offen für weitere Antworten.
N

Nexlamar

Erfahrenes Mitglied
Morgen!

Habe folgendes Problem:

Möchte ein DIV-Tag mit "Unter-DIVs" in ein bestehendes Tabellenkonstrukt einbauen.

Das ganze soll im Prinzip so aussehen:

<DIV>
<DIV>...</DIV> <!-- Große Boxt -->
<DIV>...</DIV><DIV>...</DIV> <!-- 2 kleine Boxen, die rechte enthält ein IMG -->

</DIV>
... Weiterer Website-Content

Mein Problem ist, daß zwischen den 2 kleinen DIV-Boxen im IE ein minimaler Abstand entsteht. Dieser verschwindet, wenn ich die rechte kleine DIV-Box mit float:left versehe. Dann floatet der ganze DIV-Kram aber links im den folgenden Website-Content, was ich nicht will. Das alles umschließende DIV ist mit clear:right versehen. Wie bekomme ich den Abstand weg?

Hier nochmal Auszüge aus dem Quelltext:

<div class=title_rahmen>
<div class=title_top><IMG src="index-Dateien/startseite.jpg"></div>
<div class=title_text>
<H1>Überschrift</H1>Laber Laber Frittenbude</div>
<div class=title_image><IMG src="images/bild.jpg"></div>
</div>

CSS:

.Title_Top {
margin:0px;
padding:0px;
}

.Title_rahmen {
clear:right;
}

.Title_Text {
width: 250px;
font: normal 11px Verdana, Arial, Helvetica, sans-serif;
color:#000000;
background-color:#B8CCDA;
float:left;
margin:0px;
padding:3px;
}

.Title_Image {
margin:0px;
padding:0px;
}

Merci!

LG,
Markus
 
Code: 
<div class="container">
	<div class="header">
		kopf
	</div>
	<div class="left">
		links
	</div>
	<div class="right">
		rechts
	</div>
</div>


.container {
	width:			400px;
        background-color: #F00;
}
.left {
	float:			left;
	width:			300px;
        background-color: #0F0;
}
.right {
	margin:			0 0 0 300px;
        background-color: #00F;
}
 
Hi!

Merci für Deinen Code - der ist schlanker und eleganter als meiner - löst aber das Problem im IE nicht (wohlgemerkt in Firefox ist alles optimal). Versuche Mal einen Screen zu posten ...

Check this: Screen

LG,
Markus
 
Also bei mir geht der Codesnippet einwandfrei im Internet Explorer.
Hast du auf Doctype usw geachtet?

Hier mein kompletter Test:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html lang="de">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<style type="text/css">
		.title_container {
			width:				400px;
		}
		.title_top {
			background-color:	#F00;
		}
		.title_left {
			float:				left;
			width:				300px;
			background-color:	#0F0;
		}
		.title_right {
			margin:				0 0 0 300px;
			background-color:	#00F;
		}
		</style>
	</head>

	<body>
	
		<div class="title_container">
			<div class="title_top">
				der titel
			</div>
			<div class="title_left">
				links
			</div>
			<div class="title_right">
				rechts
			</div>
		</div>
		
	</body>
	
</html>

// Edit, hab dir das Beispiel mal hochgeladen:
http://www.web-creations.at/test.php
 
Zuletzt bearbeitet:
Merci - mit Text im rechten Tag funktioniert es auch prima, aber wenn da ein Bild drin steht, ergibt sich der Spalt. Den obigen Spalt habe ich mittlerweise wegbekommen. (Durch entfernen von Leerzeichen im Quelltext!?)
Das mit dem Doctype ist ein Problem. Verwende
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
Wenn ich mit XHTML arbeite vermehren sich die W3C-Fehler meines Vorgängers um den Faktor 10 und ich kann leider nicht das ganze System umprogrammieren..

Lg,
Markus
 
Das Problem das du Ansprichst mit dem Bild kommt mir bekannt vor.

Mach ein <br /> nach dem <img> rein. Klingt Blöd. Ist Blöd. IE.

Sprich:

<div class="title_right">
<img src="deinbild.png" /><br />
</div>

grüße
Samuel Weber
 
... ich habs gepackt!

Das ist zwar übel getrickst, aber <br> hat auch nicht hingehauen (das klappt glaube ich nur bei img im gleichen DIV). Das hat es gemacht:

.right img {
margin-left: -3 px;
}

Man sollte MS diese unnütz vergeudete Zeit in Rechnung stellen in der Hoffnung daß sie irgendwann ihren Browser korrigieren ...

Merci nochmal.

LG,
Markus
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück