CODEWITHSUNDEEP
htmlcsshyperlink
BartWD
BartWD

Reputation: 140

a:active doesn't work yet a:hover functions correctly

I'm having trouble with "a:active" not working at all. "a:hover" is working correctly on the other hand.

/* CSS Document */
@charset "utf-8";

/* Main HTML Elements */
body {
	font-family: "Open Sans";
	font-size: 14px;
	
	background-color: #FFFFFF;
	color: #1B242D;
	
	width: 100%;
	height: 100%;
	
	margin: 0px;
	padding: 0px;
}

h1 {
	font-size: 26px;
	color: #FFFFFF;
}

h2 {
	font-size: 20px;
	color: #5EB59C;
}

h3 {
	font-size: 18px;
	color: #28BDEA;
}

h4 {
	font-size: 14px;
	color: #00ACDF;
}

/* Bart Specific */
#mainContainer {
	position: absolute;
	width: 100%;
	height: 100%;
	
	padding: 0px;
	margin: 0px;
}

#topContainer {
	position: fixed;
	top: 0px;
	width: 100%;
	height: 150px;
	
	background-color: #1B242D;
	
	z-index: 1;
}

#topBar {
	position: absolute;
	top: 0px;
	height: 5px;
	width: 100%;
	
	background-color: #00ACDF;
	overflow: hidden;
}

#headerContainer {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	
	color: #FFFFFF;
}

#headerArrow {
	position: absolute;
	top: 150px;
	right: 65px;
	width: 0px;
	height: 0px;
	border-left: 80px solid transparent;
	border-right: 80px solid transparent;
	
	border-top: 60px solid #1B242D;
}

#headerText {
	position: absolute;
	bottom: 0px;
	left: 5px;
}

#TopNav {
	position: absolute;
	top: 5px;
	right: 35px;
}

#TopNav ul {
	list-style-type: none;
	margin: 0px;
	padding: 0px;
}

#TopNav ul li {
	display: inline-block;
}

#TopNav ul li a {
	display: block;
	padding-left: 10px;
	padding-bottom: 5px;
	padding-right: 10px;
	text-align: center;
	color: #FFFFFF;
	font-size: 16px;
	text-decoration: none;
	
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
}

/* #TopNav a:link {
	text-decoration: none;
} */

/* #TopNav a:visited {
	text-decoration: none;
	color: #FFFFFF;
} */

#TopNav ul li a:hover {
	text-decoration: none;
	font-weight: !important;
	color: #FFFFFF;
	background-color: #28BDEA;
}

#TopNav ul li a:active {
	text-decoration: none;
	color: #FFFFFF;
	background-color: #00ACDF;
}

#midContainer {
	position: absolute;
	top: 160px;
	padding: 0px;
	margin: 0px;
	
	width: 100%;
}

#mainContent {
	position: absolute;
	width: auto;
	right: 305px;
	left: 10px;
	
	padding-bottom: 10px;
}

#contentSeparator {
	position: fixed;
	width: 1px;
	height: 80%;
	right: 295px;
	background-color: #8D9299;
}

#newsContainer {
	position: absolute;
	top: 50px;
	right: 25px;
	max-width: 250px;
	min-width: 250px;
	text-align: center;
}

#bottomContainer {
	position: fixed;
	bottom: 0px;
	
	background-color: #8D9299;
	width: 100%;
	height: 25px;
	
	color: #FFFFFF;
	
	text-align: center;
}

#footerContent {
	position: absolute;
	top: 3px;
	width: 100%;
	text-align: center;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>

<link rel="stylesheet" type="text/css" media="screen and (max-width: 801px)" href="/css/p_mobile.css">
<link rel="stylesheet" type="text/css" media="screen and (min-width: 801px)" href="/css/p_def.css">

<link rel="stylesheet" type="text/css" href="/inc/fontawesome/css/font-awesome.min.css">
<script src="/inc/js/jquery-1.11.2.min.js"></script>
<script src="/inc/js/webfont.js"></script>


<title>Home</title>
</head>
<body>

<div id="mainContainer">
	<div id="topContainer">
		<div id="topBar"></div>
    	<div id="headerContainer">
    		<div id="headerArrow"></div>
    	    <div id="headerText"><h1>Page Title Here</h1><h4>...a very warm welcome to my personal portfolio website.</h4></div>
    	    <div id="TopNav">
            	<ul>
            		<li><a href="/index.html">Home</a></li>
            		<li><a href="/mywork.html">My Work</a></li>
            		<li><a href="/aboutme.html">About Me</a></li>
            		<li><a href="/contactme.html">Contact Me</a></li>
            		<li><a href="/docs/index.html">Documents</a></li>
            	</ul>
            </div>
    	</div>
	</div>
    
    <div id="midContainer">
    	<div id="mainContent">
          <p>Some Text Here</p>
        </div>
        <div id="contentSeparator"></div>
        <div id="newsContainer">
        	<div id="news_1">
            	<p>Some news here...</p>
                <hr>
                <p>Some more news here...</p>
            </div>
        </div>
    </div>
    
    <div id="bottomContainer">
    	<div id="footerContent">
        	Copyright Notice Here
        </div>
    </div>
</div>

</body>
</html>

I have tried many times to fix this but it just won't work. I have used this before and I set it up identically and it worked fine over there, but for some reason not here. Any clues?

Thanks!

MODIFICATION: I have now added full page CSS and HTML if this may help in solving of the problem. Thanks for your help!

Upvotes: 2

Views: 6301

Answers (1)

Satwik Nadkarny
Satwik Nadkarny

Reputation: 5135

The problem is this :

#TopNav a:hover {
    text-decoration: none;
    color: #FFFFFF;
    background-color: #00ACDF;
}

#TopNav a:active {
    text-decoration: none;
    color: #FFFFFF;
    background-color: #00ACDF;
}

If you observe there is no difference between the two states. They are the same. The active class actually works in this case but since it is the same as the hover state in terms of CSS, you observe no difference visually.

So, let's change the active state's CSS a bit. Lets add an orange background with black text on active state. So the class would be modified as follows :

#TopNav a:active {
    text-decoration: none;
    color: Black;
    background-color: orange;
}

Now, you can observe that it works. Just observe that when you click the link, you can see the anchor links having an orange background while the text turns black as specified by our active class's CSS.

See this working below :

#TopNav {
	position: absolute;
	top: 5px;
	right: 35px;
    background-color: #1B242D;
}

#TopNav ul {
	list-style-type: none;
	margin: 0px;
	padding: 0px;
}

#TopNav ul li {
	display: inline-block;
}

#TopNav a {
	display: block;
	padding-left: 10px;
	padding-bottom: 5px;
	padding-right: 10px;
	text-align: center;
	color: #FFFFFF;
	font-size: 16px;
	text-decoration: none;
	
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
}

#TopNav a:link {
	text-decoration: none;
}

#TopNav a:visited {
	text-decoration: none;
	color: #FFFFFF;
}

#TopNav a:hover {
	text-decoration: none;
	color: #FFFFFF;
	background-color: #00ACDF;
}

#TopNav a:active {
	text-decoration: none;
	color: Black;
	background-color: orange;
}
<div id="TopNav">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">My Work</a></li>
    <li><a href="#">About Me</a></li>
    <li><a href="#">Contact Me</a></li>
    <li><a href="#">Documents</a></li>
  </ul>
</div>

Upvotes: 1

Related Questions