Member Avatar for canterorist

hi! please help how can i fade the border of my content. I use png file to fade. it only work with no-repeat in ie6 but no-problem in mozilla. Why is it repeat-y won't work in ie6 with the filter code? i use png file.

  • 4 Contributors
  • 6 Replies
  • 98 Views
  • 1 Month Discussion Span
  • Latest Post Latest Post by canterorist

Dani AI

Generated

reported the fade-border working only in some browsers; several replies suggested fixes. The key point is that older Internet Explorer rendering for alpha images and for proprietary filters behaves differently from modern browsers, so the simplest robust approach is to use CSS for modern browsers and a separate tiled edge for legacy browsers. Below are two practical, copy‑pasteable patterns plus quick troubleshooting tips.

Modern (recommended): use a pseudo-element with a CSS gradient so nothing needs to be tiled or PNG-processed.

.container { position:relative; background:#fff; }
.container::before {
  content:"";
  position:absolute;
  top:0; bottom:0; left:0; width:24px;
  pointer-events:none;
  background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,0.6));
  z-index:2;
}

Legacy fallback (works in very old browsers): place two absolutely positioned side elements and use a narrow repeating image for the vertical fade strip. This keeps the tiled part separate from any filter-based PNG handling.

<div class="box">
  <div class="fade-left"></div>
  <div class="content">Your content here</div>
  <div class="fade-right"></div>
</div>

.box { position:relative; }
.fade-left,.fade-right {
  position:absolute; top:0; bottom:0; width:24px;
  background:url(border-strip.gif) repeat-y;
}
.fade-left { left:0; }
.fade-right { right:0; }
.content { margin:0 24px; }

Troubleshooting notes: the IE alpha/image filter approach does not honor background-repeat, which explains the single (no-repeat) result you saw. If you must support very old IE, serve the tiled strip only to those browsers (conditional CSS or separate markup). For modern projects, prefer CSS gradients or masks—they avoid image fiddling and are easier to maintain.

Recommended Answers

All 6 Replies

Member Avatar for Arkinder

IE6 does not support the png format.

Regards, Arkinder

Member Avatar for Snowbell

maybe you can use ie6 png fix? google is your friend here, you'll find the script which shows pngs in IE6.

Member Avatar for canterorist

sorry for late reply. you are right the ie6 did not provide png. I search already in google but i found nothing. I only want is to use opacity in the border. How can i do that? please i need your advice. thanks in advance

Member Avatar for rizvihaider72

use a transparent gif instead

commented: gr8 solution +2
Member Avatar for canterorist

ok i will try your advice

Member Avatar for canterorist

how can i used transparent gif?

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.