CSS Problem - Link (Position:Absolute) Above a Box Not Work in Ie + Opera

CSS Problem - Link (position:absolute) above a Box not work in IE + Opera

It looks like bug in Opera and IE.

There is my hack for Opera and IE9. Add this for .link
background-color: rgba(204,204,204,0.01);

It is very transparent background.

http://jsfiddle.net/UpwvT/19/

It doesn't work in IE8.

Absolute positioning bug in Internet Explorer 11

Just changed table-row to table-cell. Now it looks the same in IE and Chrome:

/* CSS Document */body {background-image: url('obrazky/pozadi.svg');background-size: 100% auto;background-color: #000;background-repeat: no-repeat;}#container1 {margin: 0px auto;width: 1020px;}#container2 {background-color: rgba(255, 255, 255, 0.9);width: 890px;height: 340px;border: 15px solid #000;border-radius: 30px;padding: 30px;margin: 20px;-webkit-box-shadow: 0px 0px 20px 10px rgba(170, 170, 170, 0.8), 10px 10px 10px #ddd inset;-moz-box-shadow: 0px 0px 20px 10px rgba(170, 170, 170, 0.8), 10px 10px 10px #ddd inset;box-shadow: 0px 0px 20px 10px rgba(170, 170, 170, 0.8), 10px 10px 10px #ddd inset;display: table;}#obrazek {float: left;position: relative;width: 340px;display: table-cell;border: 3px solid green;}.obrazek {width: 340px;height: 427px;}#hrob {position: absolute;width: 220px;height: 300px;left: 75px;top: 70px;text-align: center;border: 3px solid red;}.napis {text-shadow: 0px 1px 0px rgba(255,255,255,.3), 0px -1px 0px rgba(0,0,0,.7);color: #4a4a4a;}.pismo42 {font-size: 42px;}.pismo24 {font-size: 24px;}

<div id="container1">  <div id="container2">    <div id="obrazek">      <img src="obrazky/hrob.svg" alt="Obrázek hrobu" class="obrazek" />      <div id="hrob">        <p class="napis pismo42">Username</p>        <p class="napis pismo24">Text under the name</p>      </div>      <p>text...</p>    </div>  </div></div>

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.

Link over whole div is not working when cursor is over contained text in IE

I have a solution for you. In HTML5 it would be valid to use <div>'s inside of an <a> tag. But since you cannot change your language and HTML4.01 does not allow block elements inside of an <a> I would suggest faking it. By that I mean use <span>'s inside of the <a> tag instead and style them to act as a <div>. Here is a working example: http://jsfiddle.net/DzpjT/11/

HTML:

<body>
    <a href="http://www.google.com">
        <span class="fakediv">Annoying text la lallalalalalalalalal</span>
        <span class="fakediv">Annoying text la lallalalalalalalalal</span>
    </a>
</body>

CSS:

a{
    display: block;
    width:700px;
    height:500px;
    margin: 10px;
    background-color: lightblue;
    color: black;
    text-decoration: none;
}
span.fakediv{
    float:left;
    clear: both;
    display: block;
    margin: 10px 20px;
    cursor: pointer;
}

IE z-index relative/absolute bug in list

Here's a very good article that explains the stacking issues that machineghost mentions.

http://css-discuss.incutio.com/wiki/Overlapping_And_ZIndex

What you might want to consider (depending on why you're wanting the positioning on multiple elements) is adding a hover selector to .base (use JavaScript for IE6) that adds the class to give it relativity.

.base:hover{position:relative;}

This then means that the second .base doesn't have position: relative.

Fix CSS Shadow Issue in Interner Explorer

You can get CSS to test whether filter is supported by the browser in modern browsers. @support isn't supported in IE so it just ignores the setting of the background to black so it's there but not seen.

Here's an example snippet - obviously hasn't got all the right sizing that your code will have.

<style>
  .service_group {}
  
  .uk-box-shadow-bottom {
    position: relative;
  }
  
  .service_group:hover .uk-box-shadow-bottom:before {
    content: '';
    position: absolute;
    bottom: -20px;
    left: 0;
    right: 0;
    height: 20px;
    border-radius: 100%;
    /*background: #000;*/
    /*filter: blur(20px);*/
    height: 40px;
  }
  
  @supports (filter: blur()) {
    .service_group:hover .uk-box-shadow-bottom:before {
      background: #000;
      filter: blur(20px);
    }
  }
</style>
<div class="service_group">Just some info so I can hover
  <div class="uk-box-shadow-bottom"></div>
</div>

CSS Problem - Link (Position:Absolute) Above a Box Not Work in Ie + Opera