1. Home
  2. Forums Index
  3. Browser Side / CSS 3:35 pm May 1, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

Trying to remove link styling within a div

         

techtheatre

9:23 pm on Oct 20, 2010 (gmt 0)

10+ Year Member



I have a link surrounding an image and div (caption) that is styled correctly when it is NOT a link, but as soon as a link is added to surround it, the default link colors/fonts/etc are added. I cannot seem to override the inheritance of the link properties. Below is a VERY simplified version of the page HTML and the full CSS file (sorry, but i do not know enough CSS to know what might be affecting this). I CANNOT apply any class to the H2, H3, or P within "caption" as they are coming from a CMS. I can apply a class to the A tag if necessary.

When NO link is present, the text looks nice. Once I surround it with the <a> i get the bold & blue paragraph. It looks to me like the H2 is behaving correctly, so only the Paragraph tag is a problem.

THANKS! 

<html>
<body>
 <div id="container">
 <div id="main">
 <div id="body">
 <h1 class="txt-centered"><em>Page</em> Title Here</h1>
 <p>Generic paragraph about this page</p>

 <div class="infographic-grid">
  <ul>

  <li>
  <img src="/images/library/Decorations.jpg" alt="Decorations" />
  <div class="caption">
  <h2>INVITATIONS</h2>
  <p>invitation information goes here</p></div>
  </li>

  <li>
  <a href="http://www.example.com/stuff/">
  <img src="/images/library/chicken.jpg" alt="food" />
  <div class="caption">
  <h2>MENU</h2>
  <p>Quesadillas and pie</p>
  </div>
  </a>
  </li>
 </div>
 </div>
 </div>
 </div>
</body>
</html>


* {font-size: 100.01%;}

.txt-centered
{
text-align: center;
}

html {font-size: 62.5%;}
body{
background:url(../images/bg-body.gif) 50% 0;
font:1.3em Arial, Helvetica, Verdana, sans-serif;
color:#000;
}
a{
color:#000;
text-decoration:none;
}
a:hover{
color:#005984;
text-decoration:underline;
}
/* container */
#container{
width:944px;
margin:0 auto;
}
/* flash */
#container .flash-holder{
font-size:0;
line-height:0;
position:relative;
z-index:2;
}
/* main */
#main{
background:url(../images/bg-main.gif) repeat-y;
overflow:hidden;
width:100%;
position:relative;
z-index:1;
margin-top:-44px;
padding-top:44px;
}
#container .sub-main{background:url(../images/bg-sub-main.gif) repeat-y;}
.main-holder{
float:left;
width:754px;
position:relative;
}
/* body */
#body{
padding:44px 19px 0;
line-height:1.38em;
margin:-44px 0 0 190px;
max-width:716px;
}
* html #body{
float:right;
margin:-44px 0 0;
}
.fancy-background{
background:url(../images/bg-fancy.png) no-repeat;
padding:44px 19px 215px !important;
}
#body h1{
font-size: 2.62em;
font-family: "Times New Roman", Times, Georgia, serif;
line-height: 1.3;
font-weight:normal;
color:#1391c1;
margin:0 0 20px;
display:block;
}
#body h1 em{font-size:2.06em;}
#body h1 i{font-size:2.35em;}
/* frame */
#body .frame-holder{
position:relative;
height:306px;
width:550px;
margin:0 auto 14px;
padding:95px 0 0 130px;
}
#body .frame-holder .framed{display:block;}
#body .frame{
background:url(../images/bg-frame.png) no-repeat;
height:401px;
width:680px;
position:absolute;
top:0;
left:0;
}
#body .alignright{
float:right;
padding:5px 0 5px 5px;
}
#body .alignleft{
float:left;
padding:5px 15px 5px 0;
}
#body strong{
color:#1391c1;
font:bold 1.15em "Times New Roman", Times, Georgia, serif;
}
#body p{margin-bottom:23px;}
#body p a{
text-decoration:underline;
color:#005984;
font-weight:bold;
}
#body p a:hover{text-decoration:none;}
#body h2{
margin-bottom:4px;
color:#0f6c8f;
font:bold 1.85em "Times New Roman", Times, Georgia, serif;
letter-spacing:-1px;
}
/* buttons-block */
#body .buttons-block{
margin:0 0 39px;
}
#body .buttons-block ul{text-align:center;}
#body .buttons-block ul li{
display:inline;
padding:0 5px;
background:none;
}
#body h3{
margin-bottom:7px;
color:#0f6c8f;
font:bold 1.38em "Times New Roman", Times, Georgia, serif;
letter-spacing:-1px;
}
/* ribbon */
#body .ribbon{
background:url(../images/bg-ribbon.gif) repeat-x;
height:80px;
margin:0 -19px 25px;
}
#body ul{margin-bottom:20px;}
#body ul li{
background:url(../images/bullet-black-square.gif) no-repeat 0 7px;
padding-left:10px;
}

#body ul a{
text-decoration:underline;
color:#005984;
font-weight:bold;
}
#body ul a:hover{text-decoration:none;}

