Pew Pew Laser Blog

Code. Glass art. Games. Baking. Cats. From Seattle, Washington and various sundry satellite locations.

Pew Pew Laser Blog Archives — by Blog ID

Fancy HRs with CSS.

10.25.2007

Lest you think that this blog is only about regular human activities, I present you with a CSS method for using graphics as your hr. My apologies to the regular humans.

Suppose you've got a lovely little graphic that you'd like to use for an HR in place of the boring old default straight line in most browsers. How do you implement your new graphic in a consistent and semantic method?

It's relatively simple to style a fancy HR in most browsers, including IE7:

<style type="text/css">
hr.fancy
  {	background: url(images/hr.gif) center center no-repeat;
	height: 20px;
	border: none;
	margin: 2em 7em;
	}
</style>

Here are the results:


Let us also speak of the 800 pound gorilla in the room. Internet Explorer 6, and presumably lower versions, will not display this correctly without assistance. You will need to add the following dandy patch by Borgar.

<!--[if lte IE 6]>
hr.fancy
  {	display: list-item;
	list-style: url(images/hr.gif) inside;
	filter: alpha(opacity=0);
	width: 0;
	}
</style>
<![endif]-->

Permalink

Tags: code css

Authorized users may log-in to leave a comment.

Last Blog: Poop Reduction Initiative.

Next Blog: Halloween Videos.