Issue when clicking Link

HTML & CSS
1

A minor annoying problem…

In my Page Header, I have this welcome…


if (isset($_SESSION['loggedIn']) && $_SESSION['loggedIn'] == TRUE){
	// Logged In.
	// Display Member Welcome.
	echo "<div id='welcome'>
		<span>Hello, <a id='firstName' href='/account/profile.php'>" . htmlspecialchars($memberFirstName, ENT_QUOTES) . "</a>!</span>
		</div>";
}else{
	// Not Logged In.
	// Display Visitor Welcome.
	echo '<div id="welcome">
			<span>Hello.</span>&nbsp;
			<a href="/account/log_in.php">Log In</a> to access premium content. &nbsp;
					Not a Member? &nbsp;<a href="/account/create_account.php">Start Here</a>
		</div>';
}

And these styles…


#welcome span,
#welcome a#firstName{
	font-weight: bold;
	color: #FF9900;						/* Orange */
}

When a person is NOT logged in, I want the hyperlinks to be normal, blue, underlined.

When a person is logged in, I want the Username to be bold, orange, underlined so it matches the word "Welcome, "

I seem to have accomplished this, however, if you click on the hyperlink when you are NOT logged in and then drag your cursor off the link - so it doesn’t fire - then the hyperlink turns and stays ORANGE which is annoying…

What is going on?

And is there maybe a better way to do my CSS so things are cleaner and don’t act weird like they are now??

Attached is a Before, During, and After screen-shot…

Thanks,

Debbie

2

I am guessing here since you posted only a small snippet of your code. But I think you have a rule somewhere for visited links which is what is turning your links orange a you described.

I think your nested ID selector is overkill. IDs are unique. If the rest of your code is done correctly, you should only need:

#welcome span, #firstName{...}

OT:
you could stream line your PHP as well:


<div id='welcome'>
<? echo (isset($_SESSION['loggedIn']) && $_SESSION['loggedIn']) ? 
        "<span>Hello, <a id='firstName' href='/account/profile.php'>" . htmlspecialchars($memberFirstName, ENT_QUOTES) . "</a>!</span>":
        "<span>Hello.</span>&nbsp;<a href='/account/log_in.php'>Log In</a> to access premium content. &nbsp; Not a Member? &nbsp; <a href='/account/create_account.php'>Start Here</a>";

?>
</div>
3

How do you set visited links?

BTW, would it look weird to have things styles like this…

Hello, Debbie!

…versus like how I am trying below…

Hello, Debbie!

(All of this started when I added a hyperlink behind the username tonight so there is an easy way to get to the Member’s Profile…)

Thanks,

Debbie

4

#welcome span, #firstName,#firstName:visited{…} should do it.

All of this started when I added a hyperlink behind the username tonight so there is an easy way to get to the Member’s Profile…)

Makes sense, as :visited is UNIQUE to anchor links. :slight_smile:

Hope that helps.

5

Gonna answer my other question???

Debbie

6

The first option is definitely the far better method as it’s clear and concise, people will much more easily recognize that they’ve visited that link before whereas the underline in the second example isn’t obvious enough.

7

Personally, I never bother with visited styles any more. I don’t like them much, except on sites like Google, where it’s handy to know where you’ve been. You can choose whatever colors you like for visited links, but there’s no guarantee that people will know what that color means—unless perhaps your links are blue by default and turn purple once visited … the usual browser default.

8

He just answered you question. You have to add pseudo styles to your html element.

Example of pseudo attributes you can use:

a:link
{
color: #FF0000;
}
/* unvisited link /
a:visited
{
color: #00FF00;
}
/ visited link /
a:hover
{
color: #FF00FF;
}
/ mouse over link /
a:active
{
color: #0000FF;
}
/ selected link */

9

So it sounds like we have votes for the two-tones Welcome…

Hello, Debbie!

Debbie