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.
How can I get a cross-browser class set up that will produce the desired result?
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>
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
If the desired result is no white space surrounding the silver border, delete the line:
outline-offset: -10px;
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.