Member Avatar for forzadraco

how to make a submit button with rollover image n that image use .png file that can't be render with IE6..?

  • 3 Contributors
  • 2 Replies
  • 121 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by macneato

Dani AI

Generated

Short answer for : make the button with real text inside a form control, use a CSS sprite or background-image swap for the rollover, and provide a simple IE6 fallback. ’s note about producing the artwork is fine, and was right to flag that old IE needs special handling — below are practical, copy-paste-ready options and tradeoffs.

Use a semantic button + CSS sprite (best for rollovers and no flicker):

<button type="submit" class="btn">Submit</button>
.btn {
  width: 140px;
  height: 40px;
  border: none;
  background: url('btn-sprite.png') no-repeat 0 0;
  text-indent: -9999px; /* keeps label for screen readers */
  overflow: hidden;
}
.btn:hover, .btn:focus { background-position: 0 -40px; }

If IE6 must be supported, keep the sprite for modern browsers and add a simple IE-only stylesheet (conditional comment) that swaps the background to a GIF or PNG‑8 fallback (these support 1-bit transparency in legacy IE). Example:

<!--[if lte IE 6]>
<link rel="stylesheet" href="ie6.css" />
<![endif]-->

ie6.css:

.btn { background-image: url('btn-fallback.gif'); }

If exact alpha blending is essential, the IE-only AlphaImageLoader filter can force PNG32 to render, but it breaks background-position, causes layout and caching oddities, and complicates hover states — use it only as a last resort.

Tips: preload hover artwork to avoid flicker (new Image().src='btn-hover.png'), keep visible text in the markup for accessibility, and test in a real IE6 VM if you must support it. If IE6 support is not strictly required, drop the hacks and keep the CSS sprite + PNG24 for clean, maintainable results.

Recommended Answers

All 2 Replies

Member Avatar for sreein1986

make in fireworks it's working rollover also

Member Avatar for macneato

Hi,

IE6 renders PNGs. Only doesn't support transparency. So you basically have two options:

1. Create your btn with the same background colour as the page.
2. Download a fix. Heres one I quickly googled.
IE PNG Fix v1.0 RC4

All the best

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.