This question is answered. Helpful answers available: 1. Correct answers available: 1.


Permlink Replies: 8 - Pages: 1 - Last Post: 15-Oct-2017 21:58 Last Post By: jGromit
MarkusD

Posts: 493
Registered: 13-Apr-2006
Paragraph spacing in About.htt
Posted: 12-Oct-2017 19:32
 
  Click to reply to this thread Reply
Hi,

when using HTML-text in the About page template, text in a list has an extra large paragraph spacing in Tiger. I used the same HTML-code in Turtle before which looked better. See attached screen shots. How can I reduce the paragraph spacing? Why did the results differ from Turtle to Tiger? TIA, Markus
Laza

Posts: 9,471
Registered: 6-Sep-2005
Re: Paragraph spacing in About.htt
Posted: 12-Oct-2017 20:09   in response to: MarkusD in response to: MarkusD
 
  Click to reply to this thread Reply
The difference comes from the different frameworks the two skins are based on. Turtle is based on HTML5 Boilerplate, while Tiger is based on Zurb Framework. They modify the default tag styling to their own taste. Just add a class to the UL element, and style it through the "Settings / Tiger / Custom Code / CSS" box, e.g:
<ul class="mylist">....

CSS:
.mylist li { margin: .5rem 0 .5rem 2rem; }

Also make sure to turn off "Preformat text on pages, album info and footer" on "Settings / Tiger / Site / Extra" page. If you don't turn this off, the skin will insert <br> tags wherever you had a new line.
MarkusD

Posts: 493
Registered: 13-Apr-2006
Re: Paragraph spacing in About.htt
Posted: 12-Oct-2017 23:39   in response to: Laza in response to: Laza
 
  Click to reply to this thread Reply
Laza wrote:
Just add a class to the UL element, and style it through the "Settings / Tiger / Custom Code / CSS" box, e.g:
<ul class="mylist">....

CSS:
.mylist li { margin: .5rem 0 .5rem 2rem; }
That did not help.

I experimented a little bit and this did the trick:
.mylist li { margin: -0.8rem 1rem -0.8rem 1rem; }


I just tried to get some help here. But that's not that easy to understand. ;-)

Also make sure to turn off "Preformat text on pages, album info and footer" on "Settings / Tiger / Site / Extra" page. If you don't turn this off, the skin will insert <br> tags wherever you had a new line.
Thanks, good to know.

Problem solved, thanks a lot
Laza

Posts: 9,471
Registered: 6-Sep-2005
Re: Paragraph spacing in About.htt
Posted: 13-Oct-2017 08:52   in response to: MarkusD in response to: MarkusD
 
  Click to reply to this thread Reply
Using negative margins will result in lines covering each other.
MarkusD

Posts: 493
Registered: 13-Apr-2006
Re: Paragraph spacing in About.htt
Posted: 13-Oct-2017 19:22   in response to: Laza in response to: Laza
 
  Click to reply to this thread Reply
Laza wrote:
Using negative margins will result in lines covering each other.
If I use the "Sample Portfolio" album which comes with JA, and using my code with negative values I do get lines covering each other, see screen shot. I have no idea why in my album only negative values brings the gap between list lines to a good looking result.

Ah, I compared my About.htt with the one of the Sample Portfolio. They were completely different, see screen shot. I copied the About.htt from the Sample Portfolio into my project, compiled and it looked like in the Sample Portfolio, except the dots from the list were missing.

I then deleted my About.htt and created a new one with "New page|About.htt", filled out the values and now the gap between the list lines was huge again, but I do see the dots from the list. Very strange... ;-)

Finally did set the:
.mylist li { margin: -0.8rem 1rem -0.8rem 1rem; }

again in the CSS Custom Code part and do also use:
<ul class="mylist">

in the Text property in the About.htt.

To me all of this is like Voodoo, but, if negative margins do the trick, I don't care. ;-)
jGromit

Posts: 33,185
Registered: 31-Jan-2006
Re: Paragraph spacing in About.htt
Posted: 13-Oct-2017 20:40   in response to: MarkusD in response to: MarkusD
Helpful
  Click to reply to this thread Reply
I've got a much simpler solution to this problem. Theoretically, this shouldn't make any difference, but it clearly does. In HTML5, it is technically not necessary to close your <li> tags, and I've stopped doing so in my own code. As I said, this shouldn't make any difference. But in the Tiger About.htt, if I leave off the closing </li> tags, the spacing of bullet items returns to normal. I have no idea why, but it works.

See screenshots.
MarkusD

Posts: 493
Registered: 13-Apr-2006
Re: Paragraph spacing in About.htt
Posted: 13-Oct-2017 21:31   in response to: jGromit in response to: jGromit
 
  Click to reply to this thread Reply
I can confirm that for my About.htt too. Thanks for the info.
Laza

Posts: 9,471
Registered: 6-Sep-2005
Re: Paragraph spacing in About.htt
Posted: 15-Oct-2017 19:39   in response to: jGromit in response to: jGromit
 
  Click to reply to this thread Reply
The key is the "Preformat text..." option. If it's on, Tiger will insert a <br> tag whenever it sees a new line in the code which results in:
<li>.....</li><br><li>.....</li>

I probably should have disabled preprocessing on predefined custom page content.
jGromit

Posts: 33,185
Registered: 31-Jan-2006
Re: Paragraph spacing in About.htt
Posted: 15-Oct-2017 21:58   in response to: Laza in response to: Laza
 
  Click to reply to this thread Reply
Laza wrote:
The key is the "Preformat text..." option.

No, that didn't make any difference. Even with it turned off, the list items are double-spaced. But if you simply remove the closing </li> tag, the problem vanishes. There are still the same number of newlines in the code. Puzzled....
Legend
Forum admins
Helpful Answer
Correct Answer

Point your RSS reader here for a feed of the latest messages in all forums