странный сдвиг размера ячейки в css nav bar

Question

Вот ситуация. Я написал вертикальную панель навигации CSS, и размер ячеек уменьшается после просмотра вложенных ссылок! Пожалуйста помоги! Вот мой код:

<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

Краткий ответ: псевдо-класс :link стилизирует непосещенные ссылки и устанавливает display:block.Когда ваши ссылки посещаются, :link больше не применяется, и они возвращаются к display:inline, по умолчанию, и, таким образом, вы теряете возможность указать ширину.

Помимо этого, вы должны прочитать о cascade , так что вы можете написать более краткий, поддерживаемый CSS.Например, используя преимущества каскада, ваш CSS может выглядеть так:

<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 2

Можете ли вы опубликовать HTML для этого или ссылку на эту страницу? Возможно, это не связано, но не похоже, что вы используете каскад с переопределением размера шрифта, отступов, текстового оформления, шрифтового веса и ширины для всех .vertical ссылок.

Answer 3

Я вставил ваш код в тестовую страницу и не вижу эффекта, который вы описываете. Могут ли быть другие стили, влияющие на ваши ссылки? Используйте инструменты Firebug или IE dev, чтобы просмотреть ссылки и посмотреть, какие стили применяются.