Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Mar 2009
    Posts
    89
    Thanks
    27
    Thanked 0 Times in 0 Posts

    Inheriting link characteristics

    Hello! My h2 link styles are inheriting the background color on my regular links styles..can i fix this?
    *yes I'm a newbie*
    =)

    Code:
    body {
    	margin:0px auto;
    	border:0;
    	width:800px;
    	background: #5b6c8d;
    	font-family: Arial, Helvetica, Verdana, Sans-serif;
    	font-size: 14px;
    	color:black;
    	font-weight: bold;
        }
    #wrapper {
    	text-align: left;
    	margin: 0px auto;
    	padding: 0px;
    	border:0;
    	width: 800px;
    	background: #cccc98;
    }
    
    #header {
    	margin: 0px;
    	height: 30px;
    	background: #841710;
    }
    #tagline {
    	margin: 0px;
    	height: 130px;
    	background: #cccc98;
    }
    #side-a {
    	float: left;
    	width: 124px;
    	background: #edeec4;
    	padding: 10px;
    }
    #side-a a {
    display: block;
    padding: 3px;
    width: 124px;
    }
    
    #side-b { 
    	margin: 0;
    	float: left;
    	width: 600px;
    	margin-left: 15px;
    	margin-right: 15px;
    	background: #ffffff;
    	padding: 10px;
    	height: 1% /* Holly hack for Peekaboo Bug */
    }
    a:link {
    	font: bold 14px Arial, Helvetica, sans-serif;
    	color: #000000;
    	text-decoration: none;
    }
    a:visited {
    	font: bold 14px Arial, Helvetica, sans-serif;
    	color: #000000;
    	text-decoration: none;
    }
    a:hover {
    	font: bold 14px Arial, Helvetica, sans-serif;
    	color: #000000;
    	text-decoration: none;
    	background: #0099FF;
    }
    a:active {
    	font: bold 14px Arial, Helvetica, sans-serif;
    	color: #000000;
    	text-decoration: none;
    }
    #prefooter {
    	clear: both;
    	background: #cccc98;
    }
    #footer {
    	clear: both;
    	background: #841710;
    }
    h1 {
    	font: normal 56px "Times New Roman", Times, serif;
    	color: #000080;
    	text-decoration: none;
    	display: inline;
    }
    h2 {
    	font: 18px Arial, Helvetica, sans-serif;
    	color: #990000;
    	text-decoration: none;
    	display: inline;
    }
    h2 a:link {
    	font: 18px Arial, Helvetica, sans-serif;
    	color: #990000;
    	text-decoration: underline;
    }
    h2 a:visited {
    	font: 18px Arial, Helvetica, sans-serif;
    	color: #990000;
    	text-decoration: underline;
    }
    h2 a:hover {
    	font: 18px Arial, Helvetica, sans-serif;
    	color: #990000;
    	text-decoration: none;
    }
    h2 a:active {
    	font: 18px Arial, Helvetica, sans-serif;
    	color: #990000;
    	text-decoration: underline;
    }
    h3 {
    	font: italic bold 16px Arial, Helvetica, sans-serif;
    	color: #000000;
    	text-decoration: underline;
    	display: inline;
    }
    .left
    {
    	text-align:left;
    	float:left;
    	clear:none;
    }
    .center
    {
    	text-align:left;
    
    }
    .right
    {
    	text-align:right;
    	float:right;
    	clear:none;
    	margin-right: 15px;
    }
    h6 {
    	font: bold 12px Arial, Helvetica, sans-serif;
    	color: #990000;
    	text-decoration: none;
    	display: inline;
    }
    thanks =)

    carrie

  • #2
    New Coder
    Join Date
    Jun 2010
    Posts
    16
    Thanks
    0
    Thanked 2 Times in 2 Posts
    h1 a { color: #...; }

  • #3
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well if you fix this in h1 class then choose the color what you want and write in h1 class and recall it your CSS. You can change appropriate things what you need. Hope this will help you. Thank you.

    flash animations

  • #4
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    The poster is talking about background colour, not colour - I assume on hover, arising from:

    Code:
    a:hover {
    	font: bold 14px Arial, Helvetica, sans-serif;
    	color: #000000;
    	text-decoration: none;
    	background: #0099FF;}
    To remove this on the h2 links:

    Code:
    h2 a:hover {
    	background: none;}
    Incidentally, you can shorten your css by writing:

    Code:
    a:link, a:visited, a:active {
    	font: bold 14px Arial, Helvetica, sans-serif;
    	color: #000000;
    	text-decoration: none;
    }


  •  

    Posting Permissions

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