CODEWITHSUNDEEP
csssafari
Magearlik
Magearlik

Reputation: 523

How do I get this CSS to work in safari

I am currently testing some CSS in different web browsers. This all works great except in Safari 5.1.7. I am testing this fiddle . Does anyone know how I can fix this, because I would like to use it in a website.

The css is supposed to display a heading with a colored line either side.

Here is the code:

[HTML]

<h1>This is my Title</h1>
<h1>Another Similar Title</h1>
<div class="color"><h1>Just Title</h1></div>

[CSS]

h1 {
    position: relative;
    font-size: 30px;
    z-index: 1;
    overflow: hidden;
    text-align: center;
}
h1:before, h1:after {
    position: absolute;
    top: 51%;
    overflow: hidden;
    width: 50%;
    height: 1px;
    content: '\a0';
    background-color: red;
}
h1:before {
    margin-left: -50%;
    text-align: right;
}
.color {
    background-color: #ccc;
}

Upvotes: 1

Views: 64

Answers (1)

Mohammad Usman
Mohammad Usman

Reputation: 39392

Better use one element inside h1 and use :before and :after with left and right properties. This will work in most of the browsers including Safari.

h1 {
  overflow: hidden;
  font-size: 30px;
  text-align: center;
}
h1 span {
  display: inline-block;
  vertical-align: top;
  position: relative;
  padding: 0 5px;
}
h1 span:before, h1 span:after {
  background-color: red;
  position: absolute;
  margin-top: -1px;
  width: 9999px;
  top: 50%;
  height: 1px;
  content: '\a0';
  left: 100%;
}
h1 span:before {
  left: auto;
  right: 100%;
}
.color {
  background-color: #ccc;
}
<h1><span>This is my Title</span></h1>
<h1><span>Another Similar Title</span></h1>
<div class="color">
  <h1><span>Just Title</span></h1>
</div>

Upvotes: 1

Related Questions