✔ Abstand zwischen zwei div- Layer nicht OK

A

aquila

Erfahrenes Mitglied
Hallo,

ich hoffe Ihr könnt mir helfen...
Ich habe im Firefox einen Abstand zwischen zwei Vertikal ausgerichtete div-Layer und im Internet Explorer nicht. Wenn ich margin-top: -10px; mache bei "main" passt es im Firefox aber im IE nicht mehr.

HTML: 
#top {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	background:url(Bilder/up_01.jpg);
	width: 900px;
	height: 118px;
	text-align: left;
	left: 50%;
	top: 50%;
	border: 0px;
	font-weight: bold;
	color: #FFFFFF;
	margin-right: auto;
	margin-left: auto;
}
#main {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	background:url(Bilder/up_02.jpg);
	width: 900px;
	height: 424px;
	text-align: left;
	margin:auto;
	left: 50%;
	top: 50%;
	border: 0px;
	font-weight: bold;
}

Danke für eure Hilfe!
 
Hi,

welche Version des Firefox verwendest du? IE8 und Firefox3 zeigen mir beide keinen Abstand zwischen den beiden Boxen. Ansonsten poste doch den Code mal komplett, vielleicht ist der Fehler an anderer Stelle entstanden.
 
Zuletzt bearbeitet:
Ich verwende die letzte Version vom IE und auch die letzte vom Firefox.
<html>
<!--
body {
background-color: #000000;
margin-top: 0px;
overflow:auto;

}
#top {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
background:url(Bilder/up_01.jpg);
width: 900px;
height: 118px;
text-align: left;
left: 50%;
top: 50%;
border: 0px;
font-weight: bold;
color: #FFFFFF;
margin-right: auto;
margin-left: auto;
}
#main {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
background:url(Bilder/up_02.jpg);
width: 900px;
height: 424px;
text-align: left;
margin:auto;
left: 50%;
top: 50%;
border: 0px;
font-weight: bold;
margin-top:
}

a:link {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFFFFF;
}
a:visited {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFFFFF;
}
a:active {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFFFFF;
}
a:hover {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #FFFFFF;
}
h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 19px;
color: #FFFFFF;
font-weight: 800;
letter-spacing: 3px;
}
-->
</style>

</html>
 
Hallo,
es ist zwar schön, dass du die Stylesheets noch mal gepostet hast, aber ohne das zugehörige HTML (oder XML) ist das ziemlich bedeutungslos.
 
Sorry... Jetzt alles...

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="de" xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
		<title>test</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><style type="text/css">
<!--
body {
	background-color: #000000;
	margin-top: 0px;
	overflow:auto;

}
#top {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	background:#33CC00;
	width: 900px;
	height: 118px;
	text-align: left;
	left: 50%;
	top: 50%;
	border: 0px;
	font-weight: bold;
	color: #FFFFFF;
	margin-right: auto;
	margin-left: auto;
}
#main {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	background:#FF0000;
	width: 900px;
	height: 424px;
	text-align: left;
	margin:auto;
	left: 50%;
	top: 50%;
	border: 0px;
	font-weight: bold;
}

a:link {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #FFFFFF;
}
a:visited {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #FFFFFF;
}
a:active {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #FFFFFF;
}
a:hover {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	color: #FFFFFF;
}
h1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 19px;
	color: #FFFFFF;
	font-weight: 800;
	letter-spacing: 3px;
}
-->
    </style>
</head>

<body>
<div id="top"><p><br />
    </p>
  <p>test</p>

</div>
<div id="main">
  <p align="center">test</p>
</div>

</body>
</html>
 
Hi,

nimm mal folgende Regel in dein Stylesheet (ganz oben) auf:
Code: 
* {
	margin:0;
	padding:0;
}
 
Zuletzt bearbeitet:
Folgender Code:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="de" xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
		<title>test</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><style type="text/css">
<!--
* {margin:0; padding:0 } 

body {
	background-color: #000000;
	margin-top: 0px;
	overflow:auto;

}
#top {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	background:#33CC00;
	width: 900px;
	height: 118px;
	text-align: left;
	left: 50%;
	top: 50%;
	border: 0px;
	font-weight: bold;
	color: #FFFFFF;
	margin-right: auto;
	margin-left: auto;
}
#main {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	background:#FF0000;
	width: 900px;
	height: 424px;
	text-align: left;
	margin:auto;
	left: 50%;
	top: 50%;
	border: 0px;
	font-weight: bold;
}

a:link {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #FFFFFF;
}
a:visited {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #FFFFFF;
}
a:active {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #FFFFFF;
}
a:hover {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	color: #FFFFFF;
}
h1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 19px;
	color: #FFFFFF;
	font-weight: 800;
	letter-spacing: 3px;
}
-->
    </style>
</head>

<body>
<div id="top"><p><br />
    </p>
  <p>test</p>

</div>
<div id="main">
  <p align="center">test</p>
</div>

</body>
</html>

erzeugt bei mir im Firefox 3.0.11 folgende Ausgabe:
FireShot capture #7 - 'test' - file____C__Dokumente%20und%20Einstellungen_Tobias_Desktop_demo_de.jpg


//edit: Da fehlte ein Semikolon in meinem obigen Codeschnipsel. Tschuldigung.
 
Ja jetzt hab ich es! Danke.
Ich habe nicht * {margin:0; padding:0 }
sondern im body margin:0; und padding: 0; geschrieben...
Darf ich fragen warum ich da * nehmen muss?
 
Code: 
* {/*Eigenschaft(en)*/}
ist ein Universal-Selektor und verleiht allen Elementen die darin aufgeführten Eigenschaften. In deinem Fall wurde der Abstand zwischen den beiden DIV-Blöcken vom P-Element verursacht, dass ein initialen "margin-top"-Wert hat und über den Rand des DIV-Blockes hinausragt. Der Universalselektor löscht diesen Initialwert auch im P-Element und dadurch liegen die Blöcke wieder aneinander.

Alternativ kannst du auch dem "#main"-Block einen oberen Rand (z.B. in der gleichen Farbe wie der Blockhintergrund) geben. Dann stößt sich das P-Element an diesem Rand und rutscht innerhalb des Blockes um den "margin-top"-Wert nach unten. Wenn die Blöcke selbst dann keine vertikalen "margin"-Werte haben, dann liegen sie auch aneinander. Zum Beispiel so:
Code: 
#top {
    width: 900px;
    height: 118px;
    margin: 0 auto;
    border: 0;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    background:#33CC00;
    text-align: left;
    font-weight: bold;
    color: #FFFFFF;
/* Nur Wirkung bei positionierten Blöcken:
    left: 50%;
    top: 50%;*/
}
#main {
    width: 900px;
    height: 424px;
    margin: 0 auto;
    border: 0;
    border-top: 1px solid #FF0000;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 14px;
    background:#FF0000;
    text-align: left;
    font-weight: bold;
/* Nur Wirkung bei positionierten Blöcken:
    left: 50%;
    top: 50%;*/
}
Eine "overflow:hidden"-Deklaration hätte bei modernen Browsern die gleiche Wirkung, funktioniert allerdings nicht im IE6.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück