Extra Line Breaks in WP

  • We have a site on which we are trying to remove so much of the white spaces between elements on the first page. We migrated an HTML website to WordPress (using the TwentyEleven theme) for this nonprofit and the spacing issue is frustrating us.

    for this site, https://nicholashouse.org/, has created tables on the front page that the client can use to update events easily and to separate elements on the front page.

    If you look, you’ll see substantial white space between the second and third table, “Ongoing Events” and “Upcoming Events” and that third table and the footer on the bottom, “Nicholas House. It just works.”

    Here’s what the code looks like:

    <p>
		<span style="color:#088ccc;"><strong><span style="font-size: 20px;">Upcoming Events</span></strong></span>
	</p>

	<table border="0" cellpadding="2" cellspacing="2" style="width: 500px;">
		<tbody>
			<tr>
				<td>
					<p style="text-align: center;">
						<img alt="" class="size-full wp-image-106 alignnone" height="196" src="https://nicholashouse.org//wp-content/uploads/2013/03/nicholas-house-mockup-2-122.jpg" style="" title="Dream Builders Luncheon 2013" width="269" />
					</p>

					<p style="text-align: center;">
						<iframe allowfullscreen="" frameborder="0" height="215" scrolling="no" src="https://www.youtube.com/embed/XFkoYstjeWk" width="260"></iframe>
					</p>

					<p style="text-align: center;">
						<span style="font-size:14px;">RSVP for the Luncheon <a href="https://nicholashouse.wufoo.com/forms/s7s7x7/"><strong>here</strong></a>.</span>
					</p>
				</td>
			</tr>
		</tbody>
	</table>

	<h2>
		<span style="font-size:20px;"><span style="color: rgb(0, 140, 204);"><strong>Ongoing Events</strong></span></span>
	</h2>

	<table align="left" border="0" cellpadding="2" cellspacing="2" height="464" width="631">
		<tbody>
			<tr>
				<td>
					<p style="text-align: center;">
						<a href="https://nicholashouse.wufoo.com/forms/s7x1x7/" rel="" style="" target="" title=""><img alt="nicholas-house-mockup-2-11" class="size-medium wp-image-105 aligncenter" height="300" src="https://nicholashouse.org//wp-content/uploads/2013/03/nicholas-house-mockup-2-111-139x300.jpg" style="" title="Nicholas House Open Door Tour" width="139" /></a>
					</p>
				</td>
			</tr>
		</tbody>
	</table>
</div>

<p>
	<span style="color:#008ccc;"><span style="font-size: 20px;"><strong>Our Friends</strong></span></span>
</p>

<table border="0" cellpadding="1" cellspacing="1" style="width: 700px;">
	<tbody>
		<tr>
			<td>
				<a href="https://211online.unitedwayatlanta.org/search.aspx" rel="" style="" target="" title=""><img alt="UWGA_4cp_v-100pxH" class="size-full wp-image-211 aligncenter" height="108" src="https://nicholashouse.org//wp-content/uploads/2013/03/UWGA_4cp_v-100pxH1.png" style="" title="United Way of Greater Atlanta" width="130" /></a>
			</td>
			<td>
				<a href="https://www.gatewayctr.org/" rel="" style="" target="" title=""><img alt="gatewaylogo" class="size-full wp-image-212 aligncenter" height="64" src="https://nicholashouse.org//wp-content/uploads/2013/03/gatewaylogo1.png" style="" title="Gateway 24/7 Center" width="133" /></a>
				<p>
					&nbsp;
				</p>

				<p>
					&nbsp;
				</p>

				<p>
					&nbsp;
				</p>

				<p>
					&nbsp;
				</p>
			</td>
			<td>
				<a href="https://www.acfb.org/" rel="" style="" target="" title=""><img alt="AtlantaCommunityFoodBank" class="size-full wp-image-219 aligncenter" height="124" src="https://nicholashouse.org//wp-content/uploads/2013/03/AtlantaCommunityFoodBank11.jpg" style="" title="Atlanta Community Food Bank" width="130" /></a>
			</td>
			<td>
				<a href="https://www.cfgreateratlanta.org/" rel="" style="" target="" title=""><img alt="" class="size-full wp-image-214 aligncenter" height="104" src="https://nicholashouse.org//wp-content/uploads/2013/03/Community-Foundation-for-Greater-Atlanta1.jpg" style="" title="Community Foundation for Greater Atlanta" width="120" /></a>
			</td>
			<td>
				<a href="https://www.homelesschildrenamerica.org/reportcard.php" rel="" style="" target="" title=""><img alt="" class="size-thumbnail wp-image-215 aligncenter" height="120" src="https://nicholashouse.org//wp-content/uploads/2013/03/AYO2010Cover_1208111-150x150.jpg" style="" title="Campaign to End Child Homelessness" width="120" /></a>
			</td>
			<td>
				<a href="https://www.familyhomelessness.org/" rel="" style="" target="" title=""><img alt="NCFH Logo No Text" class="size-thumbnail wp-image-216 aligncenter" height="120" src="https://nicholashouse.org//wp-content/uploads/2013/03/NCFH-Logo-No-Text1-150x150.jpg" style="" title="The National Center on Family Homelessness" width="120" /></a>
			</td>
		</tr>
	</tbody>
