why is my css not working?

[greg]

The css is linked correctly. I've got my navigation in a <div> with the
id="nav" . It's all set up correctly on the htm page. the positioning
works fine but the css for a:link does not work. here is my css:

body {
background-image: url(images/csstestbackground.gif);
background-repeat: repeat-x;
margin: 0;
}

#logo{
position: absolute;
top: 15px;
left: 10px;
}

#content{
position: absolute;
top: 125px;
left: 100px;
bottom: 40px;
right: 40px;
z-index: 2;
}

#nav{
position: absolute;
top: 50px;
right: 10px;
z-index: 1;
}

a:link {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #999999;
text-decoration: none;
}

The page in question is here: http://www.goforthdesigns.com/csstest.htm

I'm trying to redo my site using only CSS but i'm still learning. My links
aren't the right size and they have the link line underneath. My CSS says
no text decoration. Any help would be great. Thanks!

Greg G.

 

[Paul Michael Smith]

The css is linked correctly. I've got my navigation in a <div> with the
id="nav" . It's all set up correctly on the htm page. the positioning
works fine but the css for a:link does not work. here is my css:

body {
background-image: url(images/csstestbackground.gif);
background-repeat: repeat-x;
margin: 0;
}

#logo{
position: absolute;
top: 15px;
left: 10px;
}

#content{
position: absolute;
top: 125px;
left: 100px;
bottom: 40px;
right: 40px;
z-index: 2;
}

#nav{
position: absolute;
top: 50px;
right: 10px;
z-index: 1;
}

a:link {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #999999;
text-decoration: none;
}

The page in question is here: http://www.goforthdesigns.com/csstest.htm

I'm trying to redo my site using only CSS but i'm still learning. My links
aren't the right size and they have the link line underneath. My CSS says
no text decoration. Any help would be great. Thanks!

Greg G.

Greg,

Your css looks fine to me. When you say the links are not the right
size then that depends on what size you want them to be, simply change
the font size from 14px to whatever you think is the right size (which
might take a few attempts).

As an added note, I would change your navigation likes to an in-line
list. I would also change the line height of your body text.

Maybe we need some more detail.

Regards,
Paul Michael Smith
www.smithpaul.com

 

[greg]

Thanks for all the quick replys. Here is my problem. With the navigation
positioning, it works fine. When I delete my history, and my cache and it
looks fine on the first look. When I click refresh, I loose my css
formating, and I just get default size Times text. I can't figure this out
for the life of me.

Any ideas?

http://www.goforthdesigns.com/csstest.htm

-g-

 

[Anders Thorsen Holm]

Without at least the :visited-pseudoclass, the links will be shown
with the default font.

Of course that applies to visited links.

 

[greg]

The plot thickens.......i'll try it and get back to ya.

greg g.

 

[Anders Thorsen Holm]

Problem solved, Strange though, without the "active" and "visited"
css, my roll overs didn't work, and i would loose my CSS if I
refreshed, but with the "active" and "visited" css the original
text formating worked, but I had no rollover effects. So I set
the active and visited css to not have any color. Here is the
working CSS, for anyone else that might run into this problem.

Be sure to define the rules in this order:

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

In your example, the rules for visited links overwrite the rules for
"hovering" over links. Try to rearrange the rules as given above, and
I'm positive it will work out.


Oh, and please do something about that bottom-quoting, it's a tad
annoying having to cut and rearrange everything when replying to your
posts :-|

 

[greg]

Be sure to define the rules in this order:

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

In your example, the rules for visited links overwrite the rules for
"hovering" over links. Try to rearrange the rules as given above, and
I'm positive it will work out.


Oh, and please do something about that bottom-quoting, it's a tad
annoying having to cut and rearrange everything when replying to your
posts :-|

--
Anders Thorsen Holm | http://www.daimi.au.dk/~zoolook/
"It's hard to be religious when certain people are never incinerated by
bolts of lightning."
- Calvin, Attack of the Deranged Mutant Killer Monster Snow Goons

Sorry About the top posting........anyways, Thank you for the help,
everything is working well now. Much appreciated.

-g-

 

[Mike Novak]

Ah, wait ... perhaps you should add some more rules for your links:

a:visited {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #999999;
text-decoration: none;
}

a:active {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #999999;
text-decoration: none;
}

a:hover {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #666666;
text-decoration: none;
}

Without at least the :visited-pseudoclass, the links will be shown
with the default font.


--
Anders Thorsen Holm | http://www.daimi.au.dk/~zoolook/
"It's hard to be religious when certain people are never incinerated
by bolts of lightning."
- Calvin, Attack of the Deranged Mutant Killer Monster Snow Goons

Why not set the font rules in the a selector, and the link color in the
psuedo classes:

a {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
text-decoration: none;
}
a:link {
color: #999999;
background: transparent;
}
a:visited {
color: #660066;
background: transparent;
}
a:active {
color: #ffffff;
background: transparent;
}
a:hover {
color: #CCCCCC;
background: transparent;
}

The psuedo classes will inherit the rules of the parent element.

 

[Anders Thorsen Holm]

Why not set the font rules in the a selector, and the link color
in the psuedo classes:

Sure. Even better.

 

[Kris]

:link
:visited
:hover
:active

Although don't forget to include the 'a', otherwise you may get some
weird results with ':hover' [/QUOTE]

and when wished for, :active goes in between :visited and :hover.

 

[Kris]

Although don't forget to include the 'a', otherwise you may get some
weird results with ':hover'

and when wished for, :active goes in between :visited and :hover.[/QUOTE]

I meant :focus.... :S