Member Avatar for secretply

Been doing a lot of research on this issue but I can't get it to work properly.

I have this CSS code that works in all browsers except for Internet Explorer.

border-top: 3px solid rgba(139, 0, 0, 1); background-color: rgba(139, 0, 0, 0.75); color: rgba(139, 0, 0, 0.75); text-shadow: -2px -2px 0 #FFFFFF, 2px -2px 0 #FFFFFF, -2px 2px 0 #FFFFFF, 2px 2px 0 #FFFFFF;

Basically what it does is the color of the text is the same as the background color so it is kind of "hidden" but text-shadow makes it somewhat like an outline that shows the outline of the text. Of course, everything has to work except for Internet Explorer since it does not support text-shadow. I tried using filters, dropshadow and shadow, to try to get the exact same result in Internet Explorer as it shows on the other browsers but the filters seem to apply to the entire div container instead of the text iself. Can somebody help me out on this? Thanks.

  • 3 Contributors
  • 7 Replies
  • 114 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by JorgeM

Dani AI

Generated

Brief, practical fallbacks that reproduce the “text filled with the background color, outlined in white” effect for versions of IE where a single text-shadow fallback doesn't behave as expected. Builds on ’s Glow suggestion and ’s note about the glow being drawn around the container when a gradient/background is on the same element.

  1. Keep the background separate and apply the IE filter only to the text node
  • Put the gradient/background on a sibling or a ::before layer and leave the text in its own inline element. That prevents IE filters from rasterizing the whole box and lets Glow target the glyphs.

Example HTML/CSS:

<div class="box">
  <span class="label">Hidden text</span>
</div>

.box { position:relative; }
.box::before { content:""; position:absolute; inset:0; z-index:0; background:linear-gradient(...); }
.label { position:relative; z-index:1; color:rgba(139,0,0,0.75);
  filter:progid:DXImageTransform.Microsoft.Glow(Color=#FFFFFF,Strength=3);
  -ms-filter:"progid:DXImageTransform.Microsoft.Glow(Color='#FFFFFF',Strength=3)"; }
  1. SVG text with stroke (best for IE9+)
  • Inline SVG supports stroke and stroke-width and yields crisp outlines independent of CSS shadow support.

Example:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 80">
  <text x="10" y="60" font-size="48" stroke="#fff" stroke-width="4"
        fill="rgba(139,0,0,0.75)" paint-order="stroke fill">Hidden</text>
</svg>
  1. DOM clones for very old IE (IE8 and earlier)
  • Create 3–4 absolutely positioned, aria-hidden text clones offset by +/-X/±Y to simulate an outline, with one top layer for the real (screen-reader) text. Works anywhere but costs DOM/maintenance.

Troubleshooting notes

Recommended Answers

All 7 Replies

Member Avatar for secretply

I've looked over those websites before. The closest filter to an outline is the Glow filter. Problem is, if I apply a background color, with some opacity, with a Gradient filter then the glow is applied on the border of the div container and not the text itself. Without the Gradient filter, the glow works on the text, even though it's nowhere near as good as text-shadow.

Member Avatar for Member #949455

I've looked over those websites before. The closest filter to an outline is the Glow filter. Problem is, if I apply a background color, with some opacity, with a Gradient filter then the glow is applied on the border of the div container and not the text itself. Without the Gradient filter, the glow works on the text, even though it's nowhere near as good as text-shadow.

Are you using CSS on IE or CSS3 on IE? There's a big differences. CSS3 doesn't work well on IE while CSS you need to adjusted it.

Member Avatar for secretply

CSS on IE. I have no CSS3 styling for what I'm trying to do.

Member Avatar for JorgeM

everything has to work except for Internet Explorer since it does not support text-shadow

as you mentioned in your first post... text-shadow is a CSS3 property not supported by IE.

Member Avatar for secretply

Sorry I wasn't clear, I meant that I'm not using CSS3 for getting this to style in Internet Explorer. I'm creating a conditional stylesheet that will use filters in place of the text-shadow property for Internet Explorer only. Anyways, I got something to work so there is no point in continuing this topic.

Member Avatar for JorgeM

got it... Ok, well glad you found a solution.

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.