Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Senior Coder whizard's Avatar
    Join Date
    Jan 2005
    Location
    Philadelphia, PA, USA
    Posts
    1,662
    Thanks
    14
    Thanked 76 Times in 76 Posts

    <p> margin not working

    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:


    Code:
    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;
    }
    Code:
    <!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
    Last edited by whizard; 12-22-2006 at 11:52 PM.
    PHP Tip: If you want to use short tags (<? or <?=$var) then make sure short_open_tag is set to "1". It really helps.

    Don't forget to save everyone time and mark your thread as Resolved :)

    "Also note that it is your responsibility to die() if necessary."

    DON'T USE THE MYSQL_ EXTENSION

  • #2
    Regular Coder Graft-Creative's Avatar
    Join Date
    Aug 2004
    Location
    Web Designer - North East Lancashire U.K.
    Posts
    842
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi Dan,

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

    Works at my end.

    Kind regards,

    Gary

  • #3
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,306
    Thanks
    29
    Thanked 277 Times in 271 Posts
    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:
    Code:
    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.
    Last edited by Arbitrator; 12-23-2006 at 12:54 AM. Reason: Altered post formatting.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #4
    Regular Coder Graft-Creative's Avatar
    Join Date
    Aug 2004
    Location
    Web Designer - North East Lancashire U.K.
    Posts
    842
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Arbitrator View Post
    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

  • #5
    Senior Coder whizard's Avatar
    Join Date
    Jan 2005
    Location
    Philadelphia, PA, USA
    Posts
    1,662
    Thanks
    14
    Thanked 76 Times in 76 Posts
    Thanks a ton Graft & Arbitrator!

    Quote Originally Posted by 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*

    Quote Originally Posted by Graft-Creative
    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...

    Dan

    PS- the p was styled inline for no apparent reason!! D'oh!
    Last edited by whizard; 12-23-2006 at 01:31 AM.
    PHP Tip: If you want to use short tags (<? or <?=$var) then make sure short_open_tag is set to "1". It really helps.

    Don't forget to save everyone time and mark your thread as Resolved :)

    "Also note that it is your responsibility to die() if necessary."

    DON'T USE THE MYSQL_ EXTENSION

  • #6
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,306
    Thanks
    29
    Thanked 277 Times in 271 Posts
    Quote Originally Posted by Graft-Creative View Post
    ..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:

    [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.
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •