/    Sign up×
Community /Pin to ProfileBookmark

chrome and firefox is not showing the true result of HTML/CSS

i am using brackets to code my website and i have two browsers installed in my computer chrome and firefox but both of them are not showing the expected result but when i am uploading my code on fiddle it shows the expected result.

It isexpected to show text color pink color as default color when the website starts and then it should change to black when user visited the code but it’s getting black permanently on chrome and firefox but it’s working as i mentioned upward(expected) in fiddle.

Can anyone tell me where is the problem in my code

HTML CODE

[code=html]<html>

<head>
<link rel=”stylesheet” href=”CSSworking.css”>

<title>Html Working</title>

</head>

<body>

<ul class=”main”>

<li><a href=”#”>Home</a></li>
<li><a href=”#”>Our Kitchen</a></li>
<li><a href=”#”>Menu</a></li>
<li><a href=”#”>About</a></li>
<li><a href=”#”>Contact</a></li>
<li><a href=”#”>Go Down</a></li>

</ul>
[/code]

CSS Code

[CODE]
.main li{

list-style: none;
display: inline-block;
margin: 20px;
}

a{

text-decoration: none;
font-family: fantasy;
font-size: 50;
}

a:link{

color: pink;

}

a:hover {

border-top: 4px solid red;
}

a:visited {

color: black;
}

[/CODE]

to post a comment
CSS

4 Comments(s)

Copy linkTweet thisAlerts:
@JMRKERSep 09.2017 — What is the fiddle URL to see what you desire to happen?

Also, have you read this: https://css-tricks.com/almanac/selectors/v/visited/

Note the sequence is L,V,H,A not the L,H,V, (A not specified) you have
Copy linkTweet thisAlerts:
@JMRKERSep 09.2017 — If you want to stay on the same page, this might work for you...

Does not use the V or L :pseudo tags at all. ?

<i>
</i>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
&lt;meta charset="UTF-8" /&gt;
&lt;title&gt; HTML5 page &lt;/title&gt;

&lt;style&gt;
.main li{
list-style: none;
display: inline-block;
margin: 20px;
}
a {
text-decoration: none;
font-family: fantasy;
font-size: 50;
color: pink;
}
a:hover { border-top: 4px solid red; border-bottom: 4px solid red;}
&lt;/style&gt;

&lt;/head&gt;
&lt;body&gt;
&lt;ul class="main"&gt;
&lt;li&gt;&lt;a href="#" onclick="this.style.color='black'"&gt;Home&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#" onclick="this.style.color='black'"&gt;Our Kitchen&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#" onclick="this.style.color='black'"&gt;Menu&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#" onclick="this.style.color='black'"&gt;About&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#" onclick="this.style.color='black'"&gt;Contact&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#" onclick="this.style.color='black'"&gt;Go Down&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;/body&gt;
&lt;/html&gt;

?
Copy linkTweet thisAlerts:
@markweb248authorSep 10.2017 — If you want to stay on the same page, this might work for you...

Does not use the V or L :pseudo tags at all. ?

<i>
</i>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
&lt;meta charset="UTF-8" /&gt;
&lt;title&gt; HTML5 page &lt;/title&gt;

&lt;style&gt;
.main li{
list-style: none;
display: inline-block;
margin: 20px;
}
a {
text-decoration: none;
font-family: fantasy;
font-size: 50;
color: pink;
}
a:hover { border-top: 4px solid red; border-bottom: 4px solid red;}
&lt;/style&gt;

&lt;/head&gt;
&lt;body&gt;
&lt;ul class="main"&gt;
&lt;li&gt;&lt;a href="#" onclick="this.style.color='black'"&gt;Home&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#" onclick="this.style.color='black'"&gt;Our Kitchen&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#" onclick="this.style.color='black'"&gt;Menu&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#" onclick="this.style.color='black'"&gt;About&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#" onclick="this.style.color='black'"&gt;Contact&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#" onclick="this.style.color='black'"&gt;Go Down&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;/body&gt;
&lt;/html&gt;

?[/QUOTE]



Thank you so much for your reply but i have solved the problem, what was happening is that when we visit a link it gets visited for a long time as it did in google search for some time and after some time it gets LINK color again and then we click it again and it become visited again.
Copy linkTweet thisAlerts:
@JMRKERSep 10.2017 — Thank you so much for your reply but i have solved the problem, what was happening is that when we visit a link it gets visited for a long time as it did in google search for some time and after some time it gets LINK color again and then we click it again and it become visited again.[/QUOTE]

That's an explanation as to what was happening,

what is your solution? Ignore the colors or not use them like I did?
×

Success!

Help @markweb248 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.16,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...