Member Avatar for SandieL

Links that are behind images view fine in IE, however, they showup beside hotspots, and under images in drop down menu bar when viewing in chrome, safari & firefox.
Here is a link to the page:
http://artscouncil.ky.gov/indexmenutest.htm
views fine in IE so look there first.

Yikes, site supposed to launch on Aug. 1. Any help would be most appreciated.

Thanks,
Sandie

  • 3 Contributors
  • 2 Replies
  • 107 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by luceduce

Dani AI

Generated

This kind of symptom usually comes from stacking/overlap rules in the CSS rather than a browser bug. was right to push for cleaning the markup, and was on the right track with the z-index idea — below are focused, practical diagnostics and quick fixes to try before the Aug. 1 launch mentioned by .

Use the browser inspector (Chrome/Firefox): inspect the problem area, hover parent elements in the DOM to see which element is actually on top, then check the computed styles for position, z-index, and any transform/opacity on ancestors (those create new stacking contexts and change how z-index behaves). Also verify whether the anchor is inline text (small hit area) or a block-level element that can be sized to match the hotspot.

Try these immediate fixes (adjust selectors to match your markup):

/* make the link sit above overlapping graphics */
a.hotspot {
  position: relative;
  display: inline-block;
  z-index: 9999;
}

/* let decorative images ignore mouse events so links beneath are clickable */
img.decorative { pointer-events: none; }

If the hotspot should cover the whole image, wrap them in a positioned container and add a full-size overlay link:

.container { position: relative; display: inline-block; }
.container img { display: block; }
.container a.full-link {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 10;
  /* keep visible text accessible via ARIA or visually-hidden CSS */
}

If these fixes don’t work, look for any ancestor with transform, opacity < 1, or a new stacking context. Read more about stacking and z-index behavior here: z-index on MDN and stacking context explainer (CSS-Tricks).

Recommended Answers

All 2 Replies

Member Avatar for Arkinder

Never, ever, use any version of Internet Explorer as a test browser. It is 8+ years behind web standards, and this is exactly what happens when you do. You're also using tables for layout, which is an outdated technique from 1996. Firefox, Safari, and Chrome are only displaying what you told them too.

The first thing you need to do is put a real doctype in your page.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

You have a lot of deprecated markup and attributes. After adding it validate your HTML and CSS. Once those are fixed, view the page in Firefox and post back here.

Regards
Arkinder

Member Avatar for luceduce

Try this:

<tr>
<td align="bottom" style="z-index: 1; position: absolute; right: 50px; bottom: 50px;">
<img height="153" align="absbottom" width="25" alt="Follow Us" src="home/graphics/followus.jpg">
</td>
<td align="left" valign="TOP" style="height: 153px; bottom: 50px; right: 15px; position: absolute;">

L.

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.