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. Dec 19 '12 at 10:19
  • You don't even have a hat for me... Unless the hats disappear on the meta.
    – Nick.T
    Dec 19 '12 at 10:20
  • 1
    my glasses are also falling ..
    – Usman
    Dec 19 '12 at 10:20
  • 2
    my hat too...looks like its bug Dec 19 '12 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
    Dec 19 '12 at 10:22
  • Version 23.0.1271.97 m
    – Mark Byers
    Dec 19 '12 at 10:23
  • repro on Firefox 12.0, but on the profile page.
    – Shawn Chin
    Dec 19 '12 at 10:23
  • Happening for me too on Firefox 17.0.1
    – Ren
    Dec 19 '12 at 10:52
  • 1
    It doesn't happen to me with hats on on questions but on profile pages (Firefox 17.0.1)
    – kapex
    Dec 19 '12 at 12:07

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)
    – Ben Brocka
    Dec 19 '12 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 .