Editing (v7+)

Content Block Margins

Permalink April 14, 2010 at 12:55 PM

I couldn't find anywhere on here where this is already addressed, if so please tell me. Sometimes when I add the content block it has a top/bottom margin(space). Sometimes it does not. It seems to happen randomly. I don't have any spacing set to it whether margin or padding. Does anyone know what's going on and how to fix it? Am I unknowingly selecting some setting to get this result? Unfortunately, I can't give a link to it as I'm still developing on XAMMP.
Thanks for any help in advance. C5 Rocks!

pakigreenl replied on Apr 14, 2010 at 12:57 pm Permalink Reply

Also, it sometimes happens with the expand/contract extension block as well.

pakigreenl replied on Apr 14, 2010 at 9:12 pm Permalink Reply

nevermind it was a css problem with the template.

rritz replied on Nov 21, 2010 at 6:31 am Permalink Reply

maybe you could tell me, how you solved the problem?

I have a problem about transparency. Some content blocks have a solid black background and some are transparent and I don´t know why.

jlev replied on May 31, 2011 at 3:23 pm Permalink Reply

Hello everyone,

I'm sorry to resurrect a dead thread, but I'm having trouble with top- and bottom-padding of certain content blocks, too. I've looked through my CSS sheet in detail several times and can't find anything that should be causing it.

Specifically, content blocks that are rendered as <p></p> in the final page are being given top and bottom padding of approximately 1.5em by Concrete5 (i.e., not by my CSS sheet). Other blocks, such as image blocks, don't have this padding. Just to check, I deleted my entire CSS sheet and found that Concrete5 still rendered the p content blocks with top and bottom padding.

Does anyone know why this is? Is this a known feature of Concrete5, or is it a bug?

I would greatly appreciate any help or thoughts you might be willing to offer!

My best,
J.L.

tallacman replied on May 31, 2011 at 4:21 pm Permalink Reply

A url would help fix this problem.

steve

jlev replied on May 31, 2011 at 7:39 pm Permalink Reply

Hi tallacman et al,

Sorry about that! I've set up an example page at
http://www.stressandhealthresearch.com/index.php/test-page/...
The page hasn't yet been optimized for older versions of IE, so viewing it in a non-IE browser would likely be best.

The CSS sheet is at
http://www.stressandhealthresearch.com/themes/whole-program_templat...

The PHP template for the page reads

<?php  $this->inc('elements/header.php'); ?> <!-- This inserts the header, starting with DOCTYPE and continuing through </head>. This is all drawn from an external file, which can be found and edited in the "elements" folder. This allows for easy edits of this code across page types, which all share the same code. -->
<body>
<div id="wrap"> <!-- This is per the instructions athttp://www.concrete5.org/documentation/developers/pages/themes.... It should keep the CSS from getting in the way of Concrete5's rendering of editing popups and/or toolbar. -->
      <?php  $this->inc('elements/IE_warning.php'); ?> <!-- This inserts any code you want at the top of the page, esp. the Internet Explorer 6 or below warning fromhttp://www.daobydesign.com/blog/tips/css-html/hate-internet-explore... This is all drawn from an external file, which can be found and edited in the "elements" folder. This allows for easy edits of this code across page types, which all share the same code. -->
<div class="content_box"> 
   <div class="header_box">
      <div id="logo">
         <?php
             $a = new Area('logo');
               $a->display($c);
         ?>
      <!-- The old version hard-coded the logo using something like: <img src="<?=$this->getThemePath()?>/../../program_logo.png" alt="Stress and Health Research Program" />  -->
      </div>
      <div id="searchbar">
         <?php

Viewing 15 lines of 62 lines. View entire code block.

 
<?php  $this->inc('elements/header.php'); ?> <!-- This inserts the header, starting with DOCTYPE and continuing through </head>. This is all drawn from an external file, which can be found and edited in the "elements" folder. This allows for easy edits of this code across page types, which all share the same code. -->
 
<body>
 
<div id="wrap"> <!-- This is per the instructions athttp://www.concrete5.org/documentation/developers/pages/themes.... It should keep the CSS from getting in the way of Concrete5's rendering of editing popups and/or toolbar. -->
 
      <?php  $this->inc('elements/IE_warning.php'); ?> <!-- This inserts any code you want at the top of the page, esp. the Internet Explorer 6 or below warning fromhttp://www.daobydesign.com/blog/tips/css-html/hate-internet-explore... This is all drawn from an external file, which can be found and edited in the "elements" folder. This allows for easy edits of this code across page types, which all share the same code. -->
 
