...

View Full Version : <p> margin not working



whizard
12-22-2006, 11:48 PM
Hi all!

I have p text with a property of margin-left:30px;. My problem is that when the text wraps around to a second line, it doesn't obey the margin.

In the image below, the second line of italic text should line up vertically with the first italic line:
http://www.robowhizards.com/octballet.bmp



body
{
background-color:#ded6d4;
margin:0px auto;
text-align:center;
}

.wrapper
{
margin:0px auto;
width:760px;
border:1px solid #3c3c3c;
background-color:#ffffff;
overflow:hidden;
}

.header
{
height:130px;
border-bottom:1px solid #3c3c3c;
background-color:#ded6d4;
}

.menu
{
background-color:#3c3c3c;
height:20px;
border-bottom:1px solid #3c3c3c;
text-align:center;
}
.body
{
padding:5px 3px;
text-align:left;
}

.page_nav
{
/*float:right;*/
position:relative;
top:10px;
left:700px;
width:200px;
background-color:#eeeeee;
border-top:1px solid #3c3c3c;
border-bottom:1px solid #3c3c3c;
padding-bottom:3px;
text-align:center;
}

.footer
{
padding:5px 3px;
background-color:#eeeeee;
font-family:Verdana;
font-size:9pt;
clear:both;
border-top:1px solid #3c3c3c;
}

ul
{
list-style:none;
margin: 0px;
}

#menu li
{
display:inline;
padding:10px;
}

a.menu
{
font-family:"Berlin Sans FB","Trebuchet MS", Arial, Helvetica, sans-serif;
color:#ffffff;
text-decoration:none;
}

a.menu:hover
{
color:#ded6d4;
font-weight:500;
}

h1
{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:25px;
font-weight:bold;
margin-left:10px;
}

h2
{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:17px;
font-weight:600;
margin-left:20px;
font-variant:small-caps;
}

h3
{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:15px;
font-weight:600;
margin-left:25px;
display:inline;
}


p
{
font-family:"Bookman Old Style","Trebuchet MS", Arial, Helvetica, sans-serif;
font-style:italic;
font-size:15px;
margin-left:30px;
display:inline;
}



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<link href="main.css" rel="stylesheet" type="text/css" />
<title>Octorara Ballet School</title>
</head>
<body>
<div class="wrapper">
<div class="header">
BG Image coming soon
<!-- End Header -->

</div>
<div class="menu">
<ul id="menu">
<li><a href="index.html" class="menu">Home</a></li>
<li><a href="classes.html" class="menu">Class Information</a></li>
<li><a href="calendar.html" class="menu">Calendar 2006-2007</a></li>
<li><a href="index.html" class="menu">Payment Information</a></li>

<li><a href="index.html" class="menu">'Other Info'</a></li>

</ul>
<!-- End Menu -->
</div>
<div class="body">
<h1>
Headline
</h1>
<h2>Section 1</h2>
<p>
Hello
<br />
Even More Text
</p>
<!-- End Body -->
</div>
<div class="footer">
&copy;&nbsp;Copyright 2007 Octorara Ballet School
<!-- End Footer -->
</div>
<!-- End Wrapper -->

</div>
</body>
</html>

Thanks
Dan

Graft-Creative
12-23-2006, 12:26 AM
Hi Dan,

Try removing display: inline; from the <p > tag.

Works at my end.

Kind regards,

Gary

Arbitrator
12-23-2006, 12:48 AM
Block‐level properties such as margin don't affect elements with display: inline.

Regarding other issues:
You can make your CSS more efficient by condensing the font properties such that:

font: style variant weight size/line-height "family names";

Your XHTML is also not valid. The xmlns pseudo‐attribute is missing and XHTML 1.1 isnít supposed to be served as HTML (http://www.w3.org/TR/xhtml-media-types/#summary).

Graft-Creative
12-23-2006, 01:25 AM
Block‐level properties such as margin don't affect elements with display: inline.


..wierd how Dan's code did actually give the paragraph a left margin of 30px - even with the paragraph set to diplay inline - but then the line break seemed to cancel the margin out after the line break...

Confused (doesn't take much!) :)

Gary

whizard
12-23-2006, 01:29 AM
Thanks a ton Graft & Arbitrator!


Your XHTML is also not valid. The xmlns pseudo‐attribute is missing and XHTML 1.1 isnít supposed to be served as HTML.

Oops, grabbed the wrong DTD w/o realizing...

Wow, 2nd time you've gotten me on invalid XHTML...

*makes mental note to pay attention to the little things*


wierd how Dan's code did actually give the paragraph a left margin of 30px - even with the paragraph set to diplay inline -

I'm good like that... :D

Dan

PS- the p was styled inline for no apparent reason!! D'oh!

Arbitrator
12-23-2006, 07:33 PM
..wierd how Dan's code did actually give the paragraph a left margin of 30px - even with the paragraph set to diplay inline - but then the line break seemed to cancel the margin out after the line break...

Confused (doesn't take much!) :)HmmÖ Well, it looks like inline content can take margins. From the CSS2.1 draft (http://www.w3.org/TR/CSS21/box.html#margin-properties):


[The margin] properties apply to all elements, but vertical margins will not have any effect on non-replaced inline elements.

Apparently, the the top and bottom margins are ignored because the element is inline. Since the element is inline, it seems that only the first line takes the left margin. I donít see where the right margin comes in though; Iíd guess that the right margin becomes relevant over the left in right‐to‐left text.

Learn something new all the time, I guess. Seems kind of redundant though in light of the text-indent property.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum