Ie Bug: Absolutely-Positioned Element with a Non-Transparent Background Colour

IE bug: absolutely-positioned element with a non-transparent background colour

Try using a transparent background image.

I would suggest using a 2x2 or bigger .gif that is all transparent pixels. Set it to repeat on x and y and IE shouldn't have an issue with the clicks.

background: transparent url(path/to/spacer.gif) repeat left top;
/* Not all of that is necessary, but I have a tendency to define it anyway. */

IE z-index trouble on element with transparent background

Internet Explorer does not play well with "empty" elements. By making the background: none and having no content, IE treats the top textarea as if it was not there.

To get around this, you can use a transparent png for the background instead:

background: url(/images/transparent.png) repeat scroll 0 0 transparent;

JSFiddle: http://jsfiddle.net/j8Gkd/

Edit

As suggested by @Ryan, you can use data URI to add a transaparent gif to the background, meaning you do not need to create an actual transparent png:

background: transparent 0 0 repeat scroll url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBR‌​AA7"); 

Another solution, as suggested in this answer, is to add a coloured background with full opacity:

background:white; filter:alpha(opacity=1);

IE doesn't recognize box with transparent background over an image

transparent in IE is really transparent, you can't see it, mouse can't see it, if there's underlying visible element.

Use a color for background and opacity: 0, and change opacity instead of background-color. A live demo at jsFiddle.

Absolute positioning error in Internet Explorer 11

try adding position:relative to the containing elements of div#corner, .container and/or .page-content

position:relative on a containing element sets the bounds of an absolutely positioned element equal to the parent element, rather than the whole page.

so a value of left:0px isn't equal to the top left side of the page, but the left side of the parent element.

It is somewhat surprising this only occurs in ie11 though as its a pretty straightforward issue which makes me suspect that there could easily be a secondary solution, but then again, having had to support IE since ~ie6 I guess I'm not really all that surprised if its just IE sucking.

absolute positioned anchor tag (with no text) not clickable in IE

I have had this exact problem before and it has always annoyed the hell out of me. I'm never sure why it happens, but I always create a 1px by 1px transparent PNG (or GIF) and use that in your background declaration like so:

a { background: url("/path/to/image.png") 0 0 repeat; }

Hope this helps.

PS - Don't specify any actual background colour with this. Just use the example above and it should work.

In addition to this, try and set your anchor tags to display as block and perhaps also insert a non-breaking space in them (since they are empty at the moment and that might be tripping IE up):

a { display: block; background: url("/path/to/image.png") 0 0 repeat; }

<a href="#"> </a>

IE 8 specifying background-color changes element behavior

The mouseenter and mouseleave are not registering until the cursor hits something visible. This is not correct behavior, but this is Explorer we're dealing with.

Two possible solutions:

1. Put a thin border on the DIV, one that matches whatever is behind it and won't be noticed. (This doesn't work; see the comments.)
2. Track mousemove events and have your code determine when the mouse has entered the area of interest.
3. (Added; see the comments.) Make your background a tiled transparent 1x1 image.

Both solutions are pretty much yuck, unfortunately.

Edit: Question: Do mouseover and mouseout show the same weird behavior?

IE CSS Bug: background-color: transparent behaves differently to background-color: (any other colour)

Try faking a background image or setting it to a blank.gif instead of making it transparent.

background:url(blank.gif);

See http://work.arounds.org/issue/22/positioned-anchor-not-clickable-ie6/

CSS opacity only to background color, not the text on it?

It sounds like you want to use a transparent background, in which case you could try using the rgba() function:

rgba(R, G, B, A)

R (red), G (green), and B (blue) can be either <integer>s or <percentage>s, where the number 255 corresponds to 100%. A (alpha) can be a <number> between 0 and 1, or a <percentage>, where the number 1 corresponds to 100% (full opacity).

RGBa example

background: rgba(51, 170, 51, .1)    /*  10% opaque green */ 
background: rgba(51, 170, 51, .4)    /*  40% opaque green */ 
background: rgba(51, 170, 51, .7)    /*  70% opaque green */ 
background: rgba(51, 170, 51,  1)    /* full opaque green */ 

A small example showing how rgba can be used.

As of 2018, practically every browser supports the rgba syntax.

IE bugs - background color and positioning

Which IE versions exhibit the problems?

1. As with many IE bugs, try giving layout to the elements with improperly rendered backgrounds.

2. When you don't specify the "left" property of an absolutely positioned element, IE rarely generates the value you want. According to the CSS 2.1 spec, "left" should be set to the static position, but the browser can guess this position so it's best to be explicit. The standard method is to give the menu items relative positioning to create a containing block for each submenu and set "top" and "left" for the submenus.

   .nav li {
       position: relative;
       /* note: don't set a box offset (e.g. "left") here */
   }
   .nav ul {
       position: absolute;
       top: 1em;
       left: 0;
   }
   

Using padding-box in combination with border-image adds unwanted thin-lines in Chrome

As it was confirmed by the Chromium Project Members, this is an actual browser bug, unfortunately not likely to be fixed soon:

Snapping issue we have had forever. Not likely to get action soon.

See bug report: https://bugs.chromium.org/p/chromium/issues/detail?id=1000600

---

As a possible workaround, it works to add a before pseudo-element having the size & color of the padding-box and a negative z-index so that it shows instead of the unwanted thin-lines, without covering the transparent border-image.

See jsfiddle: https://jsfiddle.net/chrisdevht/pL0qr946/

<div class="sidebar">
  <a href="" title="1"><span>1<br>1</span></a>
  <a href="" title="2"><span>2</span></a>
  <a href="" title="3"><span>3</span></a>
</div>

.sidebar a {
    /* everything else as before */
    position: relative;
}
.sidebar a span::before {
    content: '';
    background-color: #ff4c00;
    height: 100%;
    width: 100%;
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

---

Related Topics