4 gefloatete Container u. 1 positionierte - Probleme b. IE

nathalie-anne · #1 (**permalink**) 24.10.2005, 21:37

Hallo miteinander,

nach wochenlanger Fehlersuche bitte ich Euch hiermit um Hilfe!

Es geht um die positionierte Box, die ich im IE einfach nicht zentriert bekomme. Seht bitte selbst!

Der Code (wird nach endgültiger Fertigstellung in separate CSS-Datei ausgelagert):

Zitat:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Family XYZ - Startseite</title>
<style type="text/css" media="screen">

body
{
width: 0 auto;
height: 0 auto;
background: #000000; /* schwarz */
font-size:100%;
font-family:Tahoma, Verdana, Arial, Helvetica, sans-serif;
}

#container
{
margin: 1em auto;
width: 760px;
height: 499px;
text-align: center;
background-color: gray;
}

#n-a-lo
{
float: left;
width: 300px;
height: 200px;
background-color:#0066FF; /* blau */
margin: 0 0 1.2em 0;
clear: left;
}

#chrisi-lu
{
float: left;
width: 300px;
height: 200px;
background-color: #FFFF00; /* gelb */
margin: 5em 0 0 0;
clear: left;
}

#jens-ro
{
float: right;
width: 300px;
height: 200px;
background-color: #CC0033; /* rot */
margin: 0 0 1.2em 0;
clear: right;
}

#paul-ru
{
float: right;
width: 300px;
height: 200px;
background-color:#008C00; /* gruen */
margin: 5em 0 0 0;
clear: right;
}

#family-mitte
{
position:absolute;
width: 320px;
height: 220px;
background-color: black;
margin: 140px 220px 140px 220px;
color: #FFFFFF;
}

h3.family
{
color:#FF8000;
font-weight:bold;
font-size:120%;
}
a
{
color:#000000; /* schwarz */
}

</style>
</head>

Die zwei Dateianhänge zeigen eine Browservorschau vom IE, wo die betreffende Box rechts "klebt" und eine andere Vorschau von Opera, wo alles so angezeigt wird, wie es soll. Firefox und NN zeigen es auch richtig an. Die Beschriftungen sind nur Platzhaltertexte. Die korrekten Namen sind kürzer und fallen nicht unter die positionierte Box, wie es mit dem Platzhaltertext passiert.

Was mache ich falsch? Ich sitze schon wochenlang über diesem Problem, hab dieses Forum auch schon zigmal durchsucht, aber ich hab nichts gefunden...

Vielen Dank im Voraus für Eure Hilfe!

cons · #2 (**permalink**) 24.10.2005, 22:35

Beim mittleren Bild "left: 50%;" und dann margin-left: minus der Hälfte der Bildbreite? Müsste eigentlich gehen.

nathalie-anne · #3 (**permalink**) 24.10.2005, 23:36

Hallo cons,

was meinst du mit dem ersten Teil "left: 50%"? *vermutlichaufderleitungsteh*

Wenn ich das so mache:

Zitat:

margin: 140px 220px 140px -160px;

sieht es im IE gut aus, aber in jedem anderen Browser steht der Container jetzt links. Vermutlich kommt das daher, dass ich den ersten Teil deines Lösungsvorschlages nicht verstehe und nur Teil zwei umgesetzt hab...

cons · #4 (**permalink**) 24.10.2005, 23:43

in etwa so:

#family-mitte
{
position:absolute;
left: 50%;
width: 320px;
height: 220px;
background-color: black;
margin-top: 140px;
margin-bottom: 140px;
margin-left: -160px;
color: #FFFFFF;
}

nathalie-anne · #5 (**permalink**) 25.10.2005, 14:17

Vielen herzlichen Dank cons!!

Es klappt!!! *freu* Darauf wär ich nicht gekommen...

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Anfängerfrage: Zentrierung in Galerie und Border-Problem	goldbeere	CSS	3	04.11.2013 19:07
gefloatete Container sollen gleiche Länge haben	FortunaFan	CSS	3	16.10.2012 15:26
Probleme mit Container und I-Net Explorer	deacon	CSS	7	25.01.2006 14:53
Container mit Border macht Probleme im IE bei Floaten	mimii	CSS	2	11.11.2005 15:08
Probleme mit Container - Hintergrund	monti	CSS	2	05.11.2005 12:40