1120791 - 4th and 5th hyperlinks are unclickable

Status: RESOLVED INVALID

(Core :: General, defect)

Description

[julien_ferte]

Attachment: style.css

I happen to be the creator of the website www.julienferte.com.

By going to the webpage

http://julienferte.com/a_propos.php

one notices that the 4th and 5th hyperlinks are unclickable (namely "Youtube" and "Twitter") and that the mouse hovering over them doesn't make the text underlined, to the contrary of the 3 first hyperlinks "Creative Commons", "Facebook" and "Google +" which are behaving normally.
Yet the 4th and 5th hyperlinks are detected as hyperlinks, according to the color defined by the CSS file style.css.

To narrow down the issue, I changed the color defined by the CSS file into purple (anything which is different from default) and rearranged the hyperlinks into "Youtube", "Twitter", "Google +" and "Facebook"; the 4th ("Google +") and 5th ("Facebook") hyperlinks were still unclickable nor underlined by mouse-hovering, and yet detected as being hyperlinks according to the CSS file color test.

Even removing the characters '-', 'é' and '_' from the addresses of the hyperlinks and doing the above steps doesn't change the buggy outcome.

Well, the 4th and 5th links should have been clickable and underlined by mouse-hovering.

There are two ways of making them clickable, but it changes the layout of the website into something ugly or unreadable :
- putting the links in a <div> element (it breaks the paragraph structure),
- removing the line "margin-left: 200px;" for the selector ".cl_main_section" in the CSS file style.css (it makes the layout unreadable).

My CSS file is not ill-conceived, neither are my HTML file nor my PHP file. I wrote all those files by hand and they are very simple and straightforward. They are shown correctly by Firefox but maybe the hovering of the mouse doesn't fit the text.

I wonder if it is a coordinate problem either of the mouse and/or of the hyperlinks on the layout.

The HTML file involved and produced by the PHP file "a_propos.php" can be downloaded from the website for further tests if required, I can send it to you if requested. The CSS stylesheet style.css is joined to this message.

Thanks in advance for your help,
J. Ferté

Comment 1

[:Gijs (he/him)]

(In reply to julien_ferte from comment #0)
> Created attachment 8547944 [details]
> style.css
> 
> I happen to be the creator of the website www.julienferte.com.
> 
> By going to the webpage
> 
> http://julienferte.com/a_propos.php
> 
> one notices that the 4th and 5th hyperlinks are unclickable (namely
> "Youtube" and "Twitter") and that the mouse hovering over them doesn't make
> the text underlined, to the contrary of the 3 first hyperlinks "Creative
> Commons", "Facebook" and "Google +" which are behaving normally.

For me, all of the links on that page get an underline on hover, and are clickable (and go to youtube and twitter as expected).

Are you still seeing this? If so, if you restart Firefox using Help > Restart with add-ons disabled..., does that make the issue go away? Does it work on other browsers on your computer?

Comment 2

[Alice0775 White]

(In reply to :Gijs Kruitbosch from comment #1)
> (In reply to julien_ferte from comment #0)
> > Created attachment 8547944 [details]
> > style.css
> > 
> > I happen to be the creator of the website www.julienferte.com.
> > 
> > By going to the webpage
> > 
> > http://julienferte.com/a_propos.php
> > 
> > one notices that the 4th and 5th hyperlinks are unclickable (namely
> > "Youtube" and "Twitter") and that the mouse hovering over them doesn't make
> > the text underlined, to the contrary of the 3 first hyperlinks "Creative
> > Commons", "Facebook" and "Google +" which are behaving normally.
> 
> For me, all of the links on that page get an underline on hover, and are
> clickable (and go to youtube and twitter as expected).
> 

This only happens when browser window width is narrow(but text does not truncated).

Comment 3

[Alice0775 White]

Same as Chrome and IE11. I think thisis the site problem.

A image(#id_fond_ecran)  has css position:absolute. Then it covers these links.
So, you should specify z-index OR pointer-events: none;

Comment 4

[:Gijs (he/him)]

(In reply to Alice0775 White from comment #3)
> Same as Chrome and IE11. I think thisis the site problem.
> 
> A image(#id_fond_ecran)  has css position:absolute. Then it covers these
> links.
> So, you should specify z-index OR pointer-events: none;

Ah. You're absolutely right, Alice. Marking as invalid. Thanks!

Comment 5

[julien_ferte]

(In reply to Alice0775 White from comment #3)
> Same as Chrome and IE11. I think thisis the site problem.
> 
> A image(#id_fond_ecran)  has css position:absolute. Then it covers these
> links.
> So, you should specify z-index OR pointer-events: none;

Thanks a lot, Alice. I choosed to put the value -1 to the z-index and it works perfectly.
I am ashamed to have such a newbiness in HTML & CSS programming.

Anyway, thanks a lot for your fast and accurate answers :)
I hope the next time I come here, it will really be about a proper bug.

Bye!

Comment 6

[Firefox Bug Husbandry Bot]

Moving from Core::Untriaged to Core::General https://bugzilla.mozilla.org/show_bug.cgi?id=1407598