HTML and CSS

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

Please support our HTML and CSS advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Oct 2009

Posts: 1

Reputation: alipica is an unknown quantity at this point

Solved Threads: 0

alipica

Offline

Newbie Poster

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

18 Days Ago

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:

Help with Code Tags

(Toggle Plain Text)

#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:

Help with Code Tags

(Toggle Plain Text)

#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?

•

Join Date: Jan 2009

Posts: 77

Reputation: Zero13 is an unknown quantity at this point

Solved Threads: 11

Zero13

Offline

Junior Poster in Training

17 Days Ago

Try this:

Help with Code Tags

HTML and CSS Syntax (Toggle Plain Text)

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

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

•

Join Date: Oct 2009

Posts: 14

Reputation: rogermatin is an unknown quantity at this point

Solved Threads: 1

rogermatin rogermatin is offline

Offline

Newbie Poster

15 Days Ago

•

Originally Posted by Zero13

Try this:
Help with Code Tags

HTML and CSS Syntax (Toggle Plain Text)
#upperBarWrap {
	margin:0;
	position:fixed;
       For /* IE */
        left: 0;
	width:100%;
}
#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

Network management tools provides security, scalability and flexibility in you network.

•

Join Date: Jan 2007

Posts: 3,203

Reputation: MidiMagic has a spectacular aura about

Solved Threads: 165

MidiMagic

Offline

Nearly a Senior Poster

8 Days Ago

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.

Daylight-saving time uses more gasoline