Menu items moving when one goes bold on hover

[jtwalter]

I am currently experiencing something weird with the menu items on this page:

http://www.garrettbenson.com/index2.php

The borders are just to see the spacing more easily. I set them to go bold on hover, but the problem is all the others move when one is rolled over. This makes sense since they are all relative to one another. It is most notable in Safari. Does anybody have a suggestion as to how I could get around this with a different way of spacing them? Tables? Percentages? A property I’m missing?

Thank you for any info!

Julian

[Alen]

Line #28 in your CSS `#menu a:hover {padding: 1px;}` you are adding padding which then exceeds the width of container.

Consider adding, top of your stylesheet:
`*{
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}`

More here: http://learnlayout.com/box-sizing.html

[jtwalter]

Thank you AlenAbdula for the response. The 1px padding on hover was to minimize the effect of the font change in Firefox as I was looking at it, but then on Safari it was still very prominent. This is what made me realize it might not be the best way to do it. My mind is totally blanking on other ways this could be done!

I got no change with the box-sizing property.

[akshan]

Just try to give the **Width** and **float:left** to individual span according to text.

[CodeGraphics]

Remove the font-weight:bold in your hover. It will continue to choke as long as the anchor link doesnt have bold effect. Check [here.](http://codepen.io/codegraphics/pen/gzipG “”)

[Paulie_D]

The basic issue is that the dimensions of your `` elements are dependent on the size of the `` elements and padding.

When you add **bold** to the text you are increasing the dimensions of the links and so everything gets bigger.

Not saying it’s a complete answer but I think I would use a more traditional ul/li/a (rather than span/a) structure with `inline-block` and see what you get.

[wolfcry911]

there will be no difference Paulie – the widths are still determined by font size and weight.
Like CodeGraphics states, one way to have this is work is to _not_ use bold on hover. Another would be to use fixed widths. Here’s an example using text-shadow to increase contrast:

http://www.codepen.io/wolfcry911/pen/nsojI

[rawat3209]

you have to give different padding to both a and hover (bold) property. This is the perfect fix of this solution.

[Paulie_D]

>This is the perfect fix of this solution.

Well…it’s **a** fix at least.

[wolfcry911]

It’s definitely not a _perfect_ fix. The fonts render differently on different browsers and platforms – you will never be able to adjust padding to compensate.

[jtwalter]

Thanks so much for all the replies! This forum is really awesome.

I will probably go with a fixed width on the spans because my friend really likes the bold effect. I figured there had to be some weird way to get it to not affect the width but I might be wrong. @rawat3209 I had this set before but only noticed the real problem when I opened different browsers and the bold effect is way different on each. I could potentially target each browser but it’s a bit of a pain.

Thanks again!

[Author]

Posts