oshirowanen
oshirowanen

Reputation: 15925

h3 and anchor tag styling issues

I have the following html snippet which works correctly on my page:

<a href="url goes here" onclick="return ! window.open(this.href);"><h3>title goes here</h3></a>

using the following css

h3
{
    font-family:verdana, arial, helvetica, sans-serif; 
    font-size:75%; 
    font-weight:bold; 
    font-style:normal; 
    text-decoration:none; 
    text-transform:none; 
    margin:0px; 
    padding:0px;
    color:#2C6598;
}

However, this is not valid xhtml as the <h3> tag should not be within a <a> tag.

When I move the <h3> tags outside of the <a> tags, the css does not seem to work, i.e. it loses it's style for some reason.

For example:

<h3><a href="url goes here" onclick="return ! window.open(this.href);">title goes here</a></h3>

with:

h3
{
    font-family:verdana, arial, helvetica, sans-serif; 
    font-size:75%; 
    font-weight:bold; 
    font-style:normal; 
    text-decoration:none; 
    text-transform:none; 
    margin:0px; 
    padding:0px;
    color:#2C6598;
}

does not work the way it did with the <h3> tag within the <a> tags.

How can this be corrected?

Upvotes: 4

Views: 14865

Answers (4)

assadf
assadf

Reputation: 1

I know this post is old but I encountered this problem. You may have to cater for any pseudo classes which may be overriding your styles e.g. a:visited etc. So what you would also need to to do is:

h3 a, a:visited 
{
   font-family:verdana, arial, helvetica, sans-serif; 
   font-size:75%; 
   font-weight:bold; 
   font-style:normal; 
   text-decoration:none; 
   text-transform:none; 
   margin:0px; 
   padding:0px;
   color:#2C6598;
}

Upvotes: 0

chr
chr

Reputation: 66

I had the same problem, so I just simply made a new class with properties I wanted the final text to have, so it's something like that:

CSS: (it didn't work without "!important")

.myclass, .myclass a {
display: block !important;
font-size: 14px !important; 
font-weight: bold !important;
height: 32px !important;}

HTML:

<a class="myclass" "url goes here">title goes here</a>

Upvotes: 0

JohnP
JohnP

Reputation: 50019

This is because the styles for your anchor are taking precedence. You can simply change the stylesheet to

h3, h3 a /** Applies to both H3 and LINK inside H3 **/
{
    font-family:verdana, arial, helvetica, sans-serif; 
    font-size:75%; 
    font-weight:bold; 
    font-style:normal; 
    text-decoration:none; 
    text-transform:none; 
    margin:0px; 
    padding:0px;
    color:#2C6598;
}

This should fix the problem.

Upvotes: 3

Shakti Singh
Shakti Singh

Reputation: 86406

You have to apply the style on <a> tag

try this

h3 a
{
    font-family:verdana, arial, helvetica, sans-serif; 
    font-size:75%; 
    font-weight:bold; 
    font-style:normal; 
    text-decoration:none; 
    text-transform:none; 
    margin:0px; 
    padding:0px;
    color:#2C6598;
}

Upvotes: 5

Related Questions