• 0
Sign in to follow this  
Followers 0

Reducing size of a textbox


Question

Posted · Report post

I have a text box with a simple html title: <h3><span style="color: #009089;">Our People</span></h3><hr/>

 
placed in the text content area. But there's a lot of space underneath which I can't remove. If I check with firebug it was showing this. 
 
<section class="pl-section span12 offset0 section-textbox" data-clone="pe2gap" data-sid="textbox" data-object="PageLinesTextBox" id="textboxpe2gap"><div class="pl-section-pad fix"><div style="" class="textbox-wrap pl-animation   animation-loaded"><div class="hentry"><h3><span style="color: #009089;">Our People</span></h3>
<hr>
 

The  data-clone="pe2gap" leads me to think it's duplicating something. Any ideas?

 

Link to page - it's the people section: nicholaspealldesign1.com.gridhosted.co.uk/home2/

2 people like this

Share this post


Link to post
Share on other sites

9 answers to this question

  • 0

Posted · Report post

Anyone got an opinion on this....?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Nick, did you check the section's min-height setting when you edit the section or any parent section?

 

Also, I'm noticing an errant <br> after the <hr> tag.

 

See this:

<div class="pl-sortable-column pl-sortable-area editor-row">
<div class="row grid-row">
<section id="textboxpe2gap" class="pl-section span12 offset0 section-textbox" data-clone="pe2gap" data-sid="textbox" data-object="PageLinesTextBox">
<div class="pl-section-pad fix">
<div class="textbox-wrap pl-animation animation-loaded" style="">
<strong>
<h3>
<hr>
</strong>
<br>   <--HERE'S THE ERRANT BREAK
<div class="hentry"></div>
</div>
</div>
</section>
</div>

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Rob

 

 

Thanks for looking at this. The <br> tag isn't visible to me - but I dragged in a new textbox to start over. It seems adding the <h> tag, in this case <h3></h3> and then the line underneath <hr> in the title section is causing the text box to double in size. It also seemed to be the case when I added this in the text content area. 

 

Adding 1px of padding to the option area also didn't make any difference. 

 

If I strip out the html and use the font size option then it's a big improvement but then I have to restyle the textbox with the correct font /colour - maybe this is the best way to do it?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi,

 

I'm don't actually understand what space you're referring to. If you mean the white space beneath your second textbox which has the Our People in a greenish color, then that space is created by your sidebar. The Content Area runs alongside your Sidebar, if you do not have a lot of content, but do in our sidebar, your sidebar will cause white space in your content area because the sidebar is slow long.

 

Is this what you mean ?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

So you're saying that content in separate columns is somehow connected?

 

To the left is an 8/12 column with text sections then a 4/12 column with the twitter feed in a widgetizer. 

 

I don't see how the twitter feed would cause space to appear in a textbox that is halfway - from my experience the difference in content height appears at the bottom of the respective column. 

 

What I'm trying to determine is why html code causes the textbox to bloat without reason and if using a class to style the copy is more effective than using html tags

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Nick, you should really update to 1.0.2.

 

I suspect the H3 tag is adding that <br>. How about we try some custom CSS.  I know everyone loves H tags, but they can be pre-formatted in ways that don't always work well for everyone.

 

Would you consider using a unique class and eliminating both the h3 and hr tags?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

There are a lot of active topics asking this same thing.  What is the default padding on text boxes and why does it seem to be so much?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

sorry for the delay...was on hols. 

 

Those h tags do cause serious bloating of the text boxes, used a class and CSS instead which is slightly better. Wished the padding would be minimal by default. 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi,

 

The padding is significant to allow non-skilled users to design a website without coding.  Experienced designers, such as yourselves should be familiar with tools such as Firebug or Chrome's Inspection Tools and are capable of finding and adjusting the code, since it's quite evident.

 

Between the padding setting (I use 0 personally), and the ability to create a custom class on the fly, I can make each section look exactly as I desire. It's much, much easier than most would think.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0