</table>

<p>
	<strong><span style="font-size:24px;"><span style="color:#008ccc;">Nicholas House.</span> It just works.</span></strong>
</p>

<p>
	(c) 2010-2013. Nicholas House, Inc. All rights reserved.
</p>

    How can we fix this? We’ve tried manually removing the multiple “<p>   </p>” tags and they seem to reappear. We’d like this site to look cleaner and more professional (though we have limitations due to content we were provided) so it represents good work we’ve done.

    Please help us fix this.

    Dahna

Viewing 8 replies - 1 through 8 (of 8 total)

  • Tables really aren’t a good way to layout websites…for various reasons.

    Thread Starter socialwebmaven

    (@socialwebmaven)

    What are the reasons and what are the alternatives? Will they fix this problem?

    Tables really haven’t been used for layout for quite a few years…

    https://www.google.com/search?q=don%27t+use+tables+for+layout&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:en-US:official&client=firefox-a

    CSS gives you total control over the layout of a page, yes.

    But to address the question about the current page – you have inline styles (another not so good thing, sorry):

    <table width="631" height="464" cellspacing="2" cellpadding="2" border="0" align="left">

    The theme sets margins on the tables here:

    .entry-content table, .comment-content table {
    border-bottom: 0 none;
    margin: 0 0 1.625em;
    width: 100%;
}

    And yes, you have lots of p tags in one of the tables – are they not removable in the text editor?

    The other potential problem here is that making changes to theme files is not recommended – as those changes will be overwritten when the theme (and in this case when WP) is updated. For those kinds of changes, you should use a Child Theme –

    https://codex.www.ads-software.com/Child_Themes

    Thread Starter socialwebmaven

    (@socialwebmaven)

    Okay. Thanks. We get that; we’ve laid the rest of the site out using CSS, naturally.

    But, our client isn’t CSS savvy like our team is and we need them to be able to add some content on their own without having to call us to do it. In fact, they need to be able to do it in most cases because this is pro bono work.

    How do we make it easy for the client to add the content they need to add? without using CSS?

    And, back to the original question, how do we delete the extra spaces?

    Dahna

    Thread Starter socialwebmaven

    (@socialwebmaven)

    Thanks for your help, WPyogi. I do really appreciate it so please don’t think I don’t.

    We did try removing them in the text editor but they keep coming back.

    Yes, we should be using child themes and we will going forward, that’s for sure.

    But, we also want to make it easy for some of our non-management clients to use their websites without learning CSS so any suggestions would be helpful.

    Dahna

    Oh no, I don’t think that at all :). And I totally understand where you are coming from and think it’s great you’re helping out non-profits – I’ve worked in that world most of my life.

    But I don’t think tables will make it easier for them to update anything on that page – if anything, it’s easier to break a table layout. Or maybe I’m missing something about how you envision that working.

    It seems like using a theme that has widget areas to show various pieces of that content would make it easier for them to update?

    I also don’t know why those p’s would be returning…do you have any caching? Or where did that code come from – maybe it’s “messed up”?

    Thread Starter socialwebmaven

    (@socialwebmaven)

    OMGoodnez! Tell me about it! This code was a DISASTER. We migrated the site from HTML created in iWeb and done by total non-developers to WordPress and what we thought would take under 10 hours has taken over 30 hours because of code issues. So, it appears this may be another one. Maaaaan. Smh

    I sent our web team the link to this forum to see what they make of it. I just can’t stand all that white space.

    Now, I’m just trying to figure out a way to make sure this client can update the site without breaking it…which became the problem with the old site because the code had gotten so bad.

    Is there a plugin? Maybe we should add an events calendar instead of using tables?

    Dahna

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Extra Line Breaks in WP’ is closed to new replies.