CSS3 - Horizontal Rule not showing up in IE

HTML & CSS
1

Hello,

I have a small issue with a horizontal rule which won’t show up in Internet Explorer.

I was wondering what workaround I have to do to get this working?

I have the styling appear on Safari, Chrome, Firefox etc, but not IE.

This is my CSS for the HR:


hr.split {
border: 0;
height: 1px;
background-image: -webkit-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,.75), rgba(255,255,255,0));
background-image: -moz-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,0.75), rgba(255,255,255,0));
background-image: -ms-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,0.75), rgba(255,255,255,0));
background-image: -o-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,0.75), rgba(255,255,255,0));
background-image: linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,0.75), rgba(255,255,255,0));
margin-bottom:30px;
}

Any help is appreciated as always :slight_smile:

2

This is a really old article but it may help; http://www.sovavsiti.cz/css/hr.html

I imagine using something like that with a few conditional comments or jQuery would be a decent solution.

3

I’d rather set it default to a thin white line (if not supported) in the same style sheet as opposed to using conditional style sheets
:confused:

4

Whatever your aversion to them is, I didn’t say anything about conditional style sheets.

5

There is also nothing wrong with setting it to a thin white line for IE.

6

I dont disagree, I am just wondering how I make the HR work in IE when it cant pick up this.

I set this in my header

<!--[if IE ]>
        <link rel="stylesheet" type="text/css" href="css/hr.css" />
<![endif]-->

and then inside that I added:

hr.split
{
border: 0;
height: 1px;
color:#ccc;
margin-bottom:30px;
}

Still wont show up

7

I’d lean more toward the technique on the link I posted.

I’d run you some code but I’m convalescing from surgery and typing on my junky phone. :stuck_out_tongue:

Hmmm. Can I see a live link? If I can sit at the computer later I’ll see about showing you my idea. :slight_smile: PM me if you can’t post a link in the open.

8

IE uses background instead of color on the HR for some reason. You can also use an invalid IE-only filter in the css:

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#cccccc', endColorstr='#000000'); /* for IE */

Does that help?

9

Hi I am only seeing this now, it does indeed!

Thanks very much :slight_smile: