I just spent several hours trying to figure out how to fix my websites appearance in ie7. I've found a solution, but I have no clue why it actually worked. I'm looking for an explanation if anyone has one.
My goal was to have a fixed position div across the top of my website. It would have a solid image centered in it that was the width of the content not the screen. When you scroll the page the text should go underneath the bar. I also wanted the bar centered within the width of the screen (since my site is also centered). That way, if the screen was resized the bar would still be centered over the content.
I tried several css methods to achieve this. What I tried worked in EVERY other browser, but not IE7 (don't ask about IE6, I don't develop for it anymore). Here's what I had:
#upperBarWrap {
position:fixed;
text-align:center;
margin:0;
width:100%;
}
#upperBar {
width:1200px;
height:38px;
margin:0px auto;
background-image:url(images/layout/upperBar1.png);
background-repeat:no-repeat;
background-position:top left;
text-align:left;
}
Ie7 didn't know how to handle 100% width. my bar was always ~200 pixels to the right of where it should have been. With everything I tried the bar didn't budge from its off-center position. I finally decided I just needed to effect it somehow. What finally worked was adding a width that only 1e7 could read:
#upperBarWrap {
text-align:center;
margin:0;
position:fixed;
width:100%;
*width:1220px;
} Note that 1220px is the size of the content container div.
This solution really doesn't make any sense to me. Can anyone help me understand why this worked?
Unsolved 
