[wp-hackers] links move when hovered

[William Davis]

This is a CSS issue, not a WordPress issue, but in short since the  
links are getting larger when you hover over them (boldface takes more  
room than roman text) everything moves.

Will



On Jan 13, 2011, at 8:28 PM, kris feathers wrote:

> Hello,
>
> I am working on twenty ten child theme and I can't figure out why  
> the links
> move when hovered. I want the links to be bold when hovered. I looked
> everywhere..even on codex. Anyone have any suggestions would be  
> greatly
> appreciated.
> here's the css:
>
> #access {
>    background: #95C0F4;
>    display: block;
>    float: left;
>    margin: 0 auto;
>    width: 940px;
>    margin-left:52px;
>    margin-top:161px;
>
> }
> #access .menu-header,
> div.menu {
>    font-size: 13px;
>    width: 940px;
> }
> #access .menu-header ul,
> div.menu ul {
>    list-style: none;
>    margin: 0;
> }
> #access .menu-header li,
> div.menu li {
>    float: left;
>    position: relative;
>
> }
>
>
> #access .menu-header li:hover,
> div.menu li:hover {
>    float: left;
>    position: relative;
>    background: url(images/arrow.png) no-repeat scroll bottom center;
> color:#ffffff;padding: 0px 0px 9px;
> }
>
>
> #access a {
>    color: #ffffff;
>    display: block;
>    line-height: 38px;
>    margin: 0 10px;
>    text-decoration: none;
>    font-size:18px;
>    font-family:Arial, Helvetica, sans-serif;
> }
>
> #access li:hover > a,
> #access ul ul :hover > a {
>    -moz-border-radius: 4px;
>    -khtml-border-radius: 4px;
>    -webkit-border-radius: 4px;
>    background: #f6c00e;
>    color: #DB5628;
>    font-weight:bold;
>
> }
> #access ul li:hover > ul {
>    display: block;
>
> }
>
> #access ul li.current_page_item > a,
> #access ul li.current-menu-ancestor > a,
> #access ul li.current-menu-item > a,
> #access ul li.current-menu-parent > a {
>    -moz-border-radius: 4px; -webkit-border-radius: 4px; border- 
> radius: 4px;
>    background: #f6c00e;
>    font-weight: bold;
>
>
> }
> * html #access ul li.current_page_item a,
> * html #access ul li.current-menu-ancestor a,
> * html #access ul li.current-menu-item a,
> * html #access ul li.current-menu-parent a,
> * html #access ul li a:hover {
>    -moz-border-radius: 4px; -webkit-border-radius: 4px; border- 
> radius: 4px;
>    color: #fff;
>    background: #f6c00e;
>    font-weight: bold;
> }
> #access .menu-header li.current_page_item,
> div.menu li.current_page_item {
>    float: left;
>    position: relative;
>    background: url(images/arrow.png) no-repeat scroll bottom center;
> color:#ffffff;padding: 0px 0px 9px;
>    font-weight: bold;
> }
>
>
> Thank you!!!!!
> _______________________________________________
> wp-hackers mailing list
> wp-hackers at lists.automattic.com
> http://lists.automattic.com/mailman/listinfo/wp-hackers