0

I created a round CSS-button, which works great:

http://jsfiddle.net/y1eqmzhk/

HTML:

<div id="button" class="hide">
<ul class="nav">  
    <li><a class="icon-home" style="font-size:2em;"><i class="fa fa-search" style="position: absolute;top: 0.7em;left: 0.4em;"></i></a>
    </li>
</ul>
</div>

CSS:

#button {
    position: absolute;
    bottom: 5px;
    left: 0;
    z-index: 1;
    cursor: pointer;
}
.nav {
    list-style: none;
    text-align: center;
}

.nav li {
    position: relative;
    display: inline-block;
    margin-right: -4px;
}

.nav a {
    display: block;
    background-color: #f7f7f7;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#f7f7f7), to(#e7e7e7));
    background-image: -webkit-linear-gradient(top, #f7f7f7, #e7e7e7); 
    background-image: -moz-linear-gradient(top, #f7f7f7, #e7e7e7); 
    background-image: -ms-linear-gradient(top, #f7f7f7, #e7e7e7); 
    background-image: -o-linear-gradient(top, #f7f7f7, #e7e7e7); 
    color: #a7a7a7;
    width: 70px;
    height: 70px;
    position: relative;
    text-align: center;
    line-height: 70px;
    border-radius: 35px;
    behavior: url(css/PIE.php); 
    box-shadow: 0px 3px 8px #aaa, inset 0px 2px 3px #fff;
}

.nav li:before {
    content: "";
    display: block;
    #border-top: 1px solid #ddd;
    border-bottom: 1px solid #fff;
    width: 100%;
    height: 1px;
    position: absolute;
    top: 50%;
    z-index: -1;
}

.nav a:before {
    content: "";
    display: block;
    background: #fff;
    border-top: 2px solid #ddd;
    position: absolute;
    top: -18px;
    left: -18px;
    bottom: -18px;
    right: -18px;
    z-index: -1;
    border-radius: 50%;
    behavior: url(css/PIE.PHP);
    box-shadow: inset 0px 8px 48px #f5f5f5;
}

The problem is, that this button also has to work in IE8. I already tried PIE as you see in the CSS (behavior). I also tried the jquery.corner.js-plugin. But both don't work. Maybe CSS-before makes some problem??

user3142695
  • 15,844
  • 47
  • 176
  • 332
  • See this SO thread : http://stackoverflow.com/questions/17830372/how-to-apply-border-radius-in-ie8-and-below-ie8-browsers – sodawillow Jan 01 '15 at 19:31
  • I already read that thread and I tried Option 1 and Option 3 of the first answer. That doesn't work. But I don't know why... – user3142695 Jan 01 '15 at 19:56
  • Border-radius was not supported by IE8. If you must have rounded corners for IE8, you're sort of stuck with using transparent GIFs. See http://msdn.microsoft.com/en-us/library/ie/gg589503(v=vs.85).aspx#rounding_corners_with_older_versions_of_internet_explorer for more. – Lance Leonard Jan 02 '15 at 08:20

0 Answers0