Replacing HR tag element with images
We start with some nice clean code for all the "alternative" browsers:
This seems to work for all standards compliant modern browsers. I've tested it on Opera, Safari & Firefox. However, it does not work on Explorer. IE treats the element as inline and demands a border around it and a minimum height of 1px.
IE supports very basic generated content with the list-style-image setting when combined with display: list-item. This is what I've used to get around the limitations.
Add this into conditional comments (or hacks if you prefer) to shift the element out of the way and insert a bullet picture in the resulting space:
hr {
display : list-item;
list-style : url(hr.gif) inside;
filter : alpha(opacity=0);
width : 0;
}
0 comments:
Post a Comment