Topic: Having issues with my .CSS for links Pages that link to <a href="https://ozoneasylum.com/backlink?for=24040" title="Pages that link to Topic: Having issues with my .CSS for links" rel="nofollow" >Topic: Having issues with my .CSS for links\

 
Author Thread
Black Hat
Bipolar (III) Inmate

From: Sin City (Can you guess where?)
Insane since: Sep 2004

IP logged posted posted 11-15-2004 04:27 Edit Quote

Ok, well first, I guess you'll need to expierience it first hand:

http://lostcitytinnos.net/beta1/index.htm

Now on the link "Kyrie", click it. It goes to the main page (home) and is the only working link (basically, it loads the same page). Well the problem is the 1st time (when cookies are fresh) the hover-color works. But when its "previously" visited, it doesn't change color when you hover your mouse over it.

code:
<!--
body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 8pt; color: #FFFFFF; background-color: #000000}
img { background-color: #000000}
h1 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10pt; color: #6798B8}
td { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 8pt; color: #FFFFFF; background-color: #000000}
a:link { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 8pt; color: #FFFFFF; text-decoration: none}
a:hover { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 8pt; color: #6798B8; text-decoration: none}
a:active { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 8pt; color: #FFFFFF; text-decoration: none}
a:visited { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 8pt; color: #FFFFFF; text-decoration: none}
-->



There's the .CSS. It might help to expierience it first hand (which is why I provided a link). Im using MoZilla FireFox.

-----------------------------------------------
TiNNoS || My Forums || My Gallery

ninmonkeys
Nervous Wreck (II) Inmate

From: mn
Insane since: May 2004

IP logged posted posted 11-15-2004 04:58 Edit Quote

Here's some notes to help you out.

1) Also using firefox, and I'm not getting a color change on hover to begin with. (Before, or after clicking your link)

2) Don't define font size in pt's. If you do, font sizes will vary by browser and OS. Use px or em to get a more consistant size for all users.

3) Why are you using HTML comments inside style code? I don't think this is a good idea, will someone who knows confirm, or correct me? If you're trying to hide the style from an old browser, I think using @import would be a better idea

code:
<style type="text/css">

@import "/styles/stylebasic.css";


</style>



4) You're page doesn't validate

5) You have a lot of redundant code, you can change it like this:

code:
/*

due to specifity, use link selectors in the following order:

a{} a:link{} a:visited{} a:hover{} a:active{}

*/




a, a:link, a:visited, a:hover, a:active
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 8px;
color: #FFFFFF;
text-decoration: none;
}

a:hover, a:active

{

color: #6798B8;

}

Black Hat
Bipolar (III) Inmate

From: Sin City (Can you guess where?)
Insane since: Sep 2004

IP logged posted posted 11-15-2004 06:10 Edit Quote

Hm. Interesting. Ive never done stuff like that. This is going to be a huge step for me. I was wondering - if someone would take the souce at the bottom of this page and convert it so it fully validates and works correctly. I wont rip this. It just helps if I can see everything first hand of "what it should look like". Thats how I learn.

