39

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.

Improve this question
9
  • 33
    Your head is too small.
    – BoltClock's a Unicorn
    Dec 19, 2012 at 10:19
  • You don't even have a hat for me... Unless the hats disappear on the meta.
    – Nick.T
    Dec 19, 2012 at 10:20
  • 1
    my glasses are also falling ..
    – Usman
    Dec 19, 2012 at 10:20
  • 2
    my hat too...looks like its bug
    – NullPoiиteя
    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
    Dec 19, 2012 at 10:22
  • Version 23.0.1271.97 m
    – Mark Byers
    Dec 19, 2012 at 10:23
  • repro on Firefox 12.0, but on the profile page.
    – Shawn Chin
    Dec 19, 2012 at 10:23
  • Happening for me too on Firefox 17.0.1
    – Ren
    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
    Dec 19, 2012 at 12:07

2 Answers 2

Reset to default
12

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

Update

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

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

$('.hat').css({
    left: hat.left - grav.left,
    top:  hat.top -  grav.top,
    position:'relative'
});

so no excuses now.. :p

Improve this answer
1
  • Looks like it only happens on profile pages (for me anyway)
    – Ben Brocka
    Dec 19, 2012 at 21:22
6

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>
</div>

enter image description here

enter image description here

Improve this answer

You must log in to answer this question.

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