<div class="content_box"> 
   <div class="header_box">
      <div id="logo">
         <?php
             $a = new Area('logo');
               $a->display($c);
         ?>
      <!-- The old version hard-coded the logo using something like: <img src="<?=$this->getThemePath()?>/../../program_logo.png" alt="Stress and Health Research Program" />  -->
      </div>
      <div id="searchbar">
         <?php
             $a = new Area('searchbar');
               $a->display($c);
         ?>
      </div>
      <br style="clear:both;" />
   </div>
 
   <div id="container-for-menu"> <!-- As explained in the CSS file, this is for the use of the Faux Column technique explained athttp://buildinternet.com/2009/07/four-methods-to-create-equal-heigh... in order to get the menu background to cover the entire height of the page (simply setting height:100%; on div.menu doesn't work, though pixels do, but then that's not dynamic. -->
 
   <div class="menu">
      <?php
             $a = new Area('Menu');
            $a->display($c);
      ?>
   </div>
 
   <div class="title_box">
 
      <div class="title">
         <?php
             $a = new Area('Title');
               $a->display($c);
         ?>
      </div>
 
      <div class="explanation-of-page">
         <?php
             $a = new Area('Explanation');
               $a->display($c);
         ?>
      </div>
   </div>
 
   <div class="main_content" id="full">
      <?php
             $a = new Area('Main Content');
            $a->display($c);
      ?>
   </div>
 
   <div style="clear:both;"></div>
   </div>
 
   <div class="footer_box">
 
      <?php  $this->inc('elements/footer.php'); ?> <!-- This inserts the sign-in footer, which can be found and edited in the "elements" folder. This allows for easy edits of the footer across page types, which all share the same footer code. -->
 
      <?php
             $a = new Area('Footer');
            $a->display($c);
      ?>
 
   </div>
 
</div>
 
</div>
 
<?php  require(DIR_FILES_ELEMENTS_CORE . '/footer_required.php'); ?> <!-- This is per the instructions athttp://www.concrete5.org/community/forums/usage/google_analytics/... to enable Google Analytics. -->
 
</body>
 
</html>

"Header.php," which is referenced in the above PHP, reads

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<!--This was converted from HTML to Concrete5 PHP using the instructions athttp://www.concrete5.org/documentation/how-tos/designers/make-a-the...
<?php
Loader::element('header_required'); ?>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
</style>
<link rel="stylesheet" type="text/css" href="<?=$this->getThemePath()?>/Program_Website_CSS_Main.css" />
<!--[if lte IE 7]> <link rel="stylesheet" type="text/css" href="<?=$this->getThemePath()?>/Program_Website_CSS_Internet_Explorer.css" /> <![endif]--> <!-- This is a conditional Internet Explorer Comment. If the user is browsing with less than or equal to IE 7, this second CSS sheet will be loaded. This allows us to re-define the website specifically for IE7 and lower, to accommodate it. This solution is fromhttp://msdn.microsoft.com/en-us/library/ms537512%28v=vs.85%29.aspx... -->
</head>

Again, I appreciate your help!

Thank you very much,
Jacob L.

tallacman replied on May 31, 2011 at 8:10 pm Permalink Reply

I replaced your css with just this:

*{
   border: 1px solid red;
}\

And the result is the image attached showing all your elements. The browser defaults are in effect so you have some padding and margins happening. You can zero that out with a reset css which will remove all browser formatting.

steve

tallacman replied on May 31, 2011 at 8:10 pm Permalink Reply 1 Attachment

opps, image attached.

tallacman replied on May 31, 2011 at 8:17 pm Permalink Reply 2 Attachments

here is your page before and after adding this aggressive reset:

