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 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!
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:
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.