change of font-weight to bold is unwantingly changing width of element
css, html
Solution
Other than the `width` route here are two other possibilities, it's down to personal preference as to whether you think they are suitable or not. Both these ideas work on the same principal, that you use a separate element to show the bold state, and this element either doesn't (idea one) or does (idea two) affect the UI with it's dimensions.
http://jsfiddle.net/3Jyge/2/
Idea one
Use pseudo selectors. This method relies on the browser supporting quite recent advances i.e. `:before` and `content: attr()` so probably isn't reliable just yet.
- https://developer.mozilla.org/en-US/docs/Web/CSS/attr#Browser_Compatibility
- https://developer.mozilla.org/en-US/docs/Web/CSS/::before#Browser_compatibility
css:
ul {
list-style: none;
}
ul li {
float: left;
}
ul li:hover a {
visibility: hidden;
}
ul li:hover:before {
position: absolute;
font-weight: bold;
content: attr('data-text');
}
markup:
<ul>
<li data-text="one"><a href="#">one</a></li>
<li data-text="two"><a href="#">two</a></li>
<li data-text="three"><a href="#">three</a></li>
</ul>
Idea two
The other is a bit more straight-forward, although it relies on preping your markup first — and those who use screen readers may understandably dislike your site; unless you can find a nice way to hide the duplicate text from them.
markup:
<ul>
<li><a href="#">
<span class="a">one</span>
<span class="b">one</span>
</a></li>
<li><a href="#">
<span class="a">two</span>
<span class="b">two</span>
</a></li>
<li><a href="#">
<span class="a">three</span>
<span class="b">three</span>
</a></li>
</ul>
css:
ul {
margin: 0; padding: 0;
list-style: none;
}
ul li {
float: left;
}
ul li a span.b {
visibility: hidden;
font-weight: bold;
}
ul li a span.a {
position: absolute;
}
ul li:hover a span.b {
visibility: visible;
}
ul li:hover a span.a {
visibility: hidden;
}
At the end of the day the better solutions would be:
- Set a width, although I can understand not wanting to do this.
- Use JavaScript to calculate dimensions.
- Choose a different highlight, one that doesn't alter the dimensions of the text.
Problem
Whilst creating a navigation bar for my site I decided to make the active page tab show up in bold for usability purposes, but when I change the `font-weight` on the element it only slightly makes the element wider, an example I made using hover effects instead demonstrates my issue and i've never known a way to solve it.. http://jsfiddle.net/amx7E/ HTML ``` <ul id="mainNav"> <li class="navItem"> <a class="navLink" id="activeLink">Link 1</a> </li> <li class="navItem"> <a class="navLink">Link 2</a> </li> <li class="navItem"> <a class="navLink">Link 3</a> </li> </ul> ``` CSS ``` * { font-family: Arial; font-size: 14px; list-style: none; margin: 0; padding: 0; text-decoration: none; } #mainNav { background: RGB(200, 230, 240); border-bottom: 1px solid RGB(0, 0, 0); height: 30px; margin: 0 auto; position: relative; width: 100%; } .navItem { display: block; float: left; position: relative; } .navItem:last-child .navLink { border-right: 1px solid RGB(0, 0, 0); } .navLink { border-bottom: 1px solid RGB(0, 0, 0); border-left: 1px solid RGB(0, 0, 0); display: inline-block; height: 30px; line-height: 30px; padding: 0 15px; white-space: nowrap; } .navItem:hover .navLink { background: RGB(120, 200, 250); color: RGB(255, 255, 255); cursor: pointer; font-weight: bold; } #activeLink { background: RGB(90, 170, 220); color: RGB(255, 255, 255); font-weight: bold; } #activeLink:hover { background: RGB(110, 190, 240); } .navItem:hover .subNav { display: block; } ```