#1
  1. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2004
    Location
    Leicester,UK
    Posts
    1
    Rep Power
    0

    Why is my a:active in CSS ignored?


    Hi,
    I have created my website but I'm having problems with the a:active link in my CSS. When I go to my site I would like the currently viewed pages link to be blanked out and unclickable, (until I view a different page.) I have tried to change the a:active part of my CSS but to no avail. The only part that seems to work in the CSS is the a:hover part, all the others seem to be ignored.

    Still relating to the question above, I have made the links width 229px. This seems to display fine with IE6, however NS7 compresses the layers background to the size of the text. How do I avoid this? I have tried adding an absolute position style to the layer in CSS, but I then lose the 'fluidity' of the website when the browser is resized.

    I have pasted my CSS below:

    #waita, #waitb {
    text-decoration:none;
    color:#FFFFC0;
    border-style:solid;
    border-color: #000000;
    border-width:2px;
    background-color:#000000;
    layer-background-color:#000000;
    font:bold;
    font-weight:bold;
    font-family:arial;
    font-size:14px;
    height:22px;
    width:230px;
    z-index: 100;
    margin: 5;
    }

    .image
    {
    border-width: 2;
    border-color: #000000;
    border-style: solid;
    margin: 10;
    }

    .class1 a:link
    {
    text-decoration:none;
    color:#000000;
    border-style:solid;
    border-color: #000000;
    border-width:2px;
    background-color:#FFFFC0;
    layer-background-color:#FFFFC0;
    font:none;
    font-weight:none;
    font-family:arial;
    font-size:14px;
    line-height:18px;
    width: 229px;
    z-index: 20;
    margin: 5;
    }

    .class1 a:active
    {
    text-decoration:none;
    color:#000000;
    border-style:solid;
    border-color: #000000;
    border-width:2px;
    background-color:#FFFFC0;
    layer-background-color:#FFFFC0;
    font:none;
    font-weight:none;
    font-family:arial;
    font-size:14px;
    line-height:18px;
    width: 229px;
    z-index: 20;
    margin: 5;
    }

    .class1 a:visited
    {
    text-decoration:none;
    color:#000000;
    border-style:solid;
    border-color: #000000;
    border-width:2px;
    background-color:#FFFFC0;
    layer-background-color:#FFFFC0;
    font:none;
    font-weight:none;
    font-family:arial;
    font-size:14px;
    line-height:18px;
    width: 229px;
    z-index: 20;
    margin: 5;
    }

    .class1 a:hover
    {
    text-decoration:none;
    color:#FFFFC0;
    border-style:solid;
    border-color: #000000;
    border-width:2px;
    background-color:#000000;
    layer-background-color:#000000;
    font:bold;
    font-weight:bold;
    font-family:arial;
    font-size:14px;
    line-height:18px;
    width: 229px;
    z-index: 20;
    margin: 5;
    }

    I have tried to change the two line in the a:active part: {background-color:#FFFFC0; layer-background-color:#FFFFC0;} but it seems to do nothing.

    Cheers, Andy
    Last edited by Andy442x; March 23rd, 2005 at 03:10 AM. Reason: wish to remove my domain name from post
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2003
    Location
    Netherlands
    Posts
    43
    Rep Power
    12
    And if you change it to:

    a.class1:link {

    font:normal 14px arial,sans-serif;
    color:#000
    text-decoration:none;
    border:2px solid #000;
    background-color:#FFFFC0;
    layer-background-color:#FFFFC0;
    line-height:18px;
    width: 229px;
    z-index: 20;
    margin: 5}

    also change the other offcourse.

    so:

    a.class1:active {
    bla bla bla

    and so on

    Good luck
  4. #3
  5. |<.+#f@#+.&.|
    Devshed Loyal (3000 - 3499 posts)

    Join Date
    Mar 2002
    Location
    norway
    Posts
    3,009
    Rep Power
    1224
    the problem is that you have the wrong order of the pseudo-classes

    A:link { .. }
    A:visited { .. }
    A:hover { .. }
    A:active { .. }

    http://www.w3.org/TR/CSS2/selector.h...pseudo-classes

    another problem is that you have forgotten to assign a lenght unit on the margin,
    http://www.w3.org/TR/CSS2/syndata.html#length-units

    and you tries to assign width and height to an inline element, thats why ns is correctly ignoring it.
    you can use display:block; to make the inline element behave as a block-level element.

    you have also placed block level elements inside a inline element,
    <span class="class1">
    <table>....

    change the span to div, and it should be ok.
    http://www.w3.org/TR/html401/struct/global.html#h-7.5.4

    you are alos lacking a doctype.
    http://www.hut.fi/~hsivonen/doctype.html

    i recomend that you use the
    http://validator.w3.org to check the site for more errors.

    you could write it like this,
    removed the redudance,
    always rember to have a generic font-family as the last option, ie, arial, sans-serif.

    and its font-weight:normal, not none.
    Code:
    .class1 a:link
     {
    	text-decoration:none;
    	color:#000000;
    	border:2px solid #000000;
    	background-color:#FFFFC0;
    	font-weight:normal;
    	font-family:arial, sans-serif;
    	font-size:14px;
    	line-height:18px;
    	width: 229px;
    	z-index: 20;
    	margin: 5px;
    	display:block; /* to make them behave as block-level elements */
     }
      
     
    .class1 a:visited 
     {
    	text-decoration:none;
    	color:#000000;
    	background-color:#FFFFC0;
     }
     
    .class1 a:hover
     {
    	text-decoration:none;
    	color:#FFFFC0;
    	background-color:#000000;
      	font-weight:bold;
     }
     
     .class1 a:active
      {
     	text-decoration:none;
     	color:#000000;
     	background-color:#FFFFC0;
      	font-weight:normal;
      }

    and for a last comment,
    pretty annoying javascripts you have gotten on your page, and they are pretty easy to bypass,

IMN logo majestic logo threadwatch logo seochat tools logo