homepage Welcome to WebmasterWorld Guest from 54.227.41.242
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Problem with margin-top, missing top margin
estigma




msg:3691630
 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]

 

appi2




msg:3691656
 5:19 pm on Jul 6, 2008 (gmt 0)

I should think it's Collapsing Margings [w3.org]
Just add either a border or 1px padding, to stop this happening.

SuzyUK




msg:3691999
 8:50 am on Jul 7, 2008 (gmt 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]

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved