...

View Full Version : Resolved Mark a link visited so that it stays marked.



effpeetee
11-16-2008, 08:26 PM
I want to mark a link visited so that it stays marked.

If you look at this Sources (http://www.exitfegs.co.uk/Sources.html) program you will notice that the link when clicked goes into smaller text mode. My original intention was that this would enable anyone using the lists to see where they had been.

I could not find away to make the marking stick. Can anyone help me with this. I need the marking (or some other form of marking) to stay marked while the site is being visited. I do not need to store it once the site is logged off.

Thanks for your help.:D

Frank

gnomeontherun
11-16-2008, 09:25 PM
You have some errors with your markup, and when I open the link your CSS is showing.

Check your conditional CSS statements first, they are messing with the page.

Then you use :visited and :active on your anchors, like you are.

effpeetee
11-16-2008, 09:59 PM
You have some errors with your markup, and when I open the link your CSS is showing.

Check your conditional CSS statements first, they are messing with the page.

Then you use :visited and :active on your anchors, like you are.
The errors were not affecting the issue. I always put the css in the head section while I am developing. It makes it easier for those helping me.

The present set up does not keep the marking. It is lost on return to the base page.

What conditional markings do you refer to?

Thanks for your help.

Frank

_Aerospace_Eng_
11-16-2008, 10:07 PM
Just view your page Firefox and you'll see the issue. Having styles in the document is fine during development but it must be done properly. Change

<style type="text/css">
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;<span style="font-size: 10pt">
font-family: inherit;
<font size=3></font></span> vertical-align: baseline;
}

<!--[if lte IE 6]>
<style>
.gainlayout { height: 1px; }
</style>
<![endif]>

<!--[if IE 7]>
<style>
.gainlayout { zoom: 1; }
</style>
<![endif]-->


/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}

body {
background-color:#000;color:white;
}

#Container {width:100%;
border-bottom:25px solid black;
color:#000;
background-color:#000;
font:900 .55em "lucida sans", verdana, arial, sans-serif;

}



#body {
width:100%;
}

a:link {
color:#000;
background-color:inherit;
text-decoration:none;
}

a:visited {
color:#f00;
background-color:white;
}

a:hover {
color:red;
background-color:inherit;
}

a:active {
color:#fff;
background-color:inherit;
font-size:80%;
}

a img {
border:none;
}

#header h1 {
font-size:2em;
color:#FFF;
background-color:#000;
text-align:center;
margin-bottom:0.5%;
}

#content1 {
width:32%;
float:left;
margin-left:.1%;
border:1px solid #000;
background-color:#fff;
color:#000;
text-align:left;
font-size:125%;

}

#content2 {
width:32%;
text-align:left;
border:1px solid #000;
background-color:#fff;
color:#000;
margin-left:auto;
margin-right:auto;
font-size:125%;
}

#content3 {
width:32%;
float:right;
margin-right:.2%;
border:1px solid #000;
background-color:#fff;
color:#000;
text-align:left;
font-size:125%;
}

.h1 {
text-align:center;
font:.5em arial, verdana, sans-serif;
color:#000;
margin-bottom:4px;
}

h4 {
width:95%;
font-size:1.5em;
margin-left:auto;
margin-right:auto;
margin-bottom:1em;
text-align:center;
color:#fff;
background-color:#000;
}



h6 {
text-align:center;
margin-bottom:1px;
background-color:#bbb;
color:#000;
font:1.4em arial, verdana, sans-serif;
}


.links {
font:1.1em arial, verdana, sans-serif;
list-style-type:decimal;
color:#000;
background-color:#fff;
padding:1.0em;
}

.links ol {
margin-left:16px;
list-style-type:decimal;
padding:0 0 10px 12px;
}

.links ol a {
color:#000;
background-color:#fff;
text-decoration:none;
}

.links ol a:hover {
color:#fff;
background-color:#000;
}

ol {
list-style:decimal;
margin-left:2em;
}

.indent {
margin-left:2.3em;
}

#footer {
clear:both;
height:5%;
font-size:1.5em;
background-color:#060;
text-align:center;
padding:3px;
}

li {
color:#000;
list-style-type:decimal;
}

.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}

.clearfix {
display:block;
}

#button ol {
list-style-type:decimal;
border:none;
margin:0;
padding:0;
}

#button li {
border-bottom:1px solid #90bade;
margin:0;
}




.indent2 {
margin-left:2.4em;
}

.centre {
text-align:center;
}

p {
text-align:left;
padding-left:30px;
color:#fcc;
background-color:#000;
font:1.3em arial, verdana, sans-serif;
}


</style>
<!--[if IE]>
<style type="text/css">li.nobullet {
height: 1%;
}

* html .clearfix {
height: 1%;
}

* html #body {
height: 100%;
}

.batch_headers {
font: 900 0.8em "arial black", sans-serif;
text-decoration:underline;
text-align:center;
color:#663300;
margin:0;

}

.menu{
margin-right:2.2em;
color:#000;
}

h5 {
font: 900 0.84 em "arial black", sans-serif;
padding: 0 0 6px 0;
color:white;
text-align:center;
}

hr{color:red;background:red;height:1px;border:0;}


#body{background-color:#000:}
</style>

to this

<style type="text/css">
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}




/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}

body {
background-color:#000;color:white;
}

#Container {width:100%;
border-bottom:25px solid black;
color:#000;
background-color:#000;
font:900 .55em "lucida sans", verdana, arial, sans-serif;

}



#body {
width:100%;
}

a:link {
color:#000;
background-color:inherit;
text-decoration:none;
}

a:visited {
color:#f00;
background-color:white;
}

a:hover {
color:red;
background-color:inherit;
}

a:active {
color:#fff;
background-color:inherit;
font-size:80%;
}

a img {
border:none;
}

#header h1 {
font-size:2em;
color:#FFF;
background-color:#000;
text-align:center;
margin-bottom:0.5%;
}

#content1 {
width:32%;
float:left;
margin-left:.1%;
border:1px solid #000;
background-color:#fff;
color:#000;
text-align:left;
font-size:125%;

}

#content2 {
width:32%;
text-align:left;
border:1px solid #000;
background-color:#fff;
color:#000;
margin-left:auto;
margin-right:auto;
font-size:125%;
}

#content3 {
width:32%;
float:right;
margin-right:.2%;
border:1px solid #000;
background-color:#fff;
color:#000;
text-align:left;
font-size:125%;
}

.h1 {
text-align:center;
font:.5em arial, verdana, sans-serif;
color:#000;
margin-bottom:4px;
}

h4 {
width:95%;
font-size:1.5em;
margin-left:auto;
margin-right:auto;
margin-bottom:1em;
text-align:center;
color:#fff;
background-color:#000;
}



h6 {
text-align:center;
margin-bottom:1px;
background-color:#bbb;
color:#000;
font:1.4em arial, verdana, sans-serif;
}


.links {
font:1.1em arial, verdana, sans-serif;
list-style-type:decimal;
color:#000;
background-color:#fff;
padding:1.0em;
}

.links ol {
margin-left:16px;
list-style-type:decimal;
padding:0 0 10px 12px;
}

.links ol a {
color:#000;
background-color:#fff;
text-decoration:none;
}

.links ol a:hover {
color:#fff;
background-color:#000;
}

ol {
list-style:decimal;
margin-left:2em;
}

.indent {
margin-left:2.3em;
}

#footer {
clear:both;
height:5%;
font-size:1.5em;
background-color:#060;
text-align:center;
padding:3px;
}

li {
color:#000;
list-style-type:decimal;
}

.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}

.clearfix {
display:block;
}

#button ol {
list-style-type:decimal;
border:none;
margin:0;
padding:0;
}

#button li {
border-bottom:1px solid #90bade;
margin:0;
}




.indent2 {
margin-left:2.4em;
}

.centre {
text-align:center;
}

p {
text-align:left;
padding-left:30px;
color:#fcc;
background-color:#000;
font:1.3em arial, verdana, sans-serif;
}

.batch_headers {
font: 900 0.8em "arial black", sans-serif;
text-decoration:underline;
text-align:center;
color:#663300;
margin:0;

}

.menu{
margin-right:2.2em;
color:#000;
}

h5 {
font: 900 0.84 em "arial black", sans-serif;
padding: 0 0 6px 0;
color:white;
text-align:center;
}

hr{color:red;background:red;height:1px;border:0;}


#body{background-color:#000:}
</style>
<!--[if IE]>
<style type="text/css">li.nobullet {
height: 1%;
}

* html .clearfix {
height: 1%;
}

* html #body {
height: 100%;
}
<![endif]-->
<!--[if lte IE 6]>
<style>
.gainlayout { height: 1px; }
</style>
<![endif]-->

<!--[if IE 7]>
<style>
.gainlayout { zoom: 1; }
</style>
<![endif]-->

effpeetee
11-17-2008, 04:27 PM
Thanks Aero.

I don't know where those <span> came from unless I accidently produced them with my WYSIWYG editor. Program now works as I originally wanted in IE but the visited sites do not stay marked in FFox. Is there a way to remedy this?

Frank

_Aerospace_Eng_
11-17-2008, 04:42 PM
Fix your stylesheet. Its still messed up. Any IE condition comments DO NOT go in the stylesheet. Anything within normal style tags do but the style tags themselves do NOT.

