CODEWITHSUNDEEP
htmlcssinternet-explorer
Meep3D
Meep3D

Reputation: 3756

Removing the <hr /> border styling on IE

Why is it the simple things that IE manages to mess up the most? Anyway I want to replace a normal hr line with a single image a bit like the - § - symbol (on its side). Trying to make it look elegant :)

It appears the only way to actually get rid of the border in IE though is to set the color: css value. Doing this will override whatever is set as background-image unfortunately and make the whole hr the parameter for color.

It's not possible to wrap it in a div or even really apply a class to it as the client that will be using the site is using a wysiwyg text editor which I don't really relish hacking to insert a div wrapped hr.

I am one step away from adding a div block wrapper with jquery, but that seems fundamentally wrong (shotgun vs walnut) - any suggestions?

Upvotes: 17

Views: 35689

Answers (4)

Detect
Detect

Reputation: 2069

http://blog.neatlysliced.com/2008/03/hr-image-replacement/

<style type="text/css">
    hr {
       background: url(http://placekitten.com/800/100) no-repeat;
       border: 0;
       height: 100px;
       width: 100%;
    }
</style>
<!--[if IE 7]>
<style type="text/css">
    hr {
        display : list-item;
        list-style : url(http://placekitten.com/800/100) inside;
        filter : alpha(opacity=0);
        margin-left: -10px;
        width : 0;
    }
</style>
<![endif]-->

See it working here: jsFiddle

Upvotes: 28

Eugene Bulkin
Eugene Bulkin

Reputation: 1096

You could change the color of the border to transparent - I think that'll work, anyway.

Otherwise you should just use the image itself and scrap the <hr /> tag.

Upvotes: 1

Ryan Florence
Ryan Florence

Reputation: 13483

IE8, fortunately does things properly. So there is hope in 12 years.

If your background color is solid, just define the border as that color and it disappears.

Upvotes: 1

Peter
Peter

Reputation: 421

Well, you could just insert the image directly and not use an <hr /> tag. However, I'm fairly certain you can get rid of the offending border by just changing it to be the color of your background. I mean, it's not actually gone, but at least it's hiding:

hr{
   border: #XXXXXX;
}

Upvotes: 1

Related Questions