Misalignment between number point and hyperlinked text

Get help with installation and running phpBB 3.2.x here. Please do not post bug reports, feature requests, or extension related questions here.
Post Reply
tellmethis
Registered User
Posts: 113
Joined: Sun Feb 14, 2010 7:02 pm
Contact:

Misalignment between number point and hyperlinked text

Post by tellmethis »

Support Request Template
What version of phpBB are you using? phpBB 3.2.2
What is your board's URL? http://www.alpha1.org.au/aaaforum
Who do you host your board with? Web24
How did you install your board? Someone else installed my board for me
What is the most recent action performed on your board? Update from a previous version of phpBB3
Is registration required to reproduce this issue? No
Do you have any MODs installed? No
Do you have any extensions installed? Yes
What version of phpBB3 did you update from? phpBB 3.1.3
What extensions do you have installed? Social Login
What styles do you currently have installed? prosilver
What language(s) is your board currently using? British English
Which database type/version are you using? MySQL 5
What is your level of experience? New to PHP but not phpBB
What actions did you take (updating your board; installing a MOD, style or extension; etc.) prior to this problem becoming noticeable? Created a post
Please describe your problem. Upon the creation of a numbered list, it seems that if a particular item is hyperlinked text that spreads over more than one line, a blank line is created such that the numbered point becomes horizontally misaligned with the beginning of the text.

To help illustrate, see this example of the problem.

For the section under New Zealand, this is the code behind the post:

Code: Select all

