CODEWITHSUNDEEP
htmlcss
David P
David P

Reputation: 2083

CSS Border/Outline With Outside Padding

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:

Picture of Desired Look

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?

Upvotes: 3

Views: 18390

Answers (3)

Turnip
Turnip

Reputation: 36632

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>

Upvotes: 4

Pickle_Jr
Pickle_Jr

Reputation: 95

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

Upvotes: 2

Ted Fitzpatrick
Ted Fitzpatrick

Reputation: 928

If the desired result is no white space surrounding the silver border, delete the line:

outline-offset: -10px;

Upvotes: 0

Related Questions