why is my css not working?

Discussion in 'HTML' started by greg@gofothdesigns.com, Jul 16, 2003.

  1. Guest

    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.
     
    , Jul 16, 2003
    #1
    1. Advertising

  2. "" <> 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
     
    Paul Michael Smith, Jul 16, 2003
    #2
    1. Advertising

  3. Guest

    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" <> wrote in message
    news:bf22m2$9cs$...
    >
    > "" <> 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
    >
    >
     
    , Jul 16, 2003
    #3
  4. 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
     
    Anders Thorsen Holm, Jul 16, 2003
    #4
  5. Guest

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

    greg g.
    "Anders Thorsen Holm" <> wrote in message
    news:Xns93BA105155D51zoolook@194.255.237.194...
    > 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
     
    , Jul 16, 2003
    #5
  6. 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
     
    Anders Thorsen Holm, Jul 16, 2003
    #6
  7. Guest

    "Anders Thorsen Holm" <> wrote in message
    news:Xns93BA12A353894zoolook@194.255.237.194...
    > 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-
     
    , Jul 16, 2003
    #7
  8. Mike Novak Guest

    "Anders Thorsen Holm" <> wrote in message
    news:Xns93BA105155D51zoolook@194.255.237.194...
    > 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.
     
    Mike Novak, Jul 16, 2003
    #8
  9. 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
     
    Anders Thorsen Holm, Jul 16, 2003
    #9
  10. Kris Guest

    In article <>,
    Toby A Inkster <> 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, erlands (nl)
     
    Kris, Jul 16, 2003
    #10
  11. Kris Guest

    In article <4all.nl>,
    Kris <> wrote:

    > In article <>,
    > Toby A Inkster <> 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.


    I meant :focus.... :S

    --
    Kris, erlands (nl)
     
    Kris, Jul 16, 2003
    #11
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Horace Nunley

    why why why does function not work

    Horace Nunley, Sep 27, 2006, in forum: ASP .Net
    Replies:
    1
    Views:
    465
    =?Utf-8?B?UGV0ZXIgQnJvbWJlcmcgW0MjIE1WUF0=?=
    Sep 27, 2006
  2. Mr. SweatyFinger

    why why why why why

    Mr. SweatyFinger, Nov 28, 2006, in forum: ASP .Net
    Replies:
    4
    Views:
    913
    Mark Rae
    Dec 21, 2006
  3. Mr. SweatyFinger
    Replies:
    2
    Views:
    2,008
    Smokey Grindel
    Dec 2, 2006
  4. Skybuck Flying
    Replies:
    16
    Views:
    680
    tragomaskhalos
    Aug 25, 2007
  5. SeanInSeattle
    Replies:
    5
    Views:
    147
    SeanInSeattle
    Dec 13, 2007
Loading...

Share This Page