effpeetee
11-17-2008, 05:17 PM
Have another look Aero.

I had trouble uploading and have only just managed it.:eek:

Frank

_Aerospace_Eng_
11-17-2008, 05:19 PM
It looks okay now. I had a cached version. This is overriding the link styles you created earlier on in the stylesheet

.links ol a {

color:#000;

background-color:#fff;

text-decoration:none;

}



.links ol a:hover {

color:#fff;

background-color:#000;

}

CSS is all about specificity. The more cascading done the more specific something gets.

effpeetee
11-17-2008, 08:48 PM
Aero,
I have modified the css and posted it all to the site. (http://exitfegs.co.uk/Sources.html)
The sites visited during my testing have also transfered across. I can't seem to get rid of them. Do you have any further guidance.

Frank

_Aerospace_Eng_
11-17-2008, 09:21 PM
Your stylesheet is messed up again. Fix it.

effpeetee
11-17-2008, 09:33 PM
Aero, I dont understand what is wrong. I have just re-pasted the code you gave me and uploaded it again. Sorry, I have been having up loading problems today.

Frank

_Aerospace_Eng_
11-17-2008, 10:01 PM
The code I gave you DOES NOT go in a stylesheet. That was used for an embedded stylesheet not external. The code box below is ALL that goes in your stylesheet

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}




/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}

body {
background-color:#000;color:white;
}

#Container {width:100%;
border-bottom:25px solid black;
color:#000;
background-color:#000;
font:900 .55em "lucida sans", verdana, arial, sans-serif;

}



#body {
width:100%;
}

a:link {
color:#000;
background-color:inherit;
text-decoration:none;
}

a:visited {
color:#f00;
background-color:white;
}

a:hover {
color:red;
background-color:inherit;
}

a:active {
color:#fff;
background-color:inherit;
font-size:80%;
}

a img {
border:none;
}

#header h1 {
font-size:2em;
color:#FFF;
background-color:#000;
text-align:center;
margin-bottom:0.5%;
}

#content1 {
width:32%;
float:left;
margin-left:.1%;
border:1px solid #000;
background-color:#fff;
color:#000;
text-align:left;
font-size:125%;

}

#content2 {
width:32%;
text-align:left;
border:1px solid #000;
background-color:#fff;
color:#000;
margin-left:auto;
margin-right:auto;
font-size:125%;
}

#content3 {
width:32%;
float:right;
margin-right:.2%;
border:1px solid #000;
background-color:#fff;
color:#000;
text-align:left;
font-size:125%;
}

.h1 {
text-align:center;
font:.5em arial, verdana, sans-serif;
color:#000;
margin-bottom:4px;
}

h4 {
width:95%;
font-size:1.5em;
margin-left:auto;
margin-right:auto;
margin-bottom:1em;
text-align:center;
color:#fff;
background-color:#000;
}



h6 {
text-align:center;
margin-bottom:1px;
background-color:#bbb;
color:#000;
font:1.4em arial, verdana, sans-serif;
}


.links {
font:1.1em arial, verdana, sans-serif;
list-style-type:decimal;
color:#000;
background-color:#fff;
padding:1.0em;
}

.links ol {
margin-left:16px;
list-style-type:decimal;
padding:0 0 10px 12px;
}

.links ol a {
color:#000;
background-color:#fff;
text-decoration:none;
}

.links ol a:hover {
color:#fff;
background-color:#000;
}

ol {
list-style:decimal;
margin-left:2em;
}

.indent {
margin-left:2.3em;
}

#footer {
clear:both;
height:5%;
font-size:1.5em;
background-color:#060;
text-align:center;
padding:3px;
}

li {
color:#000;
list-style-type:decimal;
}

.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}

.clearfix {
display:block;
}

#button ol {
list-style-type:decimal;
border:none;
margin:0;
padding:0;
}

#button li {
border-bottom:1px solid #90bade;
margin:0;
}




.indent2 {
margin-left:2.4em;
}

.centre {
text-align:center;
}

p {
text-align:left;
padding-left:30px;
color:#fcc;
background-color:#000;
font:1.3em arial, verdana, sans-serif;
}

.batch_headers {
font: 900 0.8em "arial black", sans-serif;
text-decoration:underline;
text-align:center;
color:#663300;
margin:0;

}

.menu{
margin-right:2.2em;
color:#000;
}

h5 {
font: 900 0.84em "arial black", sans-serif;
padding: 0 0 6px 0;
color:white;
text-align:center;
}

hr{color:red;background:red;height:1px;border:0;}


#body{background-color:#000:}

Remove your style tags. The following goes within your <head> tags AFTER your link to the stylesheet.