/*
    Tripoli is a generic CSS standard for HTML rendering. 
    Copyright (C) 2007  David Hellsing
    This program is free software: you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.
    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.
    You should have received a copy of the GNU General Public License
    along with this program.  If not, see <http://www.gnu.org/licenses/>.
*/
* {

Viewing 15 lines of 155 lines. View entire code block.

 
/*
    Tripoli is a generic CSS standard for HTML rendering. 
    Copyright (C) 2007  David Hellsing
 
    This program is free software: you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.
 
    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.
 
    You should have received a copy of the GNU General Public License
    along with this program.  If not, see <http://www.gnu.org/licenses/>.
*/
 
* {
   text-decoration: none;
   font-size: 1em;
   outline: none;
   padding: 0;
   margin: 0;
   }
code, kbd, samp, pre, tt, var, textarea, 
input, select, isindex, listing, xmp, plaintext {
   white-space: normal;
   font-size: 1em;
   font: inherit;
   }
dfn, i, cite, var, address, em { 
   font-style: normal; 
   }
th, h1, h2, h3, h4, h5, h6 { 
   font-weight: normal; 
   }
a, img, a img, iframe, form, fieldset, 
abbr, acronym, object, applet, table {
   border: none; 
   }
table {
   border-collapse: collapse;
   border-spacing: 0;
   }
caption, th, td, center { 
   vertical-align: top;
   text-align: left;
   }
body { 
   background: white; 
   line-height: 1; 
   color: black; 
   }
q { 
   quotes: "" ""; 
   }
ul, ol, dir, menu { 
   list-style: none; 
   }
sub, sup { 
   vertical-align: baseline; 
   }
a { 
   color: inherit; 
   }
hr { 
   display: none; 
   }
font { 
   color: inherit !important; 
   font: inherit !important; 
   color: inherit !important; /* editor's note: necessary? */ 
   }
marquee {
   overflow: inherit !important;
   -moz-binding: none;
   }
blink { 
   text-decoration: none; 
   }
nobr { 
   white-space: normal; 
   }
html {
       overflow-y: scroll;
}
 
/* Azbuka - CSS Typographical Base Rendering Library  */
 
 /* Typo reset */
 
 
 /* General settings */
 
body { font:0.8125em/1.618 Arial, sans-serif; 
background-color:#fff;  
color:#111;
 font-size-adjust:none;
 font-style:normal;
 font-variant:normal;
 font-weight:normal;
 
}
 
p { padding:0; }
 
 
 /* Headlines */
 
h1,h2,h3,h4,h5,h6{ 
margin-bottom:5px; 
}
 
h1 { font-size: 2.615em; line-height:1.18;  } /* 34px */
h2 { font-size: 2em; line-height:1.19;    } /* 26px */
h3 { font-size: 1.618em; line-height:1.24;   } /* 21 */
h4,h5,h6  { font-size: 1.308em; line-height:1.23;  } /* 17*/
 
 
 /* Lists */
 
ul, ol { list-style-position:inside; }
li ul, 
li ol  { margin:0 1.618em; }
ul, ol { margin: 0 0 1.618em 0; }
 
dl { margin: 0 0 1.618em 0; }
dl dt { font-weight: 700; }
dl dd { margin-left: 1.618em; }
 
 
 /* Tables */
 
table { margin-bottom:1.618em; border-collapse: collapse; }
th { text-align:left; }
tr,th,td { margin:0; padding:0 1.618em 0 1em; height:21px; }
tfoot { font-style: italic; }
caption { text-align:center; }
 
 
 /* Quotes */
 
blockquote { 
padding-left:0; 
margin:0 ; 
 font-style:italic; }
blockquote > p { padding:0;}
 
/* Other */
 
a { text-decoration:none; }
 
 
em,dfn,cite,q { font-style: italic; }
dfn {}
pre,code { margin: 1.618em 0; white-space: pre; }
pre,code,tt { font: 1em monospace; line-height: 1.618em; } 
tt { display: block; margin: 1.618em 0; }
hr { margin-bottom:1.618em;color: #ccc;background-color: #ccc;height: 2px; }
abbr, acronym { border-bottom:1px dotted #000; }
address { margin-top:1.618em; font-style: italic; }
del { color:#000; }
sup { vertical-align:super; }
sub { vertical-align:sub; }
 
.clear:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }
.clear { display: inline-block; }
/* start commented backslash hack \*/
* html .clear { height: 1%; }
.clear { display: block; }
/* close commented backslash hack */
 
sup, sub {
    vertical-align: baseline;
    position: relative;
    top: -0.4em;
}
sub { top: 0.4em; }

jlev replied on Jun 1, 2011 at 5:02 pm Permalink Reply

tallacman,

Wow! I had no idea about any of that, and very likely would not ever have figured that out. I very much appreciate your help! Thank you!

Gratefully,
Jacob

Forums

Editing (v7+)

Content Block Margins

Code

Post Reply

Delete Post

Mark Post as Spam

Destroy Spammer

Sign In?