✔ CSS DIV überlappen

[socke999]

Hallo, ich will eigentlich nur 1 Div über der die Div legen und in der 2ten Div nochmal eine Div drinnen haben....

Diesmal funktioniert es erstaunlicherweiße im Internet Explorer wie gewünscht, nur im Firefox und Opera usw. nicht.

Ich habe mal als anlage einen Screenshot bzw. Vergleichs Skizze hinzugefügt.

<div id="MotionViewer" style="width:400px;height:200px;">
	<div id="MotionViewerContainer">
	
		<div id="MotionViewerLoader" style="margin-top:75px">
			<img src="http://www.tutorials.de/forum/images/MotionViewer/loading.gif" alt="Loading" />
		</div>
	</div>
</div>

Die CSS datei:

@charset "utf-8";
/* CSS Document */

#MotionViewer
{
	border:1px #000 solid;
	background-color:#0C3; /*GRÜN*/
	display:block;
}

#MotionViewerContainer
{
	border:none;
	background-color: #F0F; /*ROSA*/
	text-align:center; 
	width:100%;
	height:100%;
	margin:0;
	display:block;
}

#MotionViewerLoader
{
	text-align:center;
	background-color:#3FF; /*BLAU*/
	display:block;
}

Die DIV mit der ID ="MotionViewerContainer" wird irgendwie komischerweiße nach unten gschoben, ich komm einfach nicht dahinter wieso...

Kann mir da jemand weiter helfen, bzw. sieht er irgendwo einen Fehler?

 

[Maik]

Hi,

<div id="MotionViewerLoader" style="position:relative;top:75px;">

... ist hier der Schlüssel zum Erfolgserlebnis in FF, Opera & Co

Und mit dieser Regelergänzung schliesst sich in allen Browsern die Lücke unterhalb des Grafikelements:

#MotionViewerLoader img
{
        display:block;
}

mfg Maik

 

[socke999]

Danke für die schnelle antwort,
aber leider hat sich dadurch gar nix geändert, es ist sieht immer noch gleich aus...

#MotionViewerLoader img
{
display:block;
}

behebt das problem auch nicht, nur ist jetzt das IMAGE nicht mehr zentriert im Firefox, sondern Links ausgerichtet ...


EDIT:
jetzt funktionierts, danke!

 

[Maik]

Bei mir greift der Vorschlag wie gewünscht:



Kleine Korrektur bzgl. des Grafikelements und seiner horizontalen Zentrierung:

#MotionViewerLoader img
{
        vertical-align:top;
}

mfg Maik