Archived

This topic is now archived and is closed to further replies.

  • 0

Too much space between heads and text in content area

Question

Posted · Report post

There is too much space between h1 or h2 copy set in my content area and the p style text below it. It looks like more than twice the space there should be. This problem  is only occurring in my content area, and not in my sidebar Text widgets nor in Boxes (they all look fine). These h1 or h2 text lines aren't page titles which I've set to not appear. I know I don't have an extra line space in there. No hard return.

 

http://clientdev1.ramacommunications.net/

Please take a look at the center column head: The Mosaic Community, and advise if you can. Thanks!

Share this post


Link to post
Share on other sites

10 answers to this question

Posted · Report post

This code appears to be affecting the <h1 and <h2 tags:

.hentry h1, .hentry h2 {
    margin: 1em 0;
}

The 1em is the culprit.  Change it to 0.1em and you'll see it change considerably.   I had to dig quite deep in the code to find that.

Share this post


Link to post
Share on other sites

Posted · Report post

Thanks, Rob. I'm just getting started learning CSS, so don't yet entirely understand your kind reply.  I'll give it more study. In the meantime could you please take a look at the Custom Code I have added to the CC area and see if you see the problem?

 

#site {
  background: url("/wp-content/uploads/2013/02/NeenahAspenbrite.jpg") repeat;}.page-canvas {background: url("/wp-content/uploads/2013/02/LaidSquare.jpg") repeat;}
#featurenav a span.nav_thumb, #featurenav a span.nav_thumb span.nav_overlay {
width: 50px;
vertical-align: middle;
height: 22px;
  display: inline-block;}
.content .content-pad {
padding-top: 25px !important;
padding-right: 45px;
padding-bottom: 10px;
padding-left: 45px;
}
#boxes .content-pad {
    padding-bottom: 40px;
}
.widget .widget-title {
color: #b93000;
text-align: left;
padding: 3px 8px 3px 0px;
margin-bottom: .6em;
font-style: normal;
}
 

Share this post


Link to post
Share on other sites

Posted · Report post

This code needs to be revised:

 background: url("/<acronym title="WordPress" class="bbc ipSeoAcronym">wp</acronym>-content/uploads/2013/02/NeenahAspenbrite.jpg") repeat;}.page-canvas {background: url("/<acronym title="WordPress" class="bbc ipSeoAcronym">wp</acronym>-content/uploads/2013/02/LaidSquare.jpg") repeat;} 

Please see this documentation to view an example of how it should be formatted: http://w3schools.com/css/css_background.asp (under Background Image)

Share this post


Link to post
Share on other sites

Posted · Report post

Thanks, Catrina, but sorry to say, I'm quite confused by your response. I don't recognize or understand the code you sent nor it's purpose. Are you pointing out code I've used that needs to be revised, or sending me revised code to substitute?

 

 

Does this have any relevance to my line spacing issue? If I fix this will it solve my problem with extra space?

 

In the code you sent, I don't understand anything I've noted here in red:

 

 background: url("/<acronym title="WordPress" class="bbc ipSeoAcronym"><acronym title="WordPress" class="bbc ipSeoAcronym">wp</acronym></acronym>-content/uploads/2013/02/NeenahAspenbrite.jpg") repeat;}.page-canvas {background: url("/<acronym title="WordPress" class="bbc ipSeoAcronym"><acronym title="WordPress" class="bbc ipSeoAcronym">wp</acronym></acronym>-content/uploads/2013/02/LaidSquare.jpg") repeat;}

 

By the way, I picked up the code I used for my backgrounds from a previous forum thread.

Share this post


Link to post
Share on other sites

Posted · Report post

Sue,

 

This code:

background: url("/<acronym title="WordPress" class="bbc ipSeoAcronym"><acronym title="WordPress" class="bbc ipSeoAcronym">wp</acronym></acronym>-content/uploads/2013/02/NeenahAspenbrite.jpg") repeat;}.page-canvas {background: url("/<acronym title="WordPress" class="bbc ipSeoAcronym"><acronym title="WordPress" class="bbc ipSeoAcronym">wp</acronym></acronym>-content/uploads/2013/02/LaidSquare.jpg") repeat;}

 

Seems to have somehow picked up some non CSS code with it.  Specifically this bit and a few others:

