link font smaller when clicked

[kurazi]

Hey guys, I need your help. Its probably something stupid I am missing, but when I click on any of the sub links (membership info, committees, or hall rental) on this site
<url removed>
the font squishes down a little bit. Here is the css

body,td,th {
color: #333333;
background-image: url(bg1.gif);

}

#wrapper {
width: 920px;
margin-left: auto;
margin-right: auto;
height: 740px;
background-color: #FFFFFF;

}

#Layer1 {
position:absolute;
left:1px;
top:151px;
width:221px;
height:163px;
z-index:1;
}
#content {
margin: 10px 10px 0px 10px;
width: 900px;
position: absolute;
background-color: transparent;
height: 162px;

}

#blue {
width: 227px;
position: absolute;
background: #000099 url(shadow.jpg) right no-repeat;
height: 551px;
z-index: 3;
margin: 152px 0px 0px 22px;
left: 2px;
top: 16px;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
text-transform:uppercase;
}

#blue a:link{
color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
}

#blue a:visited{
color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;

}

#blue a:hover{
color: #999999;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
}

#blue a:active{ /*currently selected tab*/
color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
}

#modernbricksmenu{
padding: 0;
width: 900px;
position: absolute;
margin-top: 220px;
voice-family: "\"}\"";
voice-family: inherit;
left: -1px;
top: -12px;
height: 525px;
}

#modernbricksmenu ul{
font: bold 11px Arial;
margin:0;
margin-left: 270px; /*margin between first menu item and left browser edge*/
padding: 0;
list-style: none;
}

#modernbricksmenu li{
display: inline;
margin: 0 2px 0 0;
padding: 0;
text-transform:uppercase;
}

#modernbricksmenu a{
float: left;
color: white;
margin: 0 1px 0 0; /*Margin between each menu item*/
padding: 5px 10px;
text-decoration: none;
letter-spacing: 1px;
background-color: #000099; /*Default menu color*/
border-bottom: 1px solid white;
}

#modernbricksmenu a:hover{
background-color: gray; /*Menu hover bgcolor*/
}

#modernbricksmenu #current a{ /*currently selected tab*/
background-color: #FFF600; /*Brown color theme*/
border-color: #fff600;
color: #000000;
}

#modernbricksmenuline{
clear: both;
padding: 0;
width: 900px;
height: 486px;
line-height: 5px;
background: #fff600;
z-index: 2;

}
#info{
clear: both;
width: 598px;
height: 431px;
margin: 30px 43px 30px 260px;
background-color: #FFFFFF;
position: absolute;
overflow: auto;
left: 17px;
top: 28px;
z-index: 1;
font-family:Arial, Helvetica, sans-serif
}

#info a:link{
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
background-color:#FFFFFF;
padding: 0;
display: block;
float: none;
}

#info a:visited{
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
background-color:#FFFFFF
padding: 0;
display: block;
float: none;
}

#info a:hover{
color: #999999;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
background-color:#FFFFFF
padding: 0;
display: block;
float: none;
}

info#n a:active{ /*currently selected tab*/
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
background-color:#FFFFFF
padding: 0;
display: block;
float: none;
}

#blueblock{
width: 158px;

font-family: Arial, sans-serif;

color: #333;
position: absolute;
left: 34px;
}

* html #blueblock{ /*IE 6 only */
w\idth: 125px; }

#blueblock ul{
list-style: none;
margin: 0;
padding: 0;
border: none;
}

#blueblock li {
border-bottom: 1px solid #90bade;
margin: 0;
}

#blueblock li a{
display: block;
padding: 5px 5px 5px 38px;
color: #fff;
text-decoration: none;
width: 100%;
}

html>body #blueblock li a{ /*Non IE6 width*/
width: auto;
}

#blueblock li a:hover{
color: #fff;
}

Any ideas?

Thanks,
Shawna

[edited by: encyclo at 1:17 am (utc) on Dec. 31, 2007]
[edit reason] no links to personal sites please [/edit]

[lavazza]

Rather than declaring font-size (and family) four times for four states

try

#blue a {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
}

#blue a:link{
color: #FFFFFF;
}

#blue a:visited{
color: #FFFFFF;
}

#blue a:hover{
color: #999999;
}

#blue a:active{ /*currently selected tab*/
color: #FFFFFF; /* this DID declare font-size: 10px; */
}

OR... as the color is #FFFFFF for three classes, you could trim your code even further:

#blue a {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFF;
}

#blue a:hover{
color: #999;
}

[Xapti]

No offence, but did it occur to you to check the style info on your links? The answer is staring you in the face... you have both 10px font size and 11px font size specified for your links.

Also, you should consider using ems instead of pixels, since pixels do not resize in Internet Explorer, as well as the fact that at low resolutions the font size may appear too large, while at higher resolutions, the font may be too hard to see. When using ems, it bases the font size off the user's setting (browser's setting), which they will likely change based on their visual acuity and screen resolution.