SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    get into it! bigduke's Avatar
    Join Date
    May 2004
    Location
    Australia
    Posts
    847
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy Apply pseudo anchor class to a class of links

    I've been trying to apply the link, hover and active pseudo classes to a class of links. Nohting seems to work
    This is what I'm doing.
    Code:
    a.link.main_links {
    	font-family:Arial, Helvetica, sans-serif;
    	font-weight:bold;
    	font-size:12px;
    	color:#555555;
    	text-decoration:none;
    }
    what do i do now :'(

  2. #2
    SitePoint Addict dannyh's Avatar
    Join Date
    Mar 2005
    Location
    BC, Canada
    Posts
    241
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    try this:

    a.main_links:link

    or

    a.main_links:hover

    There is no hover class on your selector.

    I tested this and it worked:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
       
    <html>
    <head>
    <title>Tester</title>
    	<style type="text/css" media="all">
    		@import "stylesheet.css";
    	</style>
    </head>
    
    <body>
    	<div id="container">
    <a href="#" class="test">TEST!</a>
    	</div>
    
    	</body>
    </html>


    Code:
    body {
    	padding: 0;
    	margin: 0;
    	text-align: center;
    	background-color: #363636;
    	font-size: 76%;
    	color: #363636;
    }
    
    #container {
    	width: 601px;
    	text-align: left;
    	background-color: #363636;
    	margin: 0 auto;
    	padding: 0;
    }
    
    
    a, a:link, a:active {
    	color: #b03a67;
    	font: 1em arial, verdana, helvetica, sans-serif;
    }
    
    a:hover {
    	color: #ff5093;
    }
    
    a.test:hover {
    	color: #fff;
    }

  3. #3
    get into it! bigduke's Avatar
    Join Date
    May 2004
    Location
    Australia
    Posts
    847
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks danny, i started experimenting with it and came up with apseudoClass>.<elementClass> and it worked

  4. #4
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    apseudoClass>.<elementClass> doesn't work in Netscape 4.x.

    Just use a.<elementClass>pseudoClass>
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  5. #5
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    CSS hardly works in NN4 anyway so it doesn't matter. You're better off hiding the stylesheet entierly from that browser.
    Simon Pieters

  6. #6
    get into it! bigduke's Avatar
    Join Date
    May 2004
    Location
    Australia
    Posts
    847
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    aww man when will they learn to make a "standards compliant browser". Seems like W3C is just another organization blowing its trumpet with no one for audience

    Quote Originally Posted by Kravvitz
    Just use a.<elementClass>pseudoClass>
    That doesn't work on PhirePhox :'(

  7. #7
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The order doesn't matter in Firefox -- I tested and found that both ways work.

    Please show us the code that doesn't work for you.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  8. #8
    SitePoint Addict dannyh's Avatar
    Join Date
    Mar 2005
    Location
    BC, Canada
    Posts
    241
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It works for me in firefox

  9. #9
    get into it! bigduke's Avatar
    Join Date
    May 2004
    Location
    Australia
    Posts
    847
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    a:main_links.link {
    	font-family:Arial, Helvetica, sans-serif;
    	font-weight:bold;
    	font-size:12px;
    	color:#999999;
    	text-decoration:none;
    	border-bottom-width:2px;
    	border-top-width:2px;
    }
    
    a:main_links.visited {
    	font-family:Arial, Helvetica, sans-serif;
    	font-weight:bold;
    	font-size:12px;
    	color:#999999;
    	text-decoration:none;
    	border-bottom-width:2px;
    	border-top-width:2px;
    }
    
    a:main_links.hover {
    	font-family:Arial, Helvetica, sans-serif;
    	font-weight:bold;
    	font-size:12px;
    	color:#000000;
    	text-decoration:none;
    	border-top:2px solid #FF9900;
    	border-bottom:2px solid #FF9900;
    }
    That didn't work on 1.0+ . I know I should have used > 1.0.2 but ... hehe

  10. #10
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's because there is no main_links psuedo-class. You didn't switch the dot and the colon.

    It should look like this.
    Code:
    a.main_links:link
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  11. #11
    get into it! bigduke's Avatar
    Join Date
    May 2004
    Location
    Australia
    Posts
    847
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    doh!

    Thanks man! took that long to understand something so simple

  12. #12
    get into it! bigduke's Avatar
    Join Date
    May 2004
    Location
    Australia
    Posts
    847
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Angry

    here we go again that developer forsaken dimwitted IE just can't get things right.

    the following wouldn't render properly on IE. Works everywhere else.

    Code:
    a.main_links:link {
    	font-family:Arial, Helvetica, sans-serif;
    	font-weight:bold;
    	font-size:12px;
    	color:#999999;
    	padding-top:0px;
    	padding-bottom:0px;
    	border-top-width:2px;
    	border-bottom-width:2px;
    }
    
    a.main_links:visited {
    	font-family:Arial, Helvetica, sans-serif;
    	font-weight:bold;
    	font-size:12px;
    	color:#999999;
    	text-decoration:none;
    	padding-top:0px;
    	padding-bottom:0px;
    	border-top-width:2px;
    	border-bottom-width:2px;
    }
    
    a.main_links:hover {
    	font-family:Arial, Helvetica, sans-serif;
    	font-weight:bold;
    	font-size:12px;
    	color:#000000;
    	text-decoration:none;
    	padding-top:0px;
    	padding-bottom:0px;
    	border-top:2px solid #FF9900;
    	border-bottom:2px solid #FF9900;
    }
    Take a look at http://www.primacognos.com/temp/index.html in IE. Notice the 1px bottom border while it should actually be 2px.

  13. #13
    get into it! bigduke's Avatar
    Join Date
    May 2004
    Location
    Australia
    Posts
    847
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Angry IE does it yet again .... grrrrr

    here we go again that developer forsaken dimwitted IE just can't get things right.

    the following wouldn't render properly on IE. Works everywhere else.

    Code:
    a.main_links:link {
    	font-family:Arial, Helvetica, sans-serif;
    	font-weight:bold;
    	font-size:12px;
    	color:#999999;
    	padding-top:0px;
    	padding-bottom:0px;
    	border-top-width:2px;
    	border-bottom-width:2px;
    }
    
    a.main_links:visited {
    	font-family:Arial, Helvetica, sans-serif;
    	font-weight:bold;
    	font-size:12px;
    	color:#999999;
    	text-decoration:none;
    	padding-top:0px;
    	padding-bottom:0px;
    	border-top-width:2px;
    	border-bottom-width:2px;
    }
    
    a.main_links:hover {
    	font-family:Arial, Helvetica, sans-serif;
    	font-weight:bold;
    	font-size:12px;
    	color:#000000;
    	text-decoration:none;
    	padding-top:0px;
    	padding-bottom:0px;
    	border-top:2px solid #FF9900;
    	border-bottom:2px solid #FF9900;
    }
    Take a look at http://www.primacognos.com/temp/index.html in IE. Notice the 1px bottom border while it should actually be 2px.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •