Member Avatar for franko75

Hi, at the end of my tether once again with IE6 - on this occasion I've got loads of pngs on the site i'm working on which i thought i'd fixed for IE6 using the DD belated PNG fix, which has worked almost perfectly but not quite!

I now have the following issues in IE6 which I'm struggling to fix:

On the homepage, I have a swf which should overlap the quicklinks directly below it. Instead, the quicklinks are pushed further down the page. This works perfectly in IE7, FF, Safari - so i think my z-indexes are set correctly and I don't know how to alter them specifically for IE6 to behave?

Also on the homepage, you can see that underneath the What's On and Special Offers quicklinks near the bottom of the page, there is a slight tiling effect. The png fix script is creating an element 277px high for some reason, which is causing the extra tiling. It's strange that I don't have this issue with the other quicklinks, e.g Weddings, Corporate etc. Hopefully this can be fixed with CSS, otherwise i'll need to look more into the JS which is causing it.

The site can be viewed .

If anyone can help that would be great!

  • 4 Contributors
  • 4 Replies
  • 127 Views
  • 6 Days Discussion Span
  • Latest Post Latest Post by MidiMagic

Dani AI

Generated

A few focused notes that expand on the thread and give concrete debugging steps for the IE6 PNG + z-index symptoms described. The interaction between IE6’s stacking rules and PNG-replacement techniques is usually the root cause: the replacement (filter/VML) can create a new element or change how the image is laid out, and IE6’s stacking/hasLayout rules then change how z-index behaves. That combination explains both an injected/tiled block and an element that refuses to sit above the Flash.

Practical troubleshooting checklist (fast to try, in order):

  • Inspect the DOM in IE6 (IE Developer Toolbar or view source) to find any injected elements and their computed sizes.
  • Force the replaced image/container to behave like a block-level element and remove text-baseline spacing.
  • Ensure explicit width/height on the element so the replacement doesn’t inherit unexpected sizing.
  • Trigger hasLayout on containers involved in stacking so z-index behaves more predictably.
  • If the PNG-replacement is applied site-wide, exclude the elements that overlap dynamic content and apply the fix only where needed.

Example CSS snippets to try in an IE6-only stylesheet:

.png-replace { display:block; width:/*image width*/; height:/*image height*/; line-height:0; font-size:0; background-repeat:no-repeat; }
#flash-wrap, .overlay { zoom:1; position:relative; z-index:50; }

About the Flash overlap: as suggested, making Flash windowless fixes many stacking conflicts, but it has trade-offs (performance, focus/keyboard behavior). Make sure any windowless setting is applied consistently to all embed/object markup, and test interactions in IE6 after that change.

Final tips: if a PNG-fix still injects awkward markup, selectively disable it for problem selectors or use a GIF fallback for decorative assets. Document the IE6-specific tweak (conditional stylesheet) so future maintenance is easier — as requested, sharing the final, minimal change helps others. Thanks also to for the reminder that z-index in IE6 is a special case to handle deliberately.

Member Avatar for peter_budo

If you did found solution, would you mind to share it with community? In doing so you may help somebody with similar problem in the future...

Member Avatar for wickedsunny

hey for the swfs in ur html code find the paramaters code and add a parameter of wmode=transparent. or simply open in dreamweaver click your swf and from the parameters in properters ad a new one. name is wmode and value is transparent. problem fixed.
regards

Member Avatar for franko75

If you did found solution, would you mind to share it with community? In doing so you may help somebody with similar problem in the future...

Yeah I would normally post the solution, on this occasion the tiling issue just disappeared, so i have no idea what was happening there! The other issue was just a simple case of IE6 requiring a different negative margin for the quicklink buttons to sit underneath the swfs.

Member Avatar for MidiMagic

Z index is not implemented correctly in IE 6. It is buggy.

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.