CSS prevents hyperlinks

Report · Apr 11, 2022

Hi all,

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

Report · Apr 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.

Report · Apr 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 & Moderator

Report · Apr 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 & Moderator