bassebhuMedlem sedan nov. 20014 028 inlägg Hej alla glada!
Jag tror att jag har stött på en bugg eller så tänker jag lite knasigt.
I Safari så måste jag lägga dit (eller kanske något annat men det visade sig fungera), annars så hamnar margin-top-värdet som jag har satt på #header även på #content, trots att inget margin-värde finns inskrivet på #content! Som att den tar mariginal från #container i stället för ifrån #content.
#container {
margin-top: 10px;
margin-left: -490px;
left: 50%;
width: 980px;
position: absolute;
}
#content {
height: 735px;
background: url(../images/bg.jpg) no-repeat;
}
#header {
width: 980px;
height: 79px;
margin-top: 51px;
margin-bottom: 23px;
background: url(../images/header.jpg) no-repeat;
}
#footer {
margin-top: 10px;
text-align: center;
}
#start {
width: 325px;
margin-left: 37px;
background: url(../images/start.jpg) no-repeat;
}
[...]
<div id="container">
<div id="content">[b] [/b]
<div id="header">
</div>
<div id="start">
Text...
</div>
</div>
<div id="footer">
Text...
</div>
</div>
Förslag på annan lösning än att lägga dit ett ?
Taxi!
zcorpanMedlem sedan dec. 20042 269 inlägg Jag har en känsla av att det har med kollapsande marginaler att göra. Lägg dit padding-top:1px för att förhindra det.
bassebhuMedlem sedan nov. 20014 028 inlägg
zcorpan skrev:
Jag har en känsla av att det har med kollapsande marginaler att göra. Lägg dit padding-top:1px för att förhindra det.
Verkar fungera, men kommer den nu att ta mariginalen + 1px så att jag borde minska mariginalen med -1px för att kompensera? Kommer detta i så fall att fungera som jag vill i alla/de flesta läsare?
zcorpanMedlem sedan dec. 20042 269 inlägg
bassebhu skrev:
Verkar fungera, men kommer den nu att ta mariginalen + 1px så att jag borde minska mariginalen med -1px för att kompensera? Kommer detta i så fall att fungera som jag vill i alla/de flesta läsare?
Att minska med -1px, är inte det samma sak som att öka med 1px? ;)
Men jo, det borde fungera. Beroende på omständigheterna kanske du till och med kan använda padding istället för margin.
bassebhuMedlem sedan nov. 20014 028 inlägg Ändrade till padding i stället. Det funkade, men jag förstår fortfarande inte varför mariginalerna inte ville fungera. Nåja.
zcorpanMedlem sedan dec. 20042 269 inlägg Det är helt enkelt så marginaler fungerar. Testa följande:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>kollapsande marginaler</title>
<style type="text/css">
p { margin:5em 0; }
div { background:lime; }
</style>
</head>
<body>
<div>
<p>foo</p>
</div>
<p>bar</p>
</body>
</html>
Notera hur "foo"s marginaler går utanför DIVen, och att mellanrummet mellan "foo" och "bar" är 5em och inte 10em. Det beror på att marginalerna överlappar varandra (de "kollapsar"). Testa också att byta ut 'margin' mot 'padding'. :)
