I have now got our website online but I have noticed an issue with the hr.symbol that I use on some of the pages. The horizontal rule appears to work fine on all browsers apart from Internet Explorer. In Internet Explorer half of the image is missing, the line is pushed to the left and there is no break in the line.

Any suggestions on how to resolve this would be appreciated.

Our website is OwlTree Web Solutions

Don't use images in HR tags. A good way to create these dividing images is using a pseudo element with the image set as the background property. This will work on all modern browsers IE8 and up.

Thanks for your reply. How would I change my CSS to work as a pseudo element so that I can get the same look?

 

My current css is below:

 

hr.symbol {

width: 80%;

padding: 0;

border: none;

border-top: medium double #818181;

color: #006e0f;

text-align: center;

}

hr.symbol:after {

content: url(../images/symbol.png);

display: inline-block;

position: relative;

top: -1.0em;

font-size: 1.5em;

padding: 0 0.25em;

background: #f5f5f2;

text-align: center;

}