Page is a not externally linkable
- Code, Content, and Presentation
-- CSS
---- Problem with margin-top, missing top margin

estigma - 4:11 pm on Jul 6, 2008 (gmt 0)


I got a problem with margin-top dont work in this:


p.overskrift
{
font-family: "Trebuchet MS", Verdana;
font: "Trebuchet MS", Verdana;
font-size: 11px;
color: #484848;
margin-bottom:5px;
margin-top:10px;
}

<p class="overskrift">Overskrift</p>

This is the whole code:

CSS:
* {
margin: 0;
padding: 0;
}

body, html {
height:100%;
background-image:url(es_bg.jpg);
text-align:center;
}

p
{
font-family: "Trebuchet MS", Verdana;
font: "Trebuchet MS", Verdana;
font-size: 10px;
color: #797979;
margin-bottom:6px;
}

p.overskrift
{
font-family: "Trebuchet MS", Verdana;
font: "Trebuchet MS", Verdana;
font-size: 11px;
color: #484848;
margin-bottom:5px;
margin-top:10px;
}

#element {
background-image:url(shadowbg.png);
background-repeat: repeat-y;
width:800px;
margin:0 auto;
min-height:100%;
color:#000;
}

#innhold {
width:734px;
margin:0 auto;
text-align:left;
}

#header {
background-image:url(es_tobg2.jpg);
background-repeat: no-repeat;
width:734px;
height:107px;
color:white;
margin:0 0 0 0;
text-align:left;
}

#menu {
background-image:url(es_mebg.jpg);
background-repeat: no-repeat;
width:734px;
height:71px;
color:white;
background-color:#aaa;
text-align:left;
}

#text {
width:694px;
height:auto;
color:black;
background-color:#fff;
padding:10px 20px 20px 20px;
text-align:justify;
}

#contentleft {
width:222px;
margin:0px 14px 0px 0px;
float:left;
background:#fff;
}

#contentcenter {
width:222px;
margin:0px 14px 0px 0px;
float:left;
background:#fff;
}

#contentright {
width:222px;
margin:0px;
float:left;
background:#fff;
}

#footer {
width:734px;
margin:-45px auto 0 auto;
text-align:right;
height:45px;
background-image:url(es_bobg.jpg);
background-repeat: repeat-x;
color:#fff;
}

* html #element {
height:100%;
}[/CODE]

HTML
[CODE]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="styles.css" />
<title>test</title>
</head>
<body>

<div id="element">

<div id="innhold">

<div id="header"></div>
<div id="menu"></div>

<div id="text">

<div id="contentleft">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer gravida tempor pede. Aliquam sollicitudin. Nullam fermentum, metus quis varius ullamcorper, orci justo egestas massa, ut blandit ligula ligula vel lacus. In a purus et felis blandit lobortis. Pellentesque vulputate tellus ac ligula pulvinar hendrerit. Quisque egestas dignissim augue. Sed cursus pede quis dui. Fusce condimentum, elit eget dignissim ultrices, quam urna hendrerit risus, eget sagittis magna ligula eget metus. Duis at pede. In elementum leo sit amet metus. Nulla feugiat commodo felis.
</p></div>

<div id="contentcenter">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer gravida tempor pede. Aliquam sollicitudin. Nullam fermentum, metus quis varius ullamcorper, orci justo egestas massa, ut blandit ligula ligula vel lacus. In a purus et felis blandit lobortis. Pellentesque vulputate tellus ac ligula pulvinar hendrerit. Quisque egestas dignissim augue. Sed cursus pede quis dui. Fusce condimentum, elit eget dignissim ultrices, quam urna hendrerit risus, eget sagittis magna ligula eget metus. Duis at pede. In elementum leo sit amet metus. Nulla feugiat commodo felis.
</p></div>

<div id="contentright">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer gravida tempor pede. Aliquam sollicitudin. Nullam fermentum, metus quis varius ullamcorper, orci justo egestas massa, ut blandit ligula ligula vel lacus. In a purus et felis blandit lobortis. Pellentesque vulputate tellus ac ligula pulvinar hendrerit. Quisque egestas dignissim augue. Sed cursus pede quis dui. Fusce condimentum, elit eget dignissim ultrices, quam urna hendrerit risus, eget sagittis magna ligula eget metus. Duis at pede. In elementum leo sit amet metus. Nulla feugiat commodo felis.
</p></div>

<p class="overskrift">Overskrift</p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer gravida tempor pede. Aliquam sollicitudin. Nullam fermentum, metus quis varius ullamcorper, orci justo egestas massa, ut blandit ligula ligula vel lacus. In a purus et felis blandit lobortis. Pellentesque vulputate tellus ac ligula pulvinar hendrerit. Quisque egestas dignissim augue. Sed cursus pede quis dui. Fusce condimentum, elit eget dignissim ultrices, quam urna hendrerit risus, eget sagittis magna ligula eget metus. Duis at pede. In elementum leo sit amet metus. Nulla feugiat commodo felis.</p>
</div>

</div>
</div>

<div id="footer">footer</div>

</body>
</html>

[edited by: SuzyUK at 8:43 am (utc) on July 7, 2008]
[edit reason] shortened code and fixed formatting [/edit]

Thread source:: http://www.webmasterworld.com/css/3691628.htm
Brought to you by WebmasterWorld: http://www.webmasterworld.com