#body ul ul{margin:0;}
/* section */
#body .section{
overflow:hidden;
height:1%;
}
/* infographic-grid */
#body .infographic-grid{
font-size:0.85em;
line-height:15px;
color:#666;
overflow:hidden;
height:1%;
padding:50px 0 0 39px;
}
#body .infographic-grid ul{text-align:left;}
#body .infographic-grid ul li{
display:inline-block;
vertical-align:top;
width:290px;
margin:0 11px 11px;
padding:0;
background:none;
}
* html #body .infographic-grid ul li{
display:inline;
height:1%;
}
* +html #body .infographic-grid ul li{
display:inline;
height:1%;
}
#body .infographic-grid ul li img{
display:block;
margin-bottom:6px;
vertical-align:top;
}
#body .caption h2
{
color:#036;
font:1.45em "Times New Roman", Times, Georgia, serif;
margin-bottom:1px;
letter-spacing:0;
}
#body .caption h3
{
font:1em Arial, Helvetica, sans-serif;
color:#69c;
margin-bottom:7px;
letter-spacing:0;
}
#body .caption p
{
text-decoration:none;
}


/* ship */
#body .ship{background:none;}
#main .fancy-background .ship{
background:url(../images/img-ship.gif) no-repeat;
height:215px;
width:535px;
position:absolute;
bottom:0;
left:190px;
}
/* menu */
#menu{
width:190px;
float:left;
font:1.08em/1.46em "Times New Roman", Times, Georgia, serif;
}
#menu ul{
text-transform:uppercase;
width:100%;
overflow:hidden;
position:relative;
}
#menu ul li{
overflow:hidden;
width:100%;
}
#menu ul li .bullet{
padding-left:20px;
float:left;
}
#menu ul a{
display:block;
padding:5px 5px 6px 0;
color:#fff;
text-decoration:none;
overflow:hidden;
height:1%;
}
#menu ul a:hover{
text-decoration:none;
color:#fff;
}
#menu ul li.liBullet .bullet{background:none;}
#menu ul li.liClose .bullet{background:url(../images/arrow-accordion.gif) no-repeat 9px 100%;}
#menu ul li.liOpen .bullet{background:url(../images/arrow-accordion-hover.gif) no-repeat 6px 100%;}
#menu ul ul{
background:#95adcc;
font-size:0.93em;
text-transform:none;
font-weight:bold;
}
#menu ul ul a{color:#052342;}
#menu ul ul a:hover{color:#052342;}
#menu ul ul li.liBullet .bullet{background:none;}
#menu ul ul li.liClose .bullet{background:url(../images/arrow-slide.gif) no-repeat 9px 100%;}
#menu ul ul li.liOpen .bullet {background:url(../images/arrow-slide-hover.gif) no-repeat 6px 100%;}
#menu ul ul ul li.liBullet .bullet{background:none;}
#menu ul ul ul li.liClose .bullet{background:url(../images/arrow-slide.gif) no-repeat 9px 100%;}
#menu ul ul ul li.liOpen .bullet {background:url(../images/arrow-slide-hover.gif) no-repeat 6px 100%;}
#menu ul ul ul{font-size:0.85em;}
#menu ul ul ul a{color:#fff;}
#menu ul ul ul a:hover{color:#fff;}
/* sidebar */
#sidebar{
width:165px;
float:right;
min-height:2000px;
padding:52px 11px 0 14px;
margin:-44px 0 0 19px;
background:#062343;
}
* html #sidebar{
margin:-44px 0 0;
}
* +html #sidebar{
margin:-44px 0 0;
}
#sidebar ul{margin-bottom:29px;}
#sidebar ul li{
margin-bottom:13px;
}
/* form */
#sidebar form fieldset{
overflow:hidden;
width:100%;
}
#sidebar form label{
float:left;
color:#9fb9da;
font-size:0.85em;
font-weight:bold;
margin:0 0 8px;
}
#sidebar form .text{
float:left;
background:url(../images/bg-input.gif);
height:22px;
width:153px;
padding:0 4px;
margin-bottom:8px;
}
#sidebar form .text input{
float:left;
border:0;
background:none;
width:153px;
padding:4px 0;
font:12px Arial, Helvetica, sans-serif;
}
#sidebar form .submit{
display:block;
background:url(../images/btn_form_email-submit.gif);
border:0;
width:75px;
height:31px;
margin:0 auto;
cursor:pointer;
}
/* footer */
#footer{
background:#95accb url(../images/bg-footer.gif) repeat-x;
text-align:center;
font-size:0.92em;
color:#fff;
padding:6px 0 8px;
}
#footer ul{
font:1.33em "Times New Roman", Times, Georgia, serif;
color:#052342;
margin-bottom:12px;
}
#footer ul li{
display:inline;
background:url(../images/bullet-star.gif) no-repeat 0 3px;
padding:0 0 0 18px;
}
#footer ul li:first-child{background:none;}
#footer ul a{
color:#052342;
text-decoration:underline;
}
#footer ul a:hover{text-decoration:none;}
#footer p a{color:#fff;}
#footer p a.spacer{
margin-left:10px;
}
#footer p a:hover{
color:#005984;
text-decoration:underline;
}