/<acronym title="WordPress" class="bbc ipSeoAcronym"><acronym title="WordPress" class="bbc ipSeoAcronym">wp</acronym></acronym>-

 

The URL to the image is incorrect, as a result.

Catrina was trying to say that an example of proper CSS is:

body
{
background-image:url('http://www.yoursite.com/wp-content/uploads/2012/06/img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}

 

It's possible that copying from the forum may have included some erroneous code. That kind of code can break your site or certainly do damage, while correct coding can work wonders.

Share this post


Link to post
Share on other sites

Posted · Report post

That non-CSS code was not in my code I copied and pasted from the site! How it crept into the message I have no idea. Here is my actual code ( I am not putting it between code carrots in case that caused the problem:

#site {
  background: url("/wp-content/uploads/2013/02/NeenahAspenbrite.jpg") repeat;}.page-canvas {background: url("/wp-content/uploads/2013/02/LaidSquare.jpg") repeat;}

 

It's a small image, I have coded it to tile. It seems to work fine. 

 

I still don't understand what in my code could be causing the extra space between my h1 head and p text in the content area. Do you see anything that may be causing that effect in my code?

Share this post


Link to post
Share on other sites

Posted · Report post

Sue,

 

As I mentioned earlier, there is inline CSS which is causing the issue.

 

Here's what I find.

 

<p>
<a href="http://clientdev1.ramacommunications.net/wp-content/uploads/2013/02/MosaicCommunity1.png">
</p>
<h1 style="text-align: center;">The Mosaic Community</h1>
<p style="text-align: center;">
<span style="color: #ff0000;">
<strong>NOW AVAILABLE!</strong>
</span>
</p>
<p style="text-align: left;">
<strong>

 

An example of "inline" CSS is <h1 style="text-align: center;">

 

That is applying the style to the H1 tag directly into the tag.   This is the sort of thing a word processor does, but not what PageLines or WordPress do.  It doesn't take into account such things as margins or padding.  So it's picking up or "inheriting" the things it doesn't specify from surrounding elements. 

 

It should simply be <h1 class="mosaic1"> without any of the styling inline, but where there's something like

.mosaic1 {text-align: center;

padding-top: 2px;

padding-bottom: 2px;

margin-top: 0;

margin-bottom: 0;}

Share this post


Link to post
Share on other sites

Posted · Report post

Here is my first question:

Since I'm simply using the visual editor to style as I generally do in pagelines, choosing "H1 heading" for the first line, then "paragraph" for the text beneath, where is this "inline"code coming from? I'm not coding it myself, it is occurring automatically when I use the visual editor. I'm entering nothing into the Text editor field, I'm only styling copy in my Visual editor. 

 

My second question:

The line spacing issue seems to be an issue about the content area alone. Just as a test, I've just placed the same code in both the left sidebar and in text editor of the content area on my homepage. The url: http://clientdev1.ramacommunications.net/

 

The code is:

 

<h1>Welcome!</h1>
This is a more about DI, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
 
The line spacing between the h1 word Welcome and the p text beneath it looks fine in the sidebar, but there is a big gap between the two in the content area. What is causing the big gap between the h1 word and text beneath it? I've not see that in pagelines before. It is occurring in the content area of my About Us page as well.

Share this post


Link to post
Share on other sites

Posted · Report post

Hooray! Thanks for digging. Much appreciated!

 

Now, any idea what could be causing that automatic inline styling?

Share this post


Link to post
Share on other sites

Posted · Report post

Hi,

 

I'm not sure how it happened, but the elements seem to have inline styling built into the <h1 and <p tags.  We don't use inline CSS, so this must be user entered. It's much more efficient to use a class or ID, then apply style via Dashboard > PageLines > Site Options > Custom Code.

 

With that custom styling, you can adjust top and bottom margins and padding, essentially moving the elements closer together.  Presently, they're inheriting spacing from other elements you really don't want to change.

 

Using Firebug presently, you're correct, one cannot see these elements individually and that's because the styling is inline,  A class or ID would change that.  Something like <h1 class="mosaic-comm1"> would ensure the class would be enabled to accept custom code. Once the code is saved, you'll be able to see it in Firebug and test for adjustments.

Share this post


Link to post
Share on other sites