code:
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 8pt; color: #FFFFFF; background-color: #000000}
img { background-color: #000000}
h1 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10pt; color: #6798B8}
td { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 8pt; color: #FFFFFF; background-color: #000000}
a:link { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 8pt; color: #FFFFFF; text-decoration: none}
a:hover { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 8pt; color: #6798B8; text-decoration: none}
a:active { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 8pt; color: #FFFFFF; text-decoration: none}
a:visited { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 8pt; color: #FFFFFF; text-decoration: none}
-->
</style>
</head>

<body bgcolor="#000000" text="#000000">
<table width="500" border="0" align="center">
<tr>
<td colspan="2" height="239"><img src="images/logo.jpg" width="500" height="266">
<div align="center"></div>
</td>

</tr>
<tr>
<td colspan="2">
<div align="right"><i>&quot;dear god... please help... im so tired...&quot;
-- bill hicks</i></div>
</td>
</tr>
<tr>
<td width="80%" align="left" valign="top" height="352">
<p>&nbsp;</p>

<blockquote>
<h1>welcome</h1>
<p>fate... fate is just a word... what matters is the meaning the word
holds... do you believe... do you believe that your destiny is out of
your control... or do you believe that you can create your own destiny?</p>

<p>&nbsp;</p>
<h1>news and updates</h1>
<p>11-4-04: i've been working on the sites layout for a little while now
and i've finally come to a decent design that i am at this point and
time rather fond of. its basic and fits my mood and personality.</p>
</blockquote>

</td>
<td width="20%" height="352" align="right" valign="top">
<p>&nbsp;</p>
<h1>navigation</h1>
<p><a href="index.htm">kyrie</a></p>
<p>shell</p>
<p>discord</p>

<p>dragnet</p>
<p>flashback</p>
<h1>other stuff</h1>
<p>sneak</p>
<p>forsaken</p>
</td>

</tr>
</table>
<p align="center">all content is &copy;copyright 04'-05' dustin r. sanchez [the
black hat] (see &quot;shell&quot;)</p>
</body>
</html>



-----------------------------------------------
TiNNoS || My Forums || My Gallery

tntcheats
Bipolar (III) Inmate

From: BC, Canada
Insane since: Jun 2004

IP logged posted posted 11-15-2004 06:13 Edit Quote
quote:
Don't define font size in pt's. If you do, font sizes will vary by browser and OS. Use px or em to get a more consistant size for all users.


Bad for accessibility. Points, EM, percentages, etc. are preferred.
People usually don't go around the internet with large text size on their computer, and if they do that's often their preference or they just don't know how to use the internet and would have probably gotten used to large text.

-----------------------------------------------------
funny websites | funny signatures | funny jokes

Ozone Asylum KILLED my inner child.

Black Hat
Bipolar (III) Inmate

From: Sin City (Can you guess where?)
Insane since: Sep 2004

IP logged posted posted 11-15-2004 06:15 Edit Quote

Yeah, I always thought points were best. I thought he was kinda off on that. Thats why Im waiting for others to come and help (no offense to ninmonkeys intended)

-----------------------------------------------
TiNNoS || My Forums || My Gallery

ninmonkeys
Nervous Wreck (II) Inmate

From: mn
Insane since: May 2004

IP logged posted posted 11-15-2004 06:32 Edit Quote

tntcheats: I had the idea from here that using pt's was bad. If you use pixels, the text size will be almost the same, much closer than if you were to use points. How is pixels bad for accessibility? The text can still be resized(Unless maybe IE doesn't allow this?).

quote:
Black Hat said:

Hm. Interesting. Ive never done stuff like that. This is going to be a huge step for me.

Well it may seem daunting, but after a while it becomes a lot easier. Just keep working on it

On your website you are using a table to create a 2 column layout. This is something that should be achieved through css. (X)HTML describes the page's structure, CSS describes the pages look.

What you can learn is to control the look of your page using CSS. Here's some sites and tutorials that I found usefull
"holy grail" 2 column layout, and different combinations of column layouts - http://glish.com/css/
I recommend looking at each section, It explains selectors, floats, unorded list usage for links, and floats with many examples - http://css.maxdesign.com.au/
lots of css related articles - http://www.alistapart.com/topics/css/

And these sites are a *must*
html 4.01 specs - http://www.w3.org/TR/html401/
css 2.1 specs - http://www.w3.org/TR/CSS21/
w3c xhtml validator - http://validator.w3.org/
w3c css validator - http://jigsaw.w3.org/css-validator/

Since you have firefox, check out the webdeveloper plugin. It allows you to click a button, and it will validate your html, or css regardless if it is a local file, or on the internet. (saves time for local files)

(Edited by ninmonkeys on 11-15-2004 06:35)

(Edited by ninmonkeys on 11-15-2004 06:42)

Blaise
Bipolar (III) Inmate

From: London
Insane since: Jun 2003

IP logged posted posted 11-15-2004 10:44 Edit Quote

To answer your question about the hover colour not showing, you need to define the hover class after you've defined the visited class, this is a quirk that most browsers fall foul of.

Also to make easier reading you may want to write your CSS like this...

code:
a:link {  
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 8pt;
color: #FFFFFF;
text-decoration: none;
}

a:visited {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 8pt;
color: #FFFFFF;
text-decoration: none;
}

a:active {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 8pt;
color: #FFFFFF;
text-decoration: none;
}

a:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 8pt;
color: #6798B8;
text-decoration: none;
}

Finally, I find that when I declare styles for rollovers, it's best only to add in the attributes that change, instead of re-writing the whole class out again.

Hope this helps!

Cheers,



(Edited by Blaise on 11-15-2004 10:47)

liorean
Bipolar (III) Inmate

From: Umeå, Sweden
Insane since: Sep 2004

IP logged posted posted 11-15-2004 11:32 Edit Quote

It's not really a quirk, but rather a deliberate feature. Specificity is the same, that means source order defines what overides what. Ther eare typically two approaches to this:

LoVe-HAte order - a:link, a:visited, a:hover, a:active

However, that affects anchors as well as links. Here's a better way of doing it:

code:
:link{/*...*/}
:visited{/*...*/}
:link:focus, :visited:focus{/*...*/}
:link:hover, :visited:hover{/*...*/}
:link:active, :visted:active{/*...*/}



--
var Liorean = {
prototype: ProgrammingTheoryGuru.prototype,
abode: "http://web-graphics.com/",
profile: "http://codingforums.com/member.php?u=5798"};

Black Hat
Bipolar (III) Inmate

From: Sin City (Can you guess where?)
Insane since: Sep 2004

IP logged posted posted 11-15-2004 22:00 Edit Quote

Ok thanks guys - I'll give it a shot. If I have any more problems when trying this stuff out I'll let you all know!

-----------------------------------------------
TiNNoS || My Forums || My Gallery



Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« BackwardsOnwards »

Show Forum Drop Down Menu