Welcome to WebmasterWorld Guest from 54.196.244.186

Forum Moderators: not2easy

Message Too Old, No Replies

Problem with margin-top, missing top margin

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

New User

5+ Year Member

joined:July 6, 2008
posts: 3
votes: 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]

5:19 pm on July 6, 2008 (gmt 0)

Preferred Member

10+ Year Member

joined:Aug 17, 2005
posts:432
votes: 0


I should think it's Collapsing Margings [w3.org]
Just add either a border or 1px padding, to stop this happening.
8:50 am on July 7, 2008 (gmt 0)

Senior Member

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Oct 1, 2002
posts:5199
votes: 0


Hi estigma and Welcome to WebmasterWorld!

it's there, just not where you think it is perhaps, it's above the three floated divs

the paragraph "overskrift" is only implicitly 'clearing' the floated content before it, if you add a background color to that paragraph, you will be able to see it behind the floats. that's where it should be, if your floats were not wide enough to fill the page width that paragraph would appear of the right side of them as per floating rules so if you want that paragraph to explicitly clear the floats you'll have to tell it to.

adding clear:both to that paragraph should make it work how you want, keep the background color on to see the difference

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

[edited by: SuzyUK at 8:51 am (utc) on July 7, 2008]

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members