---
title: "Margin-top på DIV funkar ej i FF, och IE strular"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/144054-margin-top-på-div-funkar-ej-i-ff-och-ie-strular"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "stephan"
published: "2006-03-16T13:18:22.000Z"
updated: "2006-03-16T15:39:42.000Z"
replies: 7
views: 414
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/html-css/144054-margin-top-på-div-funkar-ej-i-ff-och-ie-strular"
---

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

## #1 — stephan, 2006-03-16T13:18Z

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>
```

Permalänk: https://www.webforum.nu/p/144054

## #2 — Csson, 2006-03-16T13:48Z

```
<!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?

Permalänk: https://www.webforum.nu/p/1784189

## #3 — stephan, 2006-03-16T14:47Z

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.

Permalänk: https://www.webforum.nu/p/1784210

## #4 — Csson, 2006-03-16T15:03Z

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

Permalänk: https://www.webforum.nu/p/1784218

## #5 — stephan, 2006-03-16T15:26Z

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

Permalänk: https://www.webforum.nu/p/1784233

## #6 — stephan, 2006-03-16T15:29Z

> Är det så det ska se ut?

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

Permalänk: https://www.webforum.nu/p/1784235

## #7 — dapper, 2006-03-16T15:34Z

"\* 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.

Permalänk: https://www.webforum.nu/p/1784239

## #8 — dapper, 2006-03-16T15:39Z

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>
```

Permalänk: https://www.webforum.nu/p/1784244

---

Tråden på webben: https://www.webforum.nu/amne/html-css/144054-margin-top-på-div-funkar-ej-i-ff-och-ie-strular
