Horizontaler Abstand im IE

[PeterBrand]

Die Suche hat mir schon einiges zu Abstand-Bugs im IE nähergebracht, jedoch für vorliegendes Problem fand ich nichts

Wie im Anhang zu sehen ist, bleiben im IE ein paar px Abstand zwischen dem linken und rechten Container. Egal ob ich beim 2. Container padding-left oder margin-left verwende. (siehe Anhang)

Wenn ich den ersten Container absolut positioniere klappt es - allerdings gibt es dann in der vertikalen Ausrichtung Unterschiede zw. IE und FF.

Theoretisch wäre es möglich beide Container absolut zu positionieren - aber naja... lieber wäre mir eine Lösung ohne dem.

Eine andere Möglichkeit wäre es, Bild und Inhaltstext in einen Container zu geben. Lieber hätte ich es allerdings getrennt.


Und dann gleich eine zweite Frage:
der rechte Container sollte sich über den ganzen Bildschirm erstrecken;
dzt. habe ich ein width: *;
Da erscheint aber ein Scrollbalken. Es scheint, als würde der Containter eine Breite von 100%+das padding haben.
Bei width: 100%; rutscht er überhaupt nach unten.

Welche Möglichkeit habe ich hierbei?

#bilder
{
	/* position: absolute; top: 136px; left: 0; */
	float: left;
	width: 268px;
	height: 349px;
	background-color: #385580;
	border-top: 1px solid #92A2B9; border-bottom: 1px solid #92A2B9;
}

#inhalt
{
	width: *;
	height: 349px;
	padding-left: 288px;
	background-color: #385580;
	border-top: 1px solid #92A2B9; border-bottom: 1px solid #92A2B9;
	font-family: Verdana, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: normal; color: #252E3C; text-decoration: none;
}

[Boris]

1. Ist * als Angabe im CSS nicht erlaubt

2. Du hast die Wahl zwischen einer festen Angabe (in px) oder variabel mit 100% (100% des gesamten Fensters) oder auto (der Platz, der maximal verfügbar ist - das ist Standardmäßig so gesetzt für Blockelemente wie DIV, P etc.).

3. Wenn Du einen Container willst, der sich über die ganze Breite erstreckt, so wird das ein wenig anders realisiert. Definier nur den Container ohne jede Breitenangabe, er ist somit so breit, wie es halt möglich ist (=auto). Mit margin oder padding definierst Du dann den Abstand von einer Navileiste oder ähnlichem.

[PeterBrand]

Ja, danke -> stimmt, "auto" wäre korrekt - und der Scrollbalken kam letztendlich durch einen anderen Container zustande.
Was Problem Nr. 2 gelöst hätte


Bei Nr. 1 habe ich jetzt mal einen übergeordneten Container definiert, in dem die HG-Farbe und die Balken oben/unten definiert sind.
Und da hinein gebe ich einen Container "#bilder" und einen "#text" - damit spielen die paar px Abstand keine Rolle.

Aber falls noch einer eine Idee zu diesem Problem hat, nur her damit.

[PeterBrand]

Möchte dieses Thema nochmal anschneiden - im oberen Fall konnte ich den horizontalen Abstand umgehen, jetzt habe ich wieder den selben Fall.

Ein Container links mit float: left; und einen rechts dran -> nur im IE bleiben 2px Abstand.
margin und padding ist alles auf 0.

In dem Fall kann ich den rechten Container zu Not absolut positionieren, sprich meistens gibt´s ja einen Ausweg, aber kann man diesem Problem nicht anders Herr werden und dem IE sagen, dass er diesen Abstand gefälligst unterlassen soll?

[wys]

Mal ins Blaue geschossen: Oftmals entsteht ein solcher Abstand dadurch, dass sich im HTML-Code zwischen den Containern ein Whitespace befindet. Der IE zickt dann manchmal.

[Boris]

@Peter:
Kannst du das mal online stellen?

[PeterBrand]

Hier die Testdatei ... und die zugehörige CSS-Datei.

Hab´s auf das nötigste reduziert und den Containern HG-Farben gegeben.
(seltsamerweise wird hier jetzt im FF, das Bild nach unten geschoben - ursprünglich war die Überschrift und ein weiterer Content-Container in einem umschließenden DIV, das mit float: left; versehen war)

Egal, im IE bleibt der Abstand, auch wenn ich jedes einzelne Leerzeichen entferne und alles in einer einzigen Zeile schreibe, bleibt dieser Abstand...

[Boris]

Als erstes Vergib den Bildern mal ein display: block; dann verschwindet erstmal der 3px Rand an der unteren Seite - und lade es dann nochmal hoch.

EDIT:
Kannst du mir mal zeigen, was das genau (fertig als Website) werden soll? Vielleicht lässt sich das einfacher "bauen"

[PeterBrand]

Als erstes Vergib den Bildern mal ein display: block; dann verschwindet erstmal der 3px Rand an der unteren Seite - und lade es dann nochmal hoch.

Danke schon mal... damit sitzt es auch wieder im FF - auf den IE-Abstand wirkt es sich nicht aus...

Die fertige Website ist komplett simpel aufgebaut, und wenn ich das Bild rechts absolut positioniere, brauche ich auch nicht den angesprochenen umschließenden Container.

Aber prinzipiell würd´s mich interessieren, ob man diesen Abstand wegbekommt. Das kann doch nicht wahr sein...

[Boris]

Vielleicht ist es ja dieser Bug?
http://www.positioniseverything.net/...reepxtest.html

[webmichl]

Da ich zufälligerweise gerade mit dem selben Problem kämpfe, klink ich mich hier einfach mal ein. Der Fehler tritt auch bei folgendem völlig simplen Beispielcode auf:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
<style type="text/css">
<!-- 
body { margin: 0px; padding: 0px;
background-color: yellow;
}
#links { width: 50%;
background-color: silver;
height: 400px;
float: left;
margin: 0px;
}
#rechts { background-color: orange;
height: 400px;
margin: 0px;
}
-->
</style>
</head>
<body>
<div id="links">&nbsp;</div>
<div id="rechts">&nbsp;</div>
<br style="clear: both;">
</body>
</html>

Genau wie Peter hab ich hier im Internet Explorer einen Leerraum zwischen dem grauen und dem orangenen DIV. Und genau wie er hab ich auch schon mit verschiedenen Varianten rumprobiert - ohne Erfolg.

[Boris]

Also, das ist der 3px Bug des IEs, denn man z.B. beseitigen kann, indem man das andere DIV ebenfalls floatet (rechts oder links) und eine Breite vergibt, z.B.:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<title>Untitled</title>
<style type="text/css">
*
{
	margin: 0;
	padding: 0;
	border: 0 none transparent;
}


body
{
	background-color: yellow;
}

#inhalt
{
	width: 100%;
}

#links
{
	float: left;
	width: 40%;
	background-color: silver;
	height: 400px;
}

#rechts
{
	float: left;
	width: 60%;
	background-color: orange;
	height: 400px;
}
-->
</style>
</head>
<body>

<div id="inhalt">
	<div id="links">Links</div>
	<div id="rechts">Rechts</div>
</div>

	<br style="clear: both;">
</body>
</html>

[Terry]

Das ist der 3-px-Jog der IE. In diesem Thread aus einem Fremdforum wird er von allen Seiten beleuchtet: http://www.xhtmlforum.de/viewtopic.php?t=1770

[Boris]

Sag ich doch

[PeterBrand]

Sehr schön - dann hätten wir das geklärt

Genau: (in meinem Fall) auch den 2. Container mit einem float versehen, und es passt...