can you explain ie7? (fixed position, width 100%)

[alipica]

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?

[ko ko]

Try this:

#upperBarWrap {
	margin:0;
	position:fixed;
       For /* IE */
        left: 0;
	width:100%;
}

Set 'left=0' property to say IE where the fixed position start.

[rogermatin]

Try this:

#upperBarWrap {
	margin:0;
	position:fixed;
       For /* IE */
        left: 0;
	width:100%;
}

Set 'left=0' property to say IE where the fixed position start.

Even i think this could be a help to you
Or try a support

[MidiMagic]

One problem is that you have an invalid style. 0px is invalid. Do not attach a unit of measure to the number 0. Many browsers reject the entire style when this appears.