Jump to content


Photo
- - - - -

Too much space between heads and text in content area


Best Answer Rob , 06 February 2013 - 04:30 AM

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.

Go to the full post


  • Please log in to reply
10 replies to this topic

#1 suerama

suerama

    Super Member

  • Members

  • 244 posts

Posted 04 February 2013 - 02:33 PM

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.

 

Please Login or Register to see this Hidden Content

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



#2 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 04 February 2013 - 09:20 PM

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.



#3 suerama

suerama

    Super Member

  • Members

  • 244 posts

Posted 05 February 2013 - 02:25 PM

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?

 

Please Login or Register to see this Hidden Content



#4 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 05 February 2013 - 05:55 PM

This code needs to be revised:

Please Login or Register to see this Hidden Content

Please see this documentation to view an example of how it should be formatted:

Please Login or Register to see this Hidden Content

(under Background Image)



#5 suerama

suerama

    Super Member

  • Members

  • 244 posts

Posted 05 February 2013 - 07:56 PM

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.



#6 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 06 February 2013 - 12:53 AM

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:

Please Login or Register to see this Hidden Content

 

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.



#7 suerama

suerama

    Super Member

  • Members

  • 244 posts

Posted 06 February 2013 - 01:50 AM

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?



#8 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 06 February 2013 - 03:02 AM

Sue,

 

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

 

Here's what I find.

 

<p>
<a href="

Please Login or Register to see this Hidden Content

">
</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;}



#9 suerama

suerama

    Super Member

  • Members

  • 244 posts

Posted 06 February 2013 - 03:45 AM

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:

Please Login or Register to see this Hidden Content

 

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.


#10 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 06 February 2013 - 04:30 AM   Best Answer

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

Please Login or Register to see this Hidden Content

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.



#11 suerama

suerama

    Super Member

  • Members

  • 244 posts

Posted 06 February 2013 - 05:06 AM

Hooray! Thanks for digging. Much appreciated!

 

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