Member Avatar for 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?

  • 4 Contributors
  • 3 Replies
  • 200 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by MidiMagic

Dani AI

Generated

Short answer: the star-prefixed rule that ended up adding was acting as an IE-only override and — more importantly — gave the wrapper a concrete pixel width, which in turn changed how IE7’s layout engine calculated the fixed element. IE7 still had the old “hasLayout”/dual-layout behavior: giving an element a definite width (or other hasLayout-triggering property) changes the layout path and can fix strange offsets for positioned elements. The star-hack itself is an old IE hack (applies to IE7 and below) and the width change is what actually resolved the rendering path. (stackoverflow.com)

Practical fixes (less brittle than in-file star-hacks): anchor the fixed box explicitly, or make the bar itself the fixed element and center it with a reliable centering trick. For example, if the site content is a fixed pixel width, the bar can be centered in a way IE7 understands:

#upperBarFixed {
  position: fixed;
  top: 0;
  left: 50%;
  width: 1200px;         /* match main content width */
  margin-left: -600px;   /* negative half the width */
  height: 38px;
  z-index: 1000;
}

That avoids depending on a full-width wrapper whose percentage width IE7 might miscalculate. If an IE-only tweak is still needed, use an IE conditional stylesheet/comment to give the element layout (for example zoom:1 or an explicit pixel width) rather than relying on parser hacks. ()

A quick correction for : 0px is valid CSS — the spec allows the unit to be omitted for a zero length but 0px is still legal. Using plain 0 is common and slightly shorter, but both are fine. (developer.mozilla.org)

Troubleshooting checklist: make sure the page runs in standards mode (missing/invalid DOCTYPE can make IE behave much worse), test the fixed bar outside of any complex parent containers to isolate the bug, and prefer an explicit centering approach or an IE-only rule via conditional comments over nonstandard parser hacks. Quirks/hasLayout interactions are the usual culprits when a fixed element is shifted in IE7. (developer.mozilla.org)

Recommended Answers

All 3 Replies

Member Avatar for 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.

Member Avatar for 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

Member Avatar for 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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.