[list][*][b][color=#4080FF]New Zealand[/color][/b]
[list=1][*][b]Janus ED[/b], Joyce PR, Sheat JM, Carrell RW. Alpha-1-antitrypsin variants in New Zealand. N Z Med J 1975:82:289???91.
[*][color=transparent].[/color][link_open=http://alpha1.org.au/ResearchPapers/Clin_Genet_2003-64-382???397.pdf][b]de Serres FJ[/b], Blanco I, Fern??ndez-Bustillo E. Genetic epidemiology of alpha-1 antitrypsin deficiency in North America and Australia/New Zealand: Australia, Canada, New Zealand and the United States of America. Clin Genet 2003;64:382-97[/link_open][/list]
Any suggestions as to how I can eradicate the horizontal misalignment ?
Generated by SRT Generator
User avatar
EA117
Registered User
Posts: 2158
Joined: Wed Aug 15, 2018 3:23 am
Contact:

Re: Misalignment between number point and hyperlinked text

Post by EA117 »

Likely need to see the definition of your [link_open] BBCode, since the HTML replacement defined there could create such a condition. If I change that to the built-in [url] BBCode there isn't any such space:
tellmethis
Registered User
Posts: 113
Joined: Sun Feb 14, 2010 7:02 pm
Contact:

Re: Misalignment between number point and hyperlinked text

Post by tellmethis »

Thanks for replying, EA117.

Hopefully I've understood your comment, in which case, from ACP > Posting > BBCodes > HTML replacement:

Code: Select all

<a href="{URL}"  title="{URL}" onclick="window.open(this.href); return false;"><u>{TEXT}</u></a>
See any holes?
tellmethis
Registered User
Posts: 113
Joined: Sun Feb 14, 2010 7:02 pm
Contact:

Re: Misalignment between number point and hyperlinked text

Post by tellmethis »

BTW, the reason I precede the hyperlinked text with:

Code: Select all

[color=transparent].[/color]
... is that without it, the formatting is even worse. The misalignment becomes the number sitting horizontally below the hyperlinked text, such that it looks to the reader that the first line of a point is part of the preceding point.
Lady_G
Registered User
Posts: 272
Joined: Fri Jun 08, 2012 12:38 pm
Location: US

Re: Misalignment between number point and hyperlinked text

Post by Lady_G »

You are using a nested list, but I only see one closing [/list]. What happens when you add the second closing [/list]?

Code: Select all

[list][*][b][color=#4080FF]New Zealand[/color][/b]
[list=1][*][b]Janus ED[/b], Joyce PR, Sheat JM, Carrell RW. Alpha-1-antitrypsin variants in New Zealand. N Z Med J 1975:82:289???91.
[*][color=transparent].[/color][link_open=http://alpha1.org.au/ResearchPapers/Clin_Genet_2003-64-382???397.pdf][b]de Serres FJ[/b], Blanco I, Fern??ndez-Bustillo E. Genetic epidemiology of alpha-1 antitrypsin deficiency in North America and Australia/New Zealand: Australia, Canada, New Zealand and the United States of America. Clin Genet 2003;64:382-97[/link_open][/list][/list]
Or, what happens when you have a single list, such as:

Code: Select all

[list=1][*][b]Janus ED[/b], Joyce PR, Sheat JM, Carrell RW. Alpha-1-antitrypsin variants in New Zealand. N Z Med J 1975:82:289???91.
[*][color=transparent].[/color][link_open=http://alpha1.org.au/ResearchPapers/Clin_Genet_2003-64-382???397.pdf][b]de Serres FJ[/b], Blanco I, Fern??ndez-Bustillo E. Genetic epidemiology of alpha-1 antitrypsin deficiency in North America and Australia/New Zealand: Australia, Canada, New Zealand and the United States of America. Clin Genet 2003;64:382-97[/link_open][/list]
User avatar
EA117
Registered User
Posts: 2158
Joined: Wed Aug 15, 2018 3:23 am
Contact:

Re: Misalignment between number point and hyperlinked text

Post by EA117 »

tellmethis wrote: Fri May 24, 2019 12:39 am Hopefully I've understood your comment, in which case, from ACP > Posting > BBCodes > HTML replacement:

Code: Select all

<a href="{URL}"  title="{URL}" onclick="window.open(this.href); return false;"><u>{TEXT}</u></a>
See any holes?
Besides the onclick action which is the whole point of the alternate BBCode, the other difference I see from a "normal" [url] link is that the standard phpBB link gets class "postlink" applied to it. What changes if you add "class='postlink'" to your HTML replacement for [open_link]:

Code: Select all

<a href="{URL}" title="{URL}" class="postlink" onclick="window.open(this.href); return false;"><u>{TEXT}</u></a>
If it's not that, can you also then test removing the <u></u> out of there, which should be unnecessary anyway. Since that will be the only remaining difference I see.
tellmethis
Registered User
Posts: 113
Joined: Sun Feb 14, 2010 7:02 pm
Contact:

Re: Misalignment between number point and hyperlinked text

Post by tellmethis »

Lady_G wrote: Fri May 24, 2019 1:19 am You are using a nested list, but I only see one closing [/list]. What happens when you add the second closing [/list]?
Thanks for your observation, Lady_G. That's because I posted only the code for the first part of the entire nested list. I did check though, and all seems in order.
Lady_G wrote: Fri May 24, 2019 1:19 am Or, what happens when you have a single list, such as:

Code: Select all

[list][*][b][color=#4080FF]New Zealand[/color][/b]
[list=1][*][b]Janus ED[/b], Joyce PR, Sheat JM, Carrell RW. Alpha-1-antitrypsin variants in New Zealand. N Z Med J 1975:82:289???91.
[*][color=transparent].[/color][link_open=http://alpha1.org.au/ResearchPapers/Clin_Genet_2003-64-382???397.pdf][b]de Serres FJ[/b], Blanco I, Fern??ndez-Bustillo E. Genetic epidemiology of alpha-1 antitrypsin deficiency in North America and Australia/New Zealand: Australia, Canada, New Zealand and the United States of America. Clin Genet 2003;64:382-97[/link_open][/list][/list]
I gave single list a try. Behaviour was as expected, ie. single list displayed the same misalignment problem.
EA117 wrote: Fri May 24, 2019 1:42 am Besides the onclick action which is the whole point of the alternate BBCode, the other difference I see from a "normal" [url] link is that the standard phpBB link gets class "postlink" applied to it. What changes if you add "class='postlink'" to your HTML replacement for [open_link]:

Code: Select all

<a href="{URL}" title="{URL}" class="postlink" onclick="window.open(this.href); return false;"><u>{TEXT}</u></a>
Thanks EA117. I gave your suggestion a try, but the outcome is not only the same in terms of misalignment, but an extra solid horizontal line is added to each hyperlinked point. Click here for an illustration.
EA117 wrote: Fri May 24, 2019 1:42 am If it's not that, can you also then test removing the <u></u> out of there, which should be unnecessary anyway. Since that will be the only remaining difference I see.
Okay, tried that. As you suspected, makes no difference. So I've removed <u></u> from the HTML replacement field.

In case this offers any ideas or a clue, click here to see the output when I remove [color=transparent].[/color] from point numbered 2 under the heading New Zealand. The 1st line of the point numbered 2 is moved above the 2.

In other words, I changed:

Code: Select all

[list=1][*][color=transparent].[/color][b]Janus ED[/b], Joyce PR, Sheat JM, Carrell RW. Alpha-1-antitrypsin variants in New Zealand. N Z Med J 1975:82:289–91.
[*][link_open=http://alpha1.org.au/ResearchPapers/Clin_Genet_2003-64-382–397.pdf][b]de Serres FJ[/b], Blanco I, Fernández-Bustillo E. Genetic epidemiology of alpha-1 antitrypsin deficiency in North America and Australia/New Zealand: Australia, Canada, New Zealand and the United States of America. Clin Genet 2003;64:382-97[/link_open][/list]
to:

Code: Select all

[list=1][*][b]Janus ED[/b], Joyce PR, Sheat JM, Carrell RW. Alpha-1-antitrypsin variants in New Zealand. N Z Med J 1975:82:289–91.
[*][link_open=http://alpha1.org.au/ResearchPapers/Clin_Genet_2003-64-382–397.pdf][b]de Serres FJ[/b], Blanco I, Fernández-Bustillo E. Genetic epidemiology of alpha-1 antitrypsin deficiency in North America and Australia/New Zealand: Australia, Canada, New Zealand and the United States of America. Clin Genet 2003;64:382-97[/link_open][/list]
User avatar
EA117
Registered User
Posts: 2158
Joined: Wed Aug 15, 2018 3:23 am
Contact:

Re: Misalignment between number point and hyperlinked text

Post by EA117 »

Since the "postlink" class didn't solve it, it is probably going to require creating a test account on your board with enough rights to see at least one example post/forum that demonstrates the issue. Since exploring around in the F12 view for "why is this space here" is what needs to happen, but is a bit inefficient to try and achieve that through screen shots. i.e. We need to be able to login on the board where it's happening, and use the developer view of a web browser to try and determine what HTML or CSS is contributing to this space.
tellmethis
Registered User
Posts: 113
Joined: Sun Feb 14, 2010 7:02 pm
Contact:

Re: Misalignment between number point and hyperlinked text

Post by tellmethis »

If you're happy to take a look, EA117, then I'm happy to create a test account for you. Feel free to PM me if of interest.
User avatar
AmigoJack
Registered User
Posts: 6106
Joined: Tue Jun 15, 2010 11:33 am
Location: グリーン ヒル ゾーン
Contact:

Re: Misalignment between number point and hyperlinked text

Post by AmigoJack »

Alternatively post a link to such a post which guests can read, so we can analyze the effective CSS leading to this.
  • "The problem is probably not my English but you do not want to understand correctly. ... We will not come anybody anyway, nevertheless, it's best to shit this." Affin, 2018-11-20
  • "But this shit is not here for you. You can follow with your. Maybe the question, instead, was for you, who know, so you shoved us how you are." axe70, 2020-10-10
  • "My reaction is not to everyone, especially to you." Raptiye, 2021-02-28
tellmethis
Registered User
Posts: 113
Joined: Sun Feb 14, 2010 7:02 pm
Contact:

Re: Misalignment between number point and hyperlinked text

Post by tellmethis »

AmigoJack wrote: Fri May 24, 2019 7:11 am Alternatively post a link to such a post which guests can read, so we can analyze the effective CSS leading to this.
Okay, shall do. Thank you AmigoJack. See this publicly accessible post.

That same post behind the scenes:

Code: Select all

[list][*][b][color=#4080FF]New Zealand[/color][/b]
[list=1][*][b]Janus ED[/b], Joyce PR, Sheat JM, Carrell RW. Alpha-1-antitrypsin variants in New Zealand. N Z Med J 1975:82:289–91.
[*][color=transparent].[/color][link_open=http://alpha1.org.au/ResearchPapers/Clin_Genet_2003-64-382–397.pdf][b]de Serres FJ[/b], Blanco I, Fernández-Bustillo E. Genetic epidemiology of alpha-1 antitrypsin deficiency in North America and Australia/New Zealand: Australia, Canada, New Zealand and the United States of America. Clin Genet 2003;64:382-97[/link_open][/list]

[*][b][color=#4080FF]Australia[/color][/b]
[list=1][*][b]Ananthakrishnan R[/b], Biegler B, Dennis PM. Alpha 1-antitrypsin phenotypes in paraproteinaemias. Lancet. 1979;1:561-2.
[*][b]Mulley JC[/b]. Distribution of the six alpha 1-antitrypsin (PI) subtypes from a sample of blood donors. Aust J Exp Biol Med Sci 1980: 58: 409–14.
[*][color=transparent].[/color][link_open=https://www.ncbi.nlm.nih.gov/pmc/articles/PMC1048540/pdf/jmedgene00125-0010.pdf][b]McPhee H[/b], Ananthakrishnan R, Taft LI. Antiproteases and Down’s syndrome in an Australian population. J Med Genet 1980: 17: 170–3.[/link_open]
[*][b]Mulley JC[/b]. Distribution of alpha 1-antitrypsin (PI) subtypes from newborns. Aust J Exp Biol Med Sci 1982: 60: 207–9.
[*][b]Clark P.[/b] Alpha-1-protease inhibitor phenotypes in Australia. Hum Hered 1982:32:225– 7.
[*][color=transparent].[/color][link_open=https://pdfs.semanticscholar.org/c353/367f527cb8ad4162f5f51adbac0bdc1a6d41.pdf][b]Oakeshott JG[/b], Muir A, Clark P et al. Effects of the protease inhibitor (Pi) polymorphism on alpha-1-antitrypsin concentration and elastase inhibitory capacity in human serum. Ann Human Biol 1985: 12: 149–60.[/link_open]
[*][color=transparent].[/color][link_open=http://alpha1.org.au/ResearchPapers/Hum_Hered_1990_40_22–8.pdf][b]Muir A, Whitfield JB[/b]. Alpha-1-antitrypsin (protease inhibitor) phenotypes and longevity. Hum Hered 1990: 40: 22–8[/link_open]
[*][color=transparent].[/color][link_open=http://alpha1.org.au/ResearchPapers/Clin_Exp_Pharmacol_Physiol_1996_23_600–1.pdf][b]Huggard PR[/b], West MJ, Summers KM. Alpha 1-antitrypsin deficiency alleles and blood pressure in an Australian population. Clin Exp Pharmacol Physiol 1996: 23: 600–1[/link_open]
[*][color=transparent].[/color][link_open=http://alpha1.org.au/ResearchPapers/Clin_Genet_2003-64-382–397.pdf][b]de Serres FJ[/b], Blanco I, Fernández-Bustillo E. Genetic epidemiology of alpha-1 antitrypsin deficiency in North America and Australia/New Zealand: Australia, Canada, New Zealand and the United States of America. Clin Genet 2003; 64: 382-97[/link_open][/list][/list]
EA117 wrote: ↑Fri May 24, 2019 11:42 am
If it's not that, can you also then test removing the <u></u> out of there, which should be unnecessary anyway. Since that will be the only remaining difference I see.
tellmethis wrote: Fri May 24, 2019 4:03 amOkay, tried that. As you suspected, makes no difference. So I've removed <u></u> from the HTML replacement field.
Correction. Removal of <u></u> did make a difference. It removed the underlining of hyperlinked text. So I've added <u></u> back in.
User avatar
EA117
Registered User
Posts: 2158
Joined: Wed Aug 15, 2018 3:23 am
Contact:

Re: Misalignment between number point and hyperlinked text

Post by EA117 »

Looks like I was incorrectly trying to use the proSilver style here on phpbb.com/community as a representation of standard phpBB. 😜

It worked in the example I posted above because phpbb.com/community has an edited proSilver style which removes the display: inline-block workaround from the top of the standard phpBB 3.2.x /styles/prosilver/theme/links.css:

Code: Select all

/* Links adjustment to correctly display an order of rtl/ltr mixed content */
a {
	direction: ltr;
	unicode-bidi: embed;
	text-decoration: none;
	/* we use links inline more often then not so to address several bugs with
	IE and some other browsers we render all links as inlineblock by default */
	display: inline-block;
}
That same "list with a link" example actually shows the unwanted space on a clean phpBB 3.2.7 site using proSilver, in the same way it shows on your board.

Eliminating the display: inline-block should make your results the same as they are here on phpbb.com/community. You should be able to test that without editing your style, by adding a direct element style in your BBCode replacement:

Code: Select all

<a href="{URL}" title="{URL}" class="postlink" style="display: inline;" onclick="window.open(this.href); return false;">{TEXT}</a>
What I'm not smart enough (or haven't had enough coffee yet) to realize is what exactly forces the block down in this case. To understand whether there is some smarter solution other than removing the display: inline-block workaround that would also achieve the desired display result.
tellmethis wrote: Fri May 24, 2019 9:10 am Correction. Removal of <u></u> did make a difference. It removed the underlining of hyperlinked text. So I've added <u></u> back in.
I expect this is because you had removed the "postlink" class again. The proSilver style sheets don't provide the "underline" of clickable links in response to simply the <a> tag, and instead deliver that behavior to the "postlink" class. So you're right, if the link isn't being treated like other phpBB links, you'll have to underline it yourself.

My suggestion is to leave "postlink" in there, so that your [open_link] BBCode will benefit from anything the style is doing "for all other links." But that's ultimately your decision to make if you would rather leave it out.
tellmethis
Registered User
Posts: 113
Joined: Sun Feb 14, 2010 7:02 pm
Contact:

Re: Misalignment between number point and hyperlinked text

Post by tellmethis »

EA117, sensational !!

Whilst my depth of understanding means that I don't fully understand the guts of this, I pasted your suggested code into BBCodes > HTML replacement, tested, and presto, works a treat!! Everything displays properly, even the links are underlined.

Really appreciate you taking the time to not only come up with a solution, but explain at length. Thank you.
Post Reply

Return to “[3.2.x] Support Forum”