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.

share|improve this question
32  
Your head is too small. –  BoltClock's a Unicorn 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 –  NullPoiиteя 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) –  kapep Dec 19 '12 at 12:07
add comment

2 Answers

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

share|improve this answer
    
Looks like it only happens on profile pages (for me anyway) –  Ben Brocka Dec 19 '12 at 21:22
add comment

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

share|improve this answer
add comment

You must log in to answer this question.

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