[Solved] social and contact icons not working since adding pseudo elements.

[Anonymous]

Greetings,

I’ve found a problem on the page I’ve been working on. The social and contact icons that use the social_sprite.png are not working properly. The only changes or additions have been to the right column image placement and the addition of some pseudo elements here:

#inner {

#main:before {

#main:after,#main .after {

.logo,.header{z-index:2}

Only those contact and social icons that have <span>Coming Soon!</span> and/or the href removed have any function.

They are working on this version, but are not functioning on the latest here. I’ve compared the source codes of both and can see nothing different other than those noted above and nothing that would cause the cease of function noted.

Best Regards.

[Anonymous]

Greetings All,

I’ve been studying this and still haven’t figured it out. Any help would be greatly appreciated.

Best Regards.

[paulob]

HI Michael,

I’m not sure if this is 100% foolproof but try this:

main:after, #main .after{

pointer-events:none;/* modern browsers only*/
z-index:auto;
}

The problem is that the after elements are sitting on top of the content and stopping it from becoming ‘clickable’.

If the above doesn’t work then it may be that you will need to put the content that is in the sidebar and in the main panel each inside a div that has a position:relative and z-index applied. The z-index should be higher than that of the pseudo elements.

[Anonymous]

Greetings Paul,

Thank you for addressing this. Yes, it fixed the problem and I checked it in my old version of IE, so I’m sure it works in the newest ones.

I really appreciate the explanation of what was going on with this. It is an essential part to know why the problem(s) arise and why in addition to the fix.

Best Regards.

[Author]

Posts