CSS fake HR with background image
I want to have a HR like background image. a 2 pixel wide gif file.
I looked into styling the HR tag, but too much browser issues..Used a 2px high div with the image as bg, but in IE6, there is a padding I can not seem to get rid of.
Any suggestions welcome!CSS:
.hr {
margin: 0; padding: 0;
height: 2px;
background-image: url('images/help-hr.gif');
background-repeat: repeat-x;
background-color: green; /* just to see the padding in IE6 */
}
HTML:
<p>sky</p>
<div class="hr"></div>
<p>grass</开发者_Go百科p>
Add overflow:hidden;
.hr {
margin: 0; padding: 0;
height: 2px;
background-image: url('images/help-hr.gif');
background-repeat: repeat-x;
background-color: green; /* just to see the padding in IE6 */
overflow:hidden;
}
I do not know the answer to the IE6 issue you're dealing with, but I had the same issue with using hr
and found a solution that worked for me:
hr {
background-color: #ccc;
border-width: 0;
color: #ccc;
height: 2px;
line-height: 0;
margin: -.5em 10px 1.8571em 10px;
page-break-after: always;
text-align: center;
width: 80%;
}
hr:after {
content: "\a7\a7";
font-size: 1.25em;
}
精彩评论