Margin-top på DIV funkar ej i FF, och IE strular

7 svar · 406 visningar · startad av stephan 16 mars 2006

stephanMedlem sedan feb. 2006117 inlägg

Frågan16 mars 2006 13:18#1

Nu har jag vridit och vänt flera gånger om utan att lyckats få till det.

Det ser nästan perfekt ut i FF, men jag får ingen margin-top på area3 och i IE är det rena katastrofen.

Snälla, hjälp mig nån...

Hur får jag min margin-top i FF och hur får jag det att se ut i IE som det gör i FF?

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

html {
	background:#000000;
}
body  {
	margin:10px;
	text-align:center;
	background:#FFFFFF;
}

#container {
	width:760px;
	text-align:left;
	margin:0px auto;
	background:#00FFFF;
	position:relative;
}

#header {
	clear:both;
	margin-bottom:30px;
	background:#CCCCCC;
}

#area1 {
	margin-left:10px;
	width:445px;
	float:left;
	background:#0033FF;
}

#area2 {
	margin-left:20px;
	width:285px;
	float:right;
	background:#0099FF;
}

#area3 {
	margin-top:20px;
	margin-left:10px;
	clear:both;
	background:#00CC99;
}

#footer {
	margin-top:30px;
	clear:both;
	background:#FF6666;
}
</style>
</head>

<body>
<div id="container">
<div id="header">header</div>
<div id="area1">area1</div>
<div id="area2">area2</div>
<div id="area3">area3</div>
<div id="footer">footer</div>
</div>
</body>
</html>

CssonMedlem sedan feb. 2000438 inlägg

16 mars 2006 13:48#2

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

html {
	background:#000000;
}
body  {
	margin:10px;
	text-align:center;
	background:#FFFFFF;
}

#container {
	width:760px;
	text-align:left;
	margin:0px auto;
	background:#00FFFF;
	position:relative;
}

#header {
	clear:both;
	margin-bottom:30px;
	background:#CCCCCC;
}

#area1 {
	margin-left:10px;
	width:445px;
	float:left;
	background:#0033FF;
}
*html #area1 {
	margin-left: 5px;
}

#area2 {
	margin-left:20px;
	width:285px;
	float:right;
	background:#0099FF;
	margin-bottom: 20px;
}

#area3 {
	margin-left:10px;
	clear:both;
	background:#00CC99;
}

#footer {
	margin-top:30px;
	clear:both;
	background:#FF6666;
}
</style>
</head>

<body>
<div id="container">
<div id="header">header</div>
<div id="area2">area2</div>
<div id="area1">area1</div>

<div id="area3">area3</div>
<div id="footer">footer</div>
</div>
</body>
</html>

Är det så det ska se ut?

stephanMedlem sedan feb. 2006117 inlägg

16 mars 2006 14:47#3

vad gör den här koden?

*html #area1 {
	margin-left: 5px;
}

Den gör nåt bra iaf, eftersom margin nu blev rätt i IE.

CssonMedlem sedan feb. 2000438 inlägg

16 mars 2006 15:03#4

Den gör så att IE inte gör vänstermarginalen (som IE av någon anledning fördubblar) för stor.

stephanMedlem sedan feb. 2006117 inlägg

16 mars 2006 15:26#5

Är * nåt speciellt som bara IE lyssnar på?

stephanMedlem sedan feb. 2006117 inlägg

16 mars 2006 15:29#6

Är det så det ska se ut?

Ja, jag fattar dock fortfarande inte varför margin-top inte funkar i FF.

dapperMedlem sedan sep. 2005114 inlägg

16 mars 2006 15:34#7

"* html" är ett IE specific hack, som kommer fungera fram till 7:an.
anledningen till att det fungerar i ie är att det finns ett objekt hierarkiskt över html taggen, vilket är emot html standard.
Bättre hade klart vart att göra en browser conditional för att få fram vilken läsare dom använder.. för att slippa hacks.

dapperMedlem sedan sep. 2005114 inlägg

16 mars 2006 15:39#8

För övrigt så fungerar inte margin-top på area 3 i.o.m. att bägge area 1 och area 2 är floatade. ta bort float från area 1 (eller den utan av de två som kommer att bli längst), lägg in dom i en wrapper och försök igen.

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

html {
background:#000000;
}
body  {
margin:10px;
text-align:center;
background:#FFFFFF;
}

#container {
width:760px;
text-align:left;
margin:0px auto;
background:#00FFFF;
position:relative;
}

#header {
clear:both;
margin-bottom:30px;
background:#CCCCCC;
}

#area1 {
margin-left:10px;
width:442px;
background:#0033FF;
}

#area2 {
margin-left:20px;
width:285px;
float:right;
background:#0099FF;
margin-bottom: 20px;
}

#area3 {
margin-left:10px;
margin-top: 60px;
clear:both;
background:#00CC99;
}

#footer {
margin-top:30px;
clear:both;
background:#FF6666;
}
</style>
</head>

<body>
<div id="container">
<div id="header">header</div>
<div id="twocol_wrapper">
	<div id="area2">area2</div>
	<div id="area1">area1</div>
</div>
<div id="area3">area3</div>
<div id="footer">footer</div>
</div>
</body>
</html>