Member Avatar for Member #596162

I cannot figure out why I have a shadow around my image in IE and Opera. It's not a problem in Chrome, Apple, Firefox, Avant, Maxthon, Safari, etc. I've tried, outline, shadow, etc in an external stylesheet and directly inline.

http://i.imgur.com/rLPKHVs.jpg

Edited by Member #120589 because: Removed bbcode
  • 3 Contributors
  • 5 Replies
  • 341 Views
  • 6 Hours Discussion Span
  • Latest Post Latest Post by Member #596162

Dani AI

Generated

Good catch by — discovering Font Awesome as the source explains the behavior. Icon fonts render as text glyphs, not pixel images, so they inherit any text-related rendering (text-shadow, anti-aliasing/ ClearType differences, pseudo-elements) and can look different across engines (IE/older Opera vs Chrome/Firefox). 's PNG observation is also a valid general cause: bitmap icons with a white/incorrect matte or premultiplied-alpha issues will show a faint fringe in some browsers.

A focused troubleshooting routine (as suggested) is the fastest way to confirm the cause: use the browser dev tools, select the visible icon, and check the computed styles for text-shadow, box-shadow, filter or inherited rules on i, b, or ::before/::after. Toggle those properties off to see which one removes the halo. If the element is an image, inspect the file in an editor to confirm proper alpha/matte handling.

Quick fixes that are safe to try:

/* remove text/box shadows from Font Awesome icons */
.fa, .fa:before, .fa * {
  text-shadow: none !important;
  box-shadow: none !important;
}

/* basic image reset */
img {
  border: 0;
  outline: none;
  box-shadow: none;
}

Notes and best practices: prefer SVG icons for crisp, cross-browser rendering; avoid global text-shadow rules that catch icon elements; re-export PNGs with correct alpha (or use PNG-24 with a proper matte) if bitmaps are required. Use targeted selectors rather than broad !important whenever possible to keep styles maintainable.

Recommended Answers

All 5 Replies

Member Avatar for drjohn

How can we work out the problem without being able to see the web page???

Member Avatar for Member #596162

<h2>Register</h2>

<form action="reg-check.php" method="POST">

<input type="text" name="username" maxlength="25" minlength="8" placeholder="Username" /><br />
<p><input type="password" name="password" placeholder="Password" /></p>
<p><input type="password" name="password1" placeholder="Re-enter Password" /></p>
<p><input type="submit" name="submit" value="" /></p>

<p>
<!--[if !IE]><!-->
<b class="error"><?php if(isset($_GET['error'])){echo "<img src='m-images/error.png' width='15' height='15' /> ".$_GET['error'];} ?></b>
<b class="pos"><?php if(isset($_GET['pos'])){echo "<img src='m-images/check.png' width='15' height='15' /> ".$_GET['pos'];} ?></b>
<!--<![endif]-->

<!--[if IE]>
<b style="font-size:14px;font-family:arial;color:red;padding:5px;"><?php if(isset($_GET['error'])){echo "<img src='m-images/error.png' width='15' height='15' /> ".$_GET['error'];} ?></b>
<b style="font-size:14px;font-family:arial;color:green;padding:5px;"><?php if(isset($_GET['pos'])){echo "<img src='m-images/check.png' width='15' height='15' /> ".$_GET['pos'];} ?></b>
<![endif]-->
</p>


</form>
Member Avatar for JorgeM

Not all browsers render the same. I've experienced this type of issues before with .png image files.

Member Avatar for Member #596162

JorgeM, so you think maybe using a jpeg image will solve this issue? Or possibly a gif?

Edited by Member #596162 because: Added another image type.
Member Avatar for Member #596162

Never mind. I forgot all about font awesome. Makes life easier, I say.

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.