Major_Payne

7:59 am on Oct 21, 2010 (gmt 0)



I hope you are NOT surround block level tags with the link tags. That is incorrect.

You may not know it, but a link has four different states that it can be in. CSS allows you to customize each state. Please refer to the following keywords that each correspond to one specific state:

* link - this is a link that has not been used, nor is a mouse pointer hovering over it
* visited - this is a link that has been used before, but has no mouse on it
* hover - this is a link currently has a mouse pointer hovering over it/on it
* active - this is a link that is in the process of being clicked

Using CSS you can make a different look for each one of these states: 

a:link {
color:#006;
text-decoration:none;
cursor:pointer;
}

a:visited {
color:#369;
}

a:hover {
color:#f60;
text-decoration:underline;
}

a:focus {
outline: none; /* remove the dotted outline added by Firefox */
}

a:active {
color:#fc9;
cursor:wait;
}

a:link {color: #090;}
a:visited {color: #999;}
a:hover {color: #333;}
a:focus {color: #333;}
a:active {color: #090;}


Order matters. If "a:active" precedes "a:hover", the effects in "a:hover" will take precedence. So, in this example, you would not see the color change when the user clicks down on a link.

Pseudo Classes

You can set links contained in different parts of your web page to be different colors by using the pseudo class. For example, lets say you want your links in the content area to have a different color then the links in the left or right column of your webpage.

You can do this in the following fashion: 

#pseudo_content a:link {color: #090;}
#pseudo_content a:visited {color: #999;}
#pseudo_content a:hover {color: #333;}
#pseudo_content a:focus {color: #333;}
#pseudo_content a:active {color: #090;}


Now assuming that you have your main content in a division named "content" all links within that division will now be styled by this new style selector. Should your selector have a different name, just change the #pseudo_content selector to match your division name.

Then for the links in a column you could use the following: 

#pseudo_column a:link {color: #090;}
#pseudo_column a:visited {color: #999;}
#pseudo_column a:hover {color: #333;}
#pseudo_column a:focus {color: #333;}
#pseudo_column a:active {color: #090;}


Once again, this assumes the name of the column division, just change the name to match yours.

This same method can be accomplished by declaring a class instead of an id. 

a.pseudo_column:link {color: #090;}
a.pseudo_column:visited {color: #999;}
a.pseudo_column:hover {color: #333;}
a.pseudo_column:focus {color: #333;}
a.pseudo_column:active {color: #090;}


Though in this case you will need to add a class to each link

<a class="pseudo_column" href="" title="">some link text</a>

But, there is still yet an easier way 

.pseudo_column a:link {color: #090;}
.pseudo_column a:visited {color: #999;}
.pseudo_column a:hover {color: #333;}
.pseudo_column a:focus {color: #333;}
.pseudo_column a:active {color: #090;}


Then in the (X)HTML file 

<div class="pseudo_column">
<a href="" title="Link Description">Link Text Description</a>
</div>

milosevic

8:35 am on Oct 21, 2010 (gmt 0)

10+ Year Member



Good post Major Payne, I wasn't aware that the order mattered with link styling (maybe because I never bother with :active).

What's the purpose of the pseudo_ prefix to the declarations though? I don't understand the need for this.

It reminds me of using "generic_" as a prefix for classes

techtheatre

2:36 pm on Oct 21, 2010 (gmt 0)

10+ Year Member



That does not seem to work... I assigned a specific class to the link: <a href="http://www.example.com" class="captionlink">

The CSS I added:
.captionlink a:link {color: #666666;}

But the overall link styling is still pushing through. I tried the CSS at the top and bottom of the CSS file.

This problem is in both IE and FF.

milosevic

3:11 pm on Oct 21, 2010 (gmt 0)

10+ Year Member



techtheatre, do you still have a rule that applies to just "a" (not a:visited etc)

If so, I believe this will override the pseudoclass styles.

SuzyUK

3:30 pm on Oct 21, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



<a href="http://www.example.com" class="captionlink">

The CSS I added:
.captionlink a:link {color: #666666;}


your CSS is targetting the 
a:link
AS A CHILD of .captionlink, you read the rules from right to left..

it should be 
a.captionlink:link {color: #666}
or simply 
a.captionlink
to target all states of the link

if that's still not specific enough , it could be that the original CSS which is targetting that link is more specific and you will need to follow the specificity of the previous rule and then add the captionlink class as well

e.g. if the CSS which is affect the link just now is.. 
#somediv .someclass a {}

your CSS needs to be 
#somediv .someclass a.captionlink {}

techtheatre

5:28 am on Dec 1, 2010 (gmt 0)

10+ Year Member



Thanks SuzyUK...that is very informative. I ended up completely re-working the HTML and got it to work another way, but you taught me some useful info on how CSS is applied. THANKS!
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 3:35 pm May 1, 2026