Member Avatar for jjbbooyy

Hello all,

I'm new to this website and I would consider my html skills standard, but any help with the following would be appreciated. I just finished a simple site for one of my clients, and uploaded a copy on my server to test out. I usually use Firefox, but when looking at it in IE I realize the rollover buttons are completely missing! Its weird because I use rollover buttons in almost all of my sites (using Dreamweaver) and this is the first time that this is happening with this browser.

Is there any reason for this? I really dislike IE personally, but I know I need to fix this error...

The site:

Jason

  • 2 Contributors
  • 2 Replies
  • 106 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by gate2net

Dani AI

Generated

This thread documents a common symptom: image-based hover states visible in one browser but absent in another. later found a local formatting issue, and echoed that such behavior is usually not an engine bug. The checklist below describes reliable ways to isolate why rollovers disappear in some browsers and how to make hover states more robust going forward.

A quick diagnostics checklist:

  • Image files and paths — confirm file names, extensions, and server-case sensitivity; open image URLs directly to verify.
  • HTML/CSS layout — inspect container sizes, positioning, overflow, and any unusual unit values that could push content off-canvas.
  • Stacking and positioning — verify z-index and that positioned parents do not hide children.
  • Document mode — ensure a standards DOCTYPE to avoid quirks-mode box-model differences.
  • JavaScript load order and errors — scripted preload or swap routines can fail if an earlier script throws an error.
  • Browser-specific quirks — older IE versions exhibit hasLayout issues and PNG alpha problems; simple fixes like triggering hasLayout (for legacy IE) or using sprites help.
  • Visual debugging — temporarily add borders/backgrounds or reduce the page to a minimal test case to reveal hidden elements.

A modern, resilient pattern replaces image-swap scripts with a sprite + CSS hover. Example:

.button {
  display:inline-block;
  width:120px;
  height:40px;
  background:url('/images/buttons-sprite.png') 0 0 no-repeat;
  text-indent:-9999px;
  overflow:hidden;
}
.button:hover {
  background-position:0 -40px;
}

This reduces HTTP requests and avoids reliance on onload ordering.

Small layout typos often create big symptoms, as this thread shows. A simple debug flow—open an image directly, toggle styles live, and reduce the page to a minimal example—quickly separates asset problems from layout/script problems. For long-term stability, prefer CSS-based hovers or sprites and keep rollovers isolated so they’re easier to test across browsers.

Member Avatar for jjbbooyy

.....problem fixed - I almost feel ashamed to say this, but after much tinkering I realize that my table was set at 744% instead of pixels, so the images were there, just waaaay off to the right. My web design prowess in action, its always the small errors that get me!

Member Avatar for gate2net

Hi
there's no bug at all
Anyway , getting traffic is not harder !
( than that)

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.