Member Avatar for Siberian

I'm asking outside from where I usually ask I have a page that the <a> links are not working in IE 6 and IE 7, I also have one other minor problem but I won't surface it until hopefully I solve my main problem.

  • 2 Contributors
  • 2 Replies
  • 76 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Siberian

Dani AI

Generated

As noted, fixing basic HTML syntax is important. Now that has the anchor issue resolved and reports images being hidden behind a div, the symptom points to stacking/positioning behavior in IE6/7. Those browsers handle stacking contexts and the old "hasLayout" concept differently than modern engines, so z-index on a child can be trapped by its positioned ancestor.

Quick troubleshooting and fixes to try:

  • Add temporary outlines to identify the covering element and the image container.
.covering-div { outline: 2px solid red; }
.image-container { outline: 2px solid blue; }
  • Ensure the element that must sit on top is positioned and has a larger z-index than the covering div:
.image-on-top { position: relative; z-index: 1000; }
  • If that still fails in IE6/7, trigger hasLayout on the relevant element (or its parent). A common approach is an IE-only rule (conditional comments) or zoom:1 in an IE stylesheet:
<!--[if lt IE 8]>
<style>
.image-on-top, .image-parent { zoom: 1; position: relative; z-index: 1000; }
</style>
<![endif]-->

If none of the above works, move the image out of the offending stacking context (place it later in the DOM, or append it to body and absolutely position it). Test with small z-index values first; avoid arbitrarily large numbers. For long-term maintenance, consider whether IE6/7 support is required, since many layout hacks are only needed for those legacy browsers.

Recommended Answers

All 2 Replies

Member Avatar for Upsilon

Do you have the href element in double quotes, such as <a href="http://www.google.com/">Google</a>, also spaces in the address should be escaped using %20

Member Avatar for Siberian

I have that problem fixed that now is taken care of my problem is my images are being hidden behind my <div>

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.