CSS Border/Outline With Outside Padding - html

Question

I am trying to create a reusable div css class that I can use to highlight quotes in articles I am writing on my campaign website. When debugging in Visual Studio using Chrome (or Firefox) I get the desired result:
As you can see there is a silver border, but padding around it.
My CSS class is:
.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: silver;
outline-width: 1px;
outline-offset: -10px;
text-align: center;
}
However, in Internet Explorer no padding on the border occurs. Seems like outline-offset is ignored.
Link to article on my website
How can I get a cross-browser class set up that will produce the desired result?

Answer 1

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>
Another option is to use box-shadow instead of border or outline. This allows you to have as many "borders" as you like.
body {
background: #e6e6e6;
padding: 15px;
}
.articleQuote {
background-color: #FFFFFF;
font-family: 'PT Sans', sans-serif;
font-size: 20px;
color: navy;
padding: 25px 25px 25px 25px;
text-align: center;
margin: 30px 0;
box-shadow: 0 0 0 1px silver,
0 0 0 10px white;
}
.crazy-border {
margin: 50px 10px;
box-shadow: 0 0 0 2px red,
0 0 0 4px white,
0 0 0 6px orange,
0 0 0 8px white,
0 0 0 10px gold,
0 0 0 12px white,
0 0 0 14px green,
0 0 0 16px white,
0 0 0 18px blue,
0 0 0 20px white,
0 0 0 22px purple;
}
<div class="articleQuote">
"80% of North Carolinians polled were in favor of legalizing medical marijuana in the state."
</div>
<div class="articleQuote crazy-border">
"80% of North Carolinians polled were in favor of legalizing medical marijuana in the state."
</div>

Answer 2

Try nested divs.
HTML:
<div class="article-quote-outer">
<div class="article-quote-inner">
{text goes here}
</div>
</div>
CSS:
.article-quote-outer {
padding: 12px;
background-color: white;
}
.article-quote-inner {
border: 1px solid silver;
padding: 15px;
}
Example:
JSFIDDLE

Answer 3

If the desired result is no white space surrounding the silver border, delete the line:
outline-offset: -10px;