Grow your CSS skills. Land your dream job.

Menu items moving when one goes bold on hover

  • # June 11, 2013 at 11:54 pm

    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

    # June 12, 2013 at 12:51 am

    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

    # June 12, 2013 at 1:28 am

    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.

    # June 12, 2013 at 6:34 am

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

    # June 12, 2013 at 6:48 am

    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 “”)

    # June 12, 2013 at 1:28 pm

    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

    # June 13, 2013 at 5:49 am

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

    # June 13, 2013 at 6:01 am

    >This is the perfect fix of this solution.

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

    # June 13, 2013 at 12:18 pm

    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.

    # June 16, 2013 at 1:38 am

    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!

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".