Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > why is my css not working?

Reply
Thread Tools

why is my css not working?

 
 
greg@gofothdesigns.com
Guest
Posts: n/a
 
      07-15-2003
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.


 
Reply With Quote
 
 
 
 
Paul Michael Smith
Guest
Posts: n/a
 
      07-15-2003

"(E-Mail Removed)" <(E-Mail Removed)> wrote in message
news:A_%Qa.72596$N7.8741@sccrnsc03...
> 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


 
Reply With Quote
 
 
 
 
greg@gofothdesigns.com
Guest
Posts: n/a
 
      07-15-2003
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-


"Paul Michael Smith" <(E-Mail Removed)> wrote in message
news:bf22m2$9cs$(E-Mail Removed)...
>
> "(E-Mail Removed)" <(E-Mail Removed)> wrote in message
> news:A_%Qa.72596$N7.8741@sccrnsc03...
> > 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
>
>



 
Reply With Quote
 
Anders Thorsen Holm
Guest
Posts: n/a
 
      07-15-2003
Anders Thorsen Holm wrote:

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


Of course that applies to visited links.

--
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
 
Reply With Quote
 
greg@gofothdesigns.com
Guest
Posts: n/a
 
      07-15-2003
The plot thickens.......i'll try it and get back to ya.

greg g.
"Anders Thorsen Holm" <(E-Mail Removed)> wrote in message
news:Xns93BA105155D51zoolook@194.255.237.194...
> http://www.velocityreviews.com/forums/(E-Mail Removed) wrote:
>
> > a:link {
> > font-family: Arial, Helvetica, sans-serif;
> > font-size: 14px;
> > font-weight: bold;
> > color: #999999;
> > text-decoration: none;
> > }

>
> 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



 
Reply With Quote
 
Anders Thorsen Holm
Guest
Posts: n/a
 
      07-15-2003
(E-Mail Removed) wrote:

> 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

--
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
 
Reply With Quote
 
greg@gofothdesigns.com
Guest
Posts: n/a
 
      07-15-2003
"Anders Thorsen Holm" <(E-Mail Removed)> wrote in message
news:Xns93BA12A353894zoolook@194.255.237.194...
> (E-Mail Removed) wrote:
>
> > 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
>
> --
> 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-



 
Reply With Quote
 
Mike Novak
Guest
Posts: n/a
 
      07-16-2003

"Anders Thorsen Holm" <(E-Mail Removed)> wrote in message
news:Xns93BA105155D51zoolook@194.255.237.194...
> (E-Mail Removed) wrote:
>
> > a:link {
> > font-family: Arial, Helvetica, sans-serif;
> > font-size: 14px;
> > font-weight: bold;
> > color: #999999;
> > text-decoration: none;
> > }

>
> 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.


 
Reply With Quote
 
Anders Thorsen Holm
Guest
Posts: n/a
 
      07-16-2003
Mike Novak wrote:

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


Sure. Even better.

--
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
 
Reply With Quote
 
Kris
Guest
Posts: n/a
 
      07-16-2003
In article <(E-Mail Removed)>,
Toby A Inkster <(E-Mail Removed)> wrote:

> > :link
> > :visited
> > :hover
> > :active

>
> 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.

--
Kris, (E-Mail Removed)erlands (nl)
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
PHP + JS + CSS: why ajax doesn't display using CSS on main doc? SeanInSeattle Javascript 5 12-13-2007 12:50 PM
Why :: ? Why not : ? Why not . ? <- less clutter ?!? Skybuck Flying C++ 16 08-25-2007 09:48 PM
why why why why why Mr. SweatyFinger ASP .Net 4 12-21-2006 01:15 PM
findcontrol("PlaceHolderPrice") why why why why why why why why why why why Mr. SweatyFinger ASP .Net 2 12-02-2006 03:46 PM
why why why does function not work Horace Nunley ASP .Net 1 09-27-2006 09:52 PM



Advertisments