Member Avatar for forumhound

Namaste from Nepal everyone! First time caller here with a question I am working on an interface for a client in America that is built using myfaces, and I am having a heck of a time getting things to look the same in IE and all the other browsers out there. It seems that IE 6/7 behaves different when handling the CSS for the icons on this page:

Can someone please help me get this right?
Thanks!!!!
FD

  • 2 Contributors
  • 3 Replies
  • 91 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by forumhound

Dani AI

Generated

: the mismatch between Firefox and IE6/7 is almost always about stacking context and positioning, not a mysterious z-index engine bug. Browsers apply z-index only to positioned elements (position other than static), and nested positioned ancestors create independent stacking contexts that affect how children overlay one another. was on the right track about nesting and table cell alignment — those are the places to look first.

A short checklist to diagnose and fix:

  • Ensure a standards DOCTYPE so IE is not in quirks mode.
  • Verify the element that must sit on top is position: absolute or relative, and that its nearest ancestor you expect it to escape from is not unintentionally creating its own stacking context.
  • If the icon is inside a table cell, make the td a positioned container (position: relative) and anchor the icon inside it.
  • For IE6/7, trigger hasLayout on the ancestor when things refuse to behave (zoom: 1 or an explicit width/height).
  • Avoid putting z-index on non-positioned elements; prefer setting position/z-index on the element you want to control.

Example pattern that fixes most cases:

.icon-wrap { position: relative; zoom: 1; } /* ancestor */
.icon      { position: absolute; top: 4px; right: 4px; z-index: 100; } /* the overlay */

Debugging tips: create a minimal standalone HTML file that reproduces the problem, toggle position/z-index on ancestors, and add temporary backgrounds/borders to reveal stacking contexts. For background reading on stacking rules and IE quirks, see the MDN explanation of z-index and QuirksMode�s notes on z-index differences (MDN z-index, ).

Recommended Answers

All 3 Replies

Member Avatar for MidiMagic

There are some tricks (mostly things to avoid):

- DON'T put size attributes (height and width) and surrounding styles (margin, border, padding) in the same tag, whether done inline or css. Instead, nest two objects, one for the size, and one for the surrounding styles.

- Define the vertical alignment for table cells. IE has a different default.

- Don't use surrounding styles on heading (H1, H2, etc) tags and HR. They do totally different things in IE.

- The fonts render heavier in IE.

- List tags do not work right in IE inside a div. They do work inside a table.

Member Avatar for forumhound

There are some tricks (mostly things to avoid):

- DON'T put size attributes (height and width) and surrounding styles (margin, border, padding) in the same tag, whether done inline or css. Instead, nest two objects, one for the size, and one for the surrounding styles.

- Define the vertical alignment for table cells. IE has a different default.

- Don't use surrounding styles on heading (H1, H2, etc) tags and HR. They do totally different things in IE.

- The fonts render heavier in IE.

- List tags do not work right in IE inside a div. They do work inside a table.

thanks magic for that, but i have isolated the problem (not a z-index) and here is the failing code:

can u have a look and tell me what to change? thx...
ps. the desired look is with FF. This snippet goes inside a complex JSF page, but if I can't get this snippet to work right, there is no point. thx....

Member Avatar for forumhound

Arg, starting to lose i over this:

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.