CSS styling for HR

[ArthurKay]

Is it possible to have more than one background image styled for an HR tag?

Currently, I have some code written like this (pseudo-code):

<div align="center">
  <img src="line.gif" style="height:1px; width:43%; vertical-align:middle;" />
  <img src="middle.gif" style="vertical-align:middle;" />
  <img src="line.gif" style="height:1px; width:43%; vertical-align:middle;" />
</div>

This displays three images pasted next to one another... the middle image is sandwhiched between two horizontal lines (gif images) which extend/contract based on the window size.

Is it possible to style this to do the same thing using an HR tag? This would be easier than doing an SSI INCLUDE call for this snippet of code.

[EAS]

Originally Posted by ArthurKay

Is it possible to have more than one background image styled for an HR tag?

Quite simply, No.

The css attribute "background-image" is included for the (x)html element "hr" in CSS 2.x, but browser support is not consistent. For example, IE and Opera (and some versions of Safari) will render a border around the hr, even if you set "border:none;" in the css.

I'm also not convinced that the code you posted would actually span the entire width of the viewport, since theoretically it only would do so when the width of the middle image equals 14% or more of the total viewport.

There is, however, a good way of achieving this effect with simple css. I will assume that, for stylistic reasons, the images are not just plain lines (in which case you'd be much better suited using divs with css borders for the outer two lines).

css:

#line {
	width:100%;  /* this is assumed if not specified, so you can omit this line if you want */
	height:1px;  /* set the height of the line container */
    vertical-align:middle;  /* this will cascade to the subordinate divs */
    margin:0;  /* necessary for < IE7 */
}
#line_left {
    width:49%;  /* we must account for IE's crappy box model */
    background:url('line.gif') repeat-x;
    float:left;
    z-index:1;
}
#line_right {
    width:49%;  /* we must account for IE's crappy box model */
    height:1px;
    background:url('line.gif') repeat-x;
    float:right;
    z-index:1;
}
#line_clearfloat {
    clear:both;
}
#line_middle {
    width:40px;  /* replace this value with the width of the actual image */
	height:1px;
	background:url('middle.gif') no-repeat;
    margin:auto;  /* this will center the image */
	margin-top:-1px;  /* this will place it on top of the lines above */
	_margin-top:-38px; /* hack for < IE7 */
    z-index:2;  /* this tells browsers to display this image on top of the other images */
}

(x)html:

<div id="line">
    <div id="line_left">&nbsp;</div>
    <div id="line_right">&nbsp;</div>
    <div id="line_clearfloat">&nbsp;</div>
</div>
<div id="line_middle">&nbsp;</div>

Since you were using the (x)html attribute "align," I will assume you're not interested in validating as XHTML Strict. If you are, however, you'll need to omit the _margin-top hack for IE, as the underscore hack will not pass css validation. If you'd like to achieve validation, delete the _margin-top line in the css and replace <div id="line_middle">&nbsp;</div> in the (x)html with the following:

(x)html:

<!--[if lte IE 6]><div style="margin-top:-38px;"><![endif]-->
    <div id="line_middle">&nbsp;</div>
<!--[if lte IE 6]></div<![endif]-->

If you'd like to use this multiple times on the same page, you can leave the css as it is and replace the attribute "id" with "class" in the (x)html.

Hope this is helpful.

[ArthurKay]

That's actually seems like more work than what I currently have.

Basically, a client of mine wants the ease of using an HR tag (which they can use as many times as they please) that gives the output of the code I originally posted.

I think I'm basically stuck creating a new image.. one that combines the three I'm currently using, and stick that as the background of an HR tag.

[speed]

As your main driving force seems to be making it easy for the client, then you can place hr tags within the page and use JavaScript to find and replace them with more complex HTML/CSS. The JavaScript is just run after the page loads.

This makes it easy to edit the content as they only have to deal with hr tags and maybe an optional class to select the style, but allows you to style it anyway you want.

The following JS placed at the end of the page just before </body> will replace all hr tags with <div class="myhr"></div>, you can obviously expand this to insert much more complex markup and so forth. I've only tested on Firefox and IE7:

<script type="text/javascript">
//<![CDATA[
		
var els = document.getElementsByTagName('hr');
for(var i=0; i < els.length; i++) {
	var t = document.createElement("div");
	t.className = 'myhr';
	els[i].parentNode.replaceChild(t, els[i]);
}

//]]>
</script>

I use a variation on this to do the black box on my home page.