Text relative to text box changes size after publishing

In SiteSpinner I will create a text box and have the text vertically aligned within the box. So, for instance, there will be an equal margin between the text and the box boundaries at both the top and bottom of the box.

Then upon publishing the page, the bottom margin changes due to the text slightly reducing size relative to the text box.

So the end result is extra white space at the bottom of the text box. I used to think the text box itself was changing size after publishing; but upon closer inspection, it's actually the size of the text that reduces slightly - giving the impression that the text box is enlarging.

Is there a way to anchor the text within the text box so that the text remains relatively the same size and in the same position after publishing the web page?
Original Post
There are at least 2 factors contributing to your problem.

One is the CSS line-height attribute. The line-height value is not consistent for all browsers, and SiteSpinner does not set an initial value for it. In my project I always add some CSS to make sure it is the same for all browsers. Use a code object, set the code placement to "in CSS" and enter:
#Oobj-name { line-height: 1.2; } 
where obj-name is the object name of your SS text object. You can change the value to suit your needs.

The 2nd factor is that SS always outputs a <br> tag at the end of every text object. This tag is used to insert a line break between text blocks. When you are trying to balance the space between the top and bottom borders of your text, this <br> will definitely effect the outcome.

You cannot get rid of the <br> tag in SS. You will need to manually edit the HTML output. But this is not a good solution because every time you edit your SS project, the problem will reappear.

You can add some more CSS code to help balance the space. You can adjust the top and/or bottom padding to even the spacing. In the same code object you use for the line-height, enter:
padding-top: 3px;
padding-bottom: 3px; 
adjusting the top and/or bottom values until you see your desired balance.

The final CSS code should appear as:
#Oobj-name {
line-height: 1.2;
padding-top: 3px;
padding-bottom: 3px;

You do not mention it, but browers also render the spacing between text characters a bit differently also. You can see this if your lines of text wrap differently in various browsers. It most often happens when you use long lines of text and a text object width that is very close to the edges of the text. Line wraps will also effect the top and bottom border spacing since this changes the number of lines being displayed.
Hi Larryd,

Thank you for your in-depth reply. However, I'm not seeing the code affect the layout/formatting of my text box.

My text object is: obj8618

My code therefore would be:

#obj8618 {
line-height: 1.2;
padding-top: 3px;
padding-bottom: 3px;

I insert this code via Object > Code > [text editor]

In the text editor is use the "in CSS" option.

When I then go to: Publish > Preview HTML Page,

I don't see any changes in the layout/format of the text - even when I input extreme values, e.g. padding-top: 30px or line-height: 4.5

What am I missing here?

Hi Larry,

Adding that "O", makes all the difference in the world!

I've now been able to experiment with the padding and line-height values.

I've found that if I keep the line-height set at 1.2, the text seems to stay within the top and bottom boundaries of my text box when previewed in both Internet Explorer and Google Chrome. (And I'm just keeping your suggested top and bottom padding settings of 3px.)

I just now conducted an A/B test. I published the web page both ways - first without the code.

Without the code, there was excess white space at the bottom of the text box.

With the code, the published web page looked identical to my text box layout in SiteSpinner.

So thank you Larryd for your expertise. This changing text box issue has been a mild annoyance for me for years.


When one has text (such as a schedule of dates) that he or she wishes to place within a web page and wants to retain its formatting, font size/type, boundaries, positioning, etc., why wouldn't a person simply create that specific text box as a graphic, e.g., jpg or png?

I would never use an image because the time it would take to create the image would far exceed the time it would take to do it in text. And in your example of a schedule of dates, changing a date would require a total regeneration of an image versus just changing some text.

If you really want to use an image, then use the PNG format. The edges of the text would stay sharper and crisper than a JPG image should the visitor need to zoom in. The PNG-32 format also supports a transparent background while JPG does not.

Add Reply

Likes (0)