weird cell size shift in css nav bar.

Question

Hello All - Here's the situation. I have written a css vertical navigation bar and the size of cells shrink once the enclosed links have been visted! Please Help! Here's my code:

<style type="text/css">  

a.vertical:link  
{
display:block;  
 font-size:14px;  
 padding: 1px 1px;
 text-decoration:none;  
 color:#151B54;  
 background:#FFFFFF;  
 font-weight:bold;  
 width:200px;  
}  

a.vertical:active  
{  
 font-size:14px;  
 padding: 1px 1px;
 text-decoration:none;  
 color:#151B54;  
 background:#FFFFFF;  
 font-weight:bold;  
 width:200px;  
}  

a.vertical:visited   
{  
 font-size:14px;  
 padding: 1px 1px;
 text-decoration:none;  
 color:#F778A1;  
 background:#FFFFFF;  
 font-weight:bold;  
 width:200px;  
}  

a.vertical:hover  
{  
 font-size:14px;  
 padding: 1px 1px;
 text-decoration:none;  
 color:#FFFFFF;  
 background:#151B54;  
 font-weight:bold;  
 width:200px;  
}  

.verticalBorder  
{  
 background:#FFFFFF; 
 padding: 1px 1px; 
 border-style:solid;  
 border-color:#FFFFFF;  
 border-width:5px;  
 width:200px;  
}     

</style>

<div class="verticalBorder" align="left">  
<a href="http://www.stpaulncanton.org/LatchKey/latchkeynew.html"   
class="vertical">After School Child Care</a><br/>  

Answer 1

Can you post the HTML for this or link this page? Probably unrelated, but it doesn't seem like you're utilizing the cascade with the redeclaration of font-size, padding, text-decoration, font-weight, and width across all of the .vertical links.

Answer 2

I pasted your code into a test page and I don't see the effect you describe. Could there be other styles affecting your links? Use Firebug or IE dev tools to inspect the links to see what styles are being applied.

Answer 3

The short answer: the :link pseudo-class styles unvisited links, and is setting display:block. When your links are visited, :link no longer applies and they revert to display:inline, their default, and thus you lose the ability to specify a width.

Beyond that, you should read up on the cascade so you can write more concise, maintainable CSS. For example, taking advantage of the cascade, your CSS could wind up as:

<style type="text/css">  

a.vertical  
{
 display:block;  
 font-size:14px;  
 padding: 1px 1px;
 text-decoration:none;  
 color:#151B54;  
 background:#FFFFFF;  
 font-weight:bold;  
 width:200px;  
}    

a.vertical:visited   
{  
 color:#F778A1;  
}  

a.vertical:hover  
{  
 color:#FFFFFF;  
 background:#151B54;  
}  

.verticalBorder  
{  
 background:#FFFFFF; 
 padding: 1px 1px; 
 border-style:solid;  
 border-color:#FFFFFF;  
 border-width:5px;  
 width:200px;  
}     

</style>

Answer 4

Hmm... ajm, I don't quite understand what you're saying as to how I can fix my issue. Could you please elaborate?