CSS: Outline-Offset Alternative for Ie

CSS: outline-offset alternative for IE?

Here are two solutions. The first is IE8+ compatible, utilizing pseudoelements. View it on JSFiddle here.

HTML:

<div class="box"></div>

CSS:

.box {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 100px;
    border: 2px solid green;
}
.box:after {
    content: "";
    position: absolute;
    top: -6px;
    left: -6px;
    display: block;
    width: 108px;
    height: 108px;
    border: 2px solid red;
}

​
The second idea I have is a non-semantic solution, but gives you IE6+ support. View it on JSFiddle here.

HTML:

<div class="outer-box"><div class="inner-box"></div></div>

​
CSS:

.outer-box {
    width: 104px;
    height: 104px;
    margin: 100px;
    border: 2px solid red;
    padding: 2px;
}
.inner-box {
    width: 100px;
    height: 100px;
    border: 2px solid green;
}

​
Oh woops, I just saw that you requested leaving just a single div. Well, that first solution fits those requirements!

Outline Offset substitute on IE

Here is an alternate for IE as shown in "http://css-tricks.com/"

Code:

<div class="inner-border">
    Transparent Inside Border
</div>

CSS

.inner-border {
    background: #000;
    color: #fff;
    margin: 50px;
    padding: 15px;
    position: relative;
}
.inner-border:before {
    border: 5px solid #000;
    content: "";
    position: absolute;
    top: -10px;
    bottom: -10px;
    left: -10px;
    right: -10px;
}

JSFiddle Demo of the Above Code

Here is another example of Transparent Inside Border:
http://jsfiddle.net/chriscoyier/DvaqK/4/

Hope this will help!

Internet Explorer Shows CSS issue with outline-offset

IE does not support outline-offset. And you should test it in opera too. becouse if i correctly remember Opera does not suppot negative values...

Creating a browser agnostic or IE alternate internal button border for focus? (accessibility related)

I was never able to find a solution like what I was looking for. Instead I ended up doing this:

box-shadow: 0 0 0 2px rgb(255, 255, 255),
0 0 0 4px rgb(0, 84, 164) !important;
outline: none !important;

Basically, you have to use a box shadow to mimic an outline, so I used two box shadows that match the colors/look of the button to create the same effect with an expansion of the button. This meets accessibility contrast requirements by sandwiching a color band in between the button and the outer band. As long as this inner band and the button are different enough in contrast, and the outer band matches the button, or another high contrast color.

Not really what I wanted, but there's not a lot (any) of other options that work in the context of this problem (older IE compatibility) unfortunately.

CSS Border/Outline With Outside Padding

outline-offset is not supported in Internet Explorer.

You could use a combination of outline and border to achieve the same effect.

Here border is used for the silver line and outline is used for the white space surrounding the element.

body {  background: #fffacf;  padding: 15px;}
.articleQuote {  background-color: #FFFFFF;  font-family: 'PT Sans', sans-serif;  font-size: 20px;  color: navy;  padding: 25px 25px 25px 25px;  outline-style: solid;  outline-color: white;  outline-width: 10px;  text-align: center;  border: 1px solid silver;}

<div class="articleQuote">  "80% of North Carolinians polled were in favor of legalizing medical marijuana in the state."</div>

border and outline overlapping in Internet Explorer

outline-offset is one of the methods to set outline outside of an element. But it is not supported well in Internet Explorer. But by using an alternative solution of pseudoelement you can achieve the desired result.

<div id="right" role="button" tabindex="0">
  <div class="rightcontent">
    test 
  </div>
</div> 

#right {
 height:39px;
 dispaly:inline;
 width:46px;
}

.rightcontent {
  padding: 10px;
  width:26px;
  height:18px;
  border-bottom :1px solid #000;
  position:relative;
}

.rightcontent::after {
  content: "";
  position: absolute;
  top: -2px;
  left: 0px;
  display: block;
  width: 46px;
  height: 41px;
  border: 1px solid red;
}

Here is the working Fiddle

CSS: increase the gap between the outline and border of div

Use outline-offset property — JSFiddle

CSS outline that includes margins

A solution could be to use an absolutely positionned pseudo element and apply a border to it on hover.

You can give the pseudo element top/bottom and left/right values that compensate the margins of the element :

div {  position: relative;  width: 150px;  margin: 10px 20px 30px 40px;  padding: 20px 40px;  background:gold;  z-index:1;}div:after {  content: '';  position: absolute;  top: -10px;  right: -20px;  bottom: -30px;  left: -40px;  box-sizing: border-box;  z-index:-1;}div:hover:after {  border: 1px solid green;}

<div>content <a href="#">link</a></div>

---

Related Topics