View Full Version : <hr> Replacing

04-15-2005, 02:37 PM
I was reading up on styling <hr> elements today when I came across this page; http://www.sovavsiti.cz/css/hr.html
Basically, if you want to have a background-image for <hr> element you need to use a <div> with a 'hidden' hr in there for compatibility. Leaving you with:

<div class="hr"><hr /></div> Which is quite a bit of needless markup.
So, I was thinking if javascript could be used to replace the <hr /> to <div class="hr"><hr /></div>, I have manage to do some basic string replaces however I am not sure how to 'catch' the content of the <body> (eg for a field you would do document.getelementbyid('id_here).value) could anyone tell me how I would be able to get the contents of the body and replace <hr /> with <div class="hr"><hr /></div>?

Thanks for all of your help.

Harry Armadillo
04-15-2005, 05:17 PM
You probably only want to do the replacement in DOM-enabled browsers anyway, so something like this run onload should work.
function changeHR(){
if(!document.getElementsByTagName) return;
var d, h=document.getElementsByTagName('hr');

04-15-2005, 05:40 PM
First at all, I guess that your solution will not work for Moz, for IE only.

As a funny trial you may use for IE something like that:

<script type="text/JavaScript">
onload = function(){
var oHr = document.getElementsByTagName('hr');
for(var i=0;i<oHr.length;i++){
var newHr = document.createElement('div');
var someHr = document.createElement('hr');
var root = oHr[i].parentNode;

But, frankly said... Why to replace hr with an image... Why not use a div/span with background or something like that? It looks wasting of time to try something like that. (Well, waisting of time was also my time spending with the replacement code, but it was only for execrcise) So.. why do you need such e funny replacemant?

Harry Armadillo
04-15-2005, 05:56 PM
First at all, I guess that your solution will not work for Moz, for IE only.Speaking of my function? Actually, I did make a mistake (and edited the code above), but it worky just fine in Moz.

I chose not to give a replacement div its own hr, since idea is to use the div's styling.

04-15-2005, 06:02 PM
Nope, not your code... i was talking about the replacement... For me (at least my code) does not work for Moz (but no error is to be shown). Anyway, I consider the problem not a serious one, as trere are multiple graphical or CSS solution to avoid that replacenet... I don't get the ideea... If it is a site to be repaired, simply use, say, the Find/replace functions of any serious Editor...

Harry Armadillo
04-15-2005, 06:13 PM
Your code probably has the same mine did before I bothered to actually run it. :rolleyes: As you add/remove hr's, oHr is updated in unanticipated ways.

But, yeah, it's all silly. I guess if you insist on clean compact markup, maybe.

04-15-2005, 06:14 PM
Well, the reason for not using using a <div>/<span> for it is compatibility (older browsers which do not support the background-image div will display the <hr> and my page has close to 20 <hr>'s so it works out at less code to do it that way than just using <div class="hr"><hr></div> each time. Having the <hr> in the div also creates a better document structure. In the CSS the div.hr hr element has display: none in it, so that newer browsers do not display it.

04-18-2005, 10:58 AM
well, hm... <hr> (or similar) is used less and less (it looks a much too "baroque" piece of design). On the other hand old browsers are also fewer and fewer... In my oppinion it does not worth to waste your time with this problem. Use divs and forget about <hr>. If one in a million user will have and old browser, he will see no div, no hr... but he will be able to follow your content, which is the most important thing...