html - Remove border from image in Internet Explorer -
does know how remove light border border shown around glyphicon in internet explorer in example.in chrome not display.
alternatively use box-shadow
instead of border
:
.icon { text-align: center; position: relative; } .info { margin-top: -24px; background: hsla(0, 0%, 0%, 0.04); border: 1px solid hsl(0, 0%, 88%); padding: 15px 0 10px 0; } .image { position: relative; z-index: 2; margin: auto; width: 76px; height: 76px; /* border: 7px solid hsl(0, 100%, 100%); */ line-height: 76px; border-radius: 50%; background: hsl(126, 37%, 55%); vertical-align: middle; -webkit-box-shadow: 0 0 0 7px white; -moz-box-shadow: 0 0 0 7px white; box-shadow: 0 0 0 7px white; } .icon:hover .image { -webkit-box-shadow: 0 0 0 7px black; -moz-box-shadow: 0 0 0 7px black; box-shadow: 0 0 0 7px black; } .image .glyphicon { font-size: 38px; line-height: 1.33; color: white; }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> <div class="box"> <div class="icon"> <div class="image"><span class="glyphicon glyphicon-envelope btn-lg white"></span></div> <div class="info"> <h3 class="title">messages</h3> <p> 7 new messages on past 24 hours. </p> <div class="more"> <a href="#" title="title link"><i class="fa fa-plus"></i> details </a> </div> </div> </div> <div class="space"></div> </div>
Comments
Post a Comment