Skip to main content
S
Stevie239889026qz8
Participant
April 11, 2022
Question

CSS prevents hyperlinks

  • April 11, 2022
  • 3 replies
  • 153 views

Hi all,

 

please could somebody explain why when I overlay my css it completely stops hyperlinks from working?

    This topic has been closed for replies.

    3 replies

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    April 11, 2022

    #1 Validate code and fix reported errors.

     

    #2 Remove all position rules from your CSS.  Positioning removes content from normal document flow.  It's not recommended for primary layouts.

     

     

     

     

    Nancy O'Shea— Product User & Community Expert
    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    April 11, 2022
    • Hyperlinks are HTML content.
    • CSS are styles. 

    Technically neither one effects the other.  So something else is going on. 

     

    Try this code:

    <!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Untitled Document</title>

<style>
a {color:red; text-decoration:none}

a:visited {color:gray}

a:hover, a:active, a:focus {color: black; background:red;}
</style>
</head>

<body>
<a href="#">Link 1</a> |
<a href="#">Link 2</a> |
<a href="#">Link 3</a> |
</body>
</html>

     

    To give better answers, we need to see YOUR code.  And the quickest way to do that is to upload your problem page and assets to your server and provide a URL here for us to see.  A distant 2nd option is to copy & paste your entire code (HTML & CSS) into a web forum reply.

     

     

     

    Nancy O'Shea— Product User & Community Expert
    O
    osgood_
    Legend
    April 11, 2022

    Without seeing the code you are using its just a guessing game BUT one of the main reasons this happens is because there are elements sitting above the container that the hyperlinks are located in which blocks them from working. Your hyperlinks should probably be above any other elements. Try giving the hyperlinks parent container a z-index: 100; This will only work IF the parent container is also positioned absolutely or relatively.

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices