Fixing the slight shift on SharePoint web part titles when hovering

When customizing SharePoint sites you most certainly will make some type of change to the web part title. When editing the page you will notice sometimes when you hover over the title to edit the web part there will be a slight shift. You can see the difference in the images below.

I have done this many times and each time I forget to document the actual fix, so today when I went back through my sites to find the fix, I decided to actually make a post.

/* stops the web part movement when hovering */
.ms-WPHeaderTdSelSpan {width: 20px;}

Adding this line to your CSS file will stop the movement.

Let me know if this helps, as always thanks for reading.

, , , , , ,

  • Hi Heather, I have this exact issue and it increases my whole entire webpart zone’s width (annoying to say the least). I’ve been trying to find a fix for a while. I added your css, but it doesn’t seem to be picking it up (using IE’s developer tools). Can you explain to me what the width:20px is doing? And do I need more specificity in my css to make it work?

    • Oh! I figured out what I did wrong. Thanks!

      • Hi Gilda, can you please mention what things you did to make it work?

  • Raghu

    Great, appreciated