My hat falls off when I resize my browser window. After maximizing the window the hat ends up like this:

hat fell off

It seems that the problem is there is not enough hat glue. I checked the HTML codes and couldn't find the place where the hat glue is applied. Maybe it was forgotten? I'm using the red stripy hat and the Chrome browser, in case that matters.

  • 33
    Your head is too small. Commented Dec 19, 2012 at 10:19
  • You don't even have a hat for me... Unless the hats disappear on the meta.
    – Nick.T
    Commented Dec 19, 2012 at 10:20
  • 1
    my glasses are also falling ..
    – Usman
    Commented Dec 19, 2012 at 10:20
  • 2
    my hat too...looks like its bug Commented Dec 19, 2012 at 10:22
  • Strange... I can see your hat on the stackoverflow and when I resize my Chrome browser, there is no issue. What version of Chrome?
    – Nick.T
    Commented Dec 19, 2012 at 10:22
  • Version 23.0.1271.97 m
    – Mark Byers
    Commented Dec 19, 2012 at 10:23
  • repro on Firefox 12.0, but on the profile page.
    – Shawn Chin
    Commented Dec 19, 2012 at 10:23
  • Happening for me too on Firefox 17.0.1
    – Ren
    Commented Dec 19, 2012 at 10:52
  • 1
    It doesn't happen to me with hats on on questions but on profile pages (Firefox 17.0.1)
    – kapex
    Commented Dec 19, 2012 at 12:07

2 Answers 2


It happens in profile pages as well

enter image description here

The .gravatar and .user-info .user-gravatar32 classes should be position:relative and then style the hat element based on that.. instead of in relation to the document..


The following code will fix it for the profile page as well, so

var grav = $('.gravatar:first').offset();
var hat = $('.hat').offset();

    left: hat.left - grav.left,
    top:  hat.top -  grav.top,

so no excuses now.. :p

  • Looks like it only happens on profile pages (for me anyway)
    – Zelda
    Commented Dec 19, 2012 at 21:22

Looks like a bug. It can be fixed with this:

<div class="hat" style="float: left; display: block; width: 0px; height: 0px; overflow: visible; left: 293.5px;">
<div style="width: 160px; height: 110px; background-position: -3090px -20px; background-size: 5760px auto; background-image: url("http://cdn.prom.sstatic.net/WinterBash/img/sprite-128.png"); position: absolute; top: 120px;"></div>

enter image description here

enter image description here

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .