Links stopped being clickable

[kushcat]

I have been installing extensions and today all links under the forums recent post aren't clickable anymore, I don't know why I can't click the post links anymore but I tried disabling all extensions but that didn't help

[kushcat]

It works in chrome but not Microsoft edge, I tried restarting my PC and clearing my browsing data

[kushcat]

i tried uninstalling and reinstalling my style and hyperlinks in last post are showing as text still, other members of my forum says it works for them

Screenshot 2025-04-11 214144.png

[kushcat]

nothing under last post is clickable anymore on index and in forums

[ssl]

i tried uninstalling and reinstalling my style

Have you tried prosilver?
Can you provide a link to your forum

[kushcat]

Yes prosilver worked the issue is only on prosilver dark edition http://dragonspot.net

[Gumboots]

That's an odd one. They are not clickable in Firefox for me. There's nothing in the CSS disabling them, and they are still focusable via keyboard navigation. If you tab to one of the links in .lastpost it works normally.

All I can think of is it must be one of your extensions.

[ssl]

Already think about updating your style to see if it solves the problem

Code: Select all

# General Information about this style
name = Prosilver (Dark Edition)
copyright = © PlanetStyles.net (Premium Forum Themes)
style_version = 1.1.5
phpbb_version = 3.3.11

Your phpBB version is 3.3.15

EDIT
On my board with the Prosilver (Dark Edition) style v1.1.5 everything is alright: https://www.medias.rimbertweb.fr/index.php?style=142
Your problem comme from an extension

[LukeWCS]

I don't know why I can't click the post links anymore but I tried disabling all extensions but that didn't help

An extension isn't the problem in this case, but rather your changes to Prosilver (Dark Edition) 1.1.5. The cause lies in this file:

styles/prosilver_dark/theme/content.css

Original:

Code: Select all

dl.row-item dt {
	background-repeat: no-repeat;
	background-position: 5px 95%;		/* Position of topic icon */
	background-size: 17px;
}

Your change:

Code: Select all

dl.row-item dt {
	background-repeat: no-repeat;
	background-position: 5px 18px;		/* Position of topic icon */
	background-size: 17px;
        position: relative;
}

The problem is position: relative;, which "somehow" moves the last column to another layer, which means links no longer function as such, neither on hover nor on click. Strangely, the effect only occurs in the last column. But I don't know why; a CSS Jedi will have to answer that.

This bastard of a CSS error cost me an hour and a half. ^^

[ssl]

The problem is position: relative;, which "somehow" moves the last column to another layer, which means links no longer function as such, neither on hover nor on click. Strangely, the effect only occurs in the last column. But I don't know why; a CSS Jedi will have to answer that.

This bastard of a CSS error cost me an hour and a half. ^^

I do not have this addition in the CSS file and do not encounter the problem mentioned here with this style

[cabot]

This bastard of a CSS error cost me an hour and a half. ^^

Relative positioning is used here to move the topic icon above the background of the read/unread icon (wich is positioned in absolute).
This is not immediately obvious because the background of the read state uses transparency, which is not the case for the unread state.

To fix this, the inaccessible elements also need to be positioned in relative:

Code: Select all

dd.lastpost > span > :not(dfn) {
	position: relative;
}

[LukeWCS]

When I consider how much time CSS has already cost me, especially when it comes to certain browser-specific features, because browser vendors want to do their own thing and thus force developers to implement some absurd browser switches, that's life time I'd like to have back. But okay, it's gotten considerably better. In this case, it was simply the CSS complexity that slowed me down in finding the error.

Relative positioning is used here to move the topic icon above the background of the read/unread icon (wich is positioned in absolute).

After ruling out all the usual potential causes, including JavaScript, I simply downloaded all the Prosilver Dark CSS files directly from kushcat and compared them with the original files. That's how I finally discovered the cause. But it's a mystery to me why this effect only occurs in the last column. For example, when I moved the links to the second-to-last column in my tests, they immediately worked normally.

[Gumboots]

The problem is position: relative;, which "somehow" moves the last column to another layer, which means links no longer function as such, neither on hover nor on click.

It's due to the utterly bonkers CSS that is carried over from default Prosilver.

Setting position: relative; has a similar effect to setting position: absolute; or position: fixed; in that it creates a new stacking context. It's similar to setting z-index: 1; even though no z-index as such has been set.

The utterly bonkers bit comes in because in the default Prosilver CSS someone had the idea that they wanted the dt to extend the full width of the parent li, so they gave the dt a massive negative right margin. This means that as soon as you move it to a new stacking context it overlaps the dd's, instead of "underlapping" them. Result is you are clicking the dt while the dd hides beneath it.

And good catch. It hadn't occurred to me at the time, because I haven't used that CSS for so long I had forgotten about its possible effects.

[Gumboots]

Relative positioning is used here to move the topic icon above the background of the read/unread icon (wich is positioned in absolute).
This is not immediately obvious because the background of the read state uses transparency, which is not the case for the unread state.

To fix this, the inaccessible elements also need to be positioned in relative:

Code: Select all

dd.lastpost > span > :not(dfn) {
	position: relative;
}

Too complicated. Just use this:

Code: Select all

.lastpost {
	position: relative;
}

Works the same. Less stuff. Less stuff is good.

Although, TBH, the best fix is to ditch the default Prosilver CSS and just flex the lot. That's what I did years ago, when I first took a look at the default code, thought "No effing way", and promptly threw it all in the bin. Never looked back. It makes responsive and RTL a hell of a lot easier too.

[kushcat]

his code worked, i will try yours later. any ideas of where to look if i wanted to buy a custom made skin?