Hi,

I am doing some css to create an example blog page. I want the h1 and h2 tags inside a div class called box, to be links that have a formatted font and style but when hovered on and whilst active change colour. The problem I am currently having is whilst the link is focused it dramatically changes height and font style, I can't figure out what is causing this change below is the css and html for the page.

CSS

.box{
/*box props */
width:510px;
heigth:auto;
padding:25px;

/*element formatting */
background-color:white;

/*border props */
border-top:1px solid #C8C8C8 ;
border-bottom: 1px solid #C8C8C8;

/*text properties */
color:#333333;
}

.box h1 {
/*box props */
margin:0px 0px 12px 0px;

/*element formatting */

/*border props */
border-bottom:2px solid #000066;

/*text properties */
font: bold normal 1.2em/1.21em Arial,"Times New Roman",Serif;
color:#000066;
letter-spacing:0.01em;
text-transform:uppercase;
}

.box h1 a, .box h1 a:focus, .box h1 a:hover{
color:#000066;
text-decoration:none;
}

.box h1 a:active{
font: bold normal 1.2em/1.21em Arial,"Times New Roman",Serif;
color:yellow;
text-decoration:none
}

HTML

<link rel="stylesheet" type="text/css" href="site.css" />
<div class="box">
<h1>A HEADER title in funny FONT. 
Wrap around please. I want to see what you look like</h1>

Text inside the Box box.Text inside the Box box.Text inside the Box box.
Text inside the Box box.Text inside the Box box.Text inside the Box box.
</div>

<div class="box">
<h1><a href="home.html">A HEADER title in funny FONT. 
Wrap around please. I want to see what you look like</a> </h1>

Text inside the Box box.Text inside the Box box.Text inside the Box box.
Text inside the Box box.Text inside the Box box.Text inside the Box box.
</div>

</div>

Any help regarding this problem will be extremely appreciated!

1 answer

1
point
This was chosen as the best answer

The font declaration for the h1 is not being applied to the link within it - that's getting a default, so when you apply the active style it jumps about.

apply the font declaration to this:

.box h1 a, .box h1 a:focus, .box h1 a:hover{}

and things improve.

Answered about 6 years ago by Tony Crockford
  • I added this declaration and applied the font. Now for some reason the any "h1 a" element is larger than a normal h1 element...Any ideas? Graham Brown about 6 years ago
  • yes, because em sizes compound, so the link is 1.2em of 1.2em - you'll need to play around, or just set it to 100% perhaps... Tony Crockford about 6 years ago
  • fixed for firefox, ie doesnt apply the font properties at all. mite just create a new title class for box! what a pain?! Graham Brown about 6 years ago
  • Graham, do you have alink for the latest code that's not working in ie? kemie about 6 years ago