<!--[if IE]>
<style type="text/css">li.nobullet {
height: 1%;
}

* html .clearfix {
height: 1%;
}

* html #body {
height: 100%;
}
<![endif]-->
<!--[if lte IE 6]>
<style>
.gainlayout { height: 1px; }
</style>
<![endif]-->

<!--[if IE 7]>
<style>
.gainlayout { zoom: 1; }
</style>
<![endif]-->

Pay attention to what you are actually doing. Stop copying and pasting without understanding what something does. If you don't understand what something is, ask.

effpeetee
11-17-2008, 10:40 PM
Sorry Aero, I was a bit thick. I have been fighting my host all day. Just could not get things up/down loaded. I'll put it right straight away.:o

EDIT

It has not worked for me. It is uploaded.

It doesn't like this-


<!--[if IE]>
<style type="text/css">li.nobullet {
height: 1%;
}

* html .clearfix {
height: 1%;
}

* html #body {
height: 100%;
}
<![endif]-->


Frank

Major Payne
11-18-2008, 04:27 AM
Whether links stay visited as indicated in a browsers is probably the property of the browser and possibly it's options, if any. I have set my own link colors in Options.

I use Firefox, Opera and Maxthon and all my links stay marked as visited. These pages are NOT cached pages as many with the links have been updated when I visit again. Might be because of the Web Tools I have in Firefox and other browsers that allows me to set this persistent feature.

_Aerospace_Eng_
11-18-2008, 04:55 AM
Change this

<!--[if IE]>
<style type="text/css">li.nobullet {
height: 1%;
}

* html .clearfix {
height: 1%;
}

* html #body {
height: 100%;
}
<![endif]-->

to this

<!--[if IE]>
<style type="text/css">li.nobullet {
height: 1%;
}

* html .clearfix {
height: 1%;
}

* html #body {
height: 100%;
}
</style>
<![endif]-->

And you still have this in your stylesheet

.links ol a {
color:#000;
background-color:#fff;
text-decoration:none;
}

.links ol a:hover {
color:#fff;
background-color:#000;
}
Remove it and your links should be the right colors.

effpeetee
11-18-2008, 08:21 AM
Thanks Aero.

It works OK for me with Chrome and Firefox, but I just get a black screen with IE7. I think that I have done the mods correctly, however I am open to correction.:o



Frank

abduraooft
11-18-2008, 08:42 AM
<!--[if IE]>
<style type="text/css">
li.nobullet {
height: 1%;
}

* html .clearfix {
height: 1%;
}

* html #body {
height: 100%;
}
<![endif]--> As pointed out earlier by _Aero, you missed a </style> at the end of the above. It should be

<!--[if IE]>
<style type="text/css">
li.nobullet {
height: 1%;
}

* html .clearfix {
height: 1%;
}

* html #body {
height: 100%;
}
</style>
<![endif]-->

effpeetee
11-18-2008, 08:54 AM
That's odd. I cut and pasted it. I think I must have cut the wrong one. My eyesight leaves a lot to be desired.

EDIT, The problem was that the email uploader was reducing my url's to lower case. Causing the wrong html to be loaded. Should be OK now.

Thanks, I've put it right. But the behaviour in IE7 is still odd. Try clicking the links. The link jumps and leaves an empty space. Very odd.
Apart from that, it is now working as I intended.

Here it is. (http://www.exitfegs.co.uk/Sources.html)

Frank

_Aerospace_Eng_
11-18-2008, 02:49 PM
What appears to be happening is the links are getting the background color from the parent element which seems to be white. Because of this the links look like they disappear because the active links color is white and since it inherits a white background it turns completely white. The solution would be to remove background-color:inherit; from your link styles.

effpeetee
11-18-2008, 03:19 PM
Thanks again Aero.

I have removed the inherits and it now seems OK. It is certainly a lot better and the ability to see where one has already visited is just what I wanted. Is there an easy way to clear the browsing history with a key combination or something similar?

Frank

abduraooft
11-18-2008, 03:30 PM
Google is your friend, see http://support.mozilla.com/en-US/kb/Keyboard+shortcuts

Clear Private Data => CtrlCmd+Shift+Del

effpeetee
11-18-2008, 04:17 PM
Google is your friend, see http://support.mozilla.com/en-US/kb/Keyboard+shortcuts
I can't get it to work with my Vista Ultimate. - 64bit

Frank

abduraooft
11-18-2008, 04:19 PM
That's actuality for Firefox.

effpeetee
11-18-2008, 05:15 PM
That's actuality for Firefox.
Thanks abduraooft. I'll just use the Tools menu. It's the top item so not difficult.
Frank.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum