Hey everyone, I'm facing a compatibility issue with CSS and Firefox today. When I go to my website www.fashoop.com, you'll notice some header lines on the sides. Here's an example in Google Chrome:
(GOOGLE CHROME EXAMPLE)
COLOR BLUE AND COLOR CYAN
------------TITLE----------------
The effect works fine in Google Chrome, but when I switch to Firefox, one side of the line disappears and gets replaced with dots like this:
(FIREFOX EXAMPLE)
COLOR BLUE AND COLOR CYAN
------------TITLE....
Does anyone know why this happens in Firefox? I'd really appreciate some help! Here's the link to my website: www.fashoop.com. Thanks!
CODE:
span.section-title{
position: relative;
overflow: hidden;
white-space: nowrap;
text-align: center;
text-overflow: ellipsis;
font: 1.6em/1.1 Georgia;
padding: .2em 0;
}
span.section-title:before,
span.section-title:after {
content: "";
position: relative;
display: inline-block;
width: 50%;
height: 2px;
vertical-align: middle;
background: #000;
}
span.section-title:before {
left: -.5em;
margin: 0 0 0 -50%;
background: #ef387a;
}
span.section-title:after {
left: .5em;
margin: 0 -50% 0 0;
background: #1c77bd;
}