add <div> before each hr element

[Chad Meyers]

I have the the folowing html

<p> .... </p>

<p> .... </p>

<hr />

<p> .... </p>

<hr />

<p> .... </p>

<p> .... </p>

and inside the <p>'s there are floated images, and they are messing with the margin set on the <hr />'s  I can fix this by adding a simple <div class="clear"></div> before each <hr />.

I can't seem to figure out how.  I have tried element.inject,replace,grab but none seem to work for me.  any help?

I thought something like this;

var clearDiv = new Element('div.clear');

$$('hr').inject(clearDiv, 'top')

Why? think WYSIWYG client input. ['what's a div?']

[Philip Thompson]

<hr/> is not a block-level element, so I don't believe you can insert a div at the "top" of the <hr/>. You could add it "before" the <hr/> though. Why don't you just add some CSS to your <hr/>:

hr {

    clear: both;

}

Or I also think you can add some CSS to your paragraphs (which I think will fix the floating problem):

p {

    overflow: auto;

}

Why? think WYSIWYG client input. ['what's a div?']

No clue what you're asking here.

Cheers,

~Philip

[Chad Meyers]

I was hoping to do it via css, but see no option.

css is

hr {

margin: 2em 0px;

clear: both;

}

The problem I have is that, the <img> inside the <p> is floated left or right, and hangs below the <p> So the <hr> sites against the <img> not 2em below.

the actual page in question is this one http://www.snairbrothershotrods.ca/currentProjects.php

This page content is generated by the client through a WYSIWYG editor (CKEditor) and inserting <div>'s is beyond their capability.

[Steve Onnis]

If your images are floated but your <p> tags are not then you will always have trouble. You need to float your <p> tags also and everything else should come into line

[Chad Meyers]

I don't think thats quite right either.  Thank for the help.  In the end, I just edited the source files of CKEditor so when you insert an <hr /> element, it will insert the div before.  It's a bit of a hack but it works.

[Philip Thompson]

Instead of hacking it, try a non-hackable, CSS (but sorta hackish =D) solution:

http://www.quirksmode.org/css/clearing.html 

~Philip

[Chad Meyers]

OK, I am not happy with my hack of CKEditor.  I would like to come back to replacing (or adding to) the hr elements on the page.

Can MooTools not just find each <hr /> and replace it with "<div class="clear"></div><hr />" even if I had to wrap the element like <div class="hrClear"><hr /></div>

I put together a fiddle with what I currently have.  The catch is you can not edit the html, as it is being generated by the client via a WYSIWYG editor. So the solution has to be css and/or javascript.

The goal, always keep a 2em margin above and below the HR, whether the text wraps passed the floated image or not.

http://jsfiddle.net/8ACRP/

[Sanford Whiteman]

http://jsfiddle.net/8ACRP/3/ ...?

-- S.

[Chad Meyers]

I tried that too, but if you have multiple paragraphs you run into trouble.

http://jsfiddle.net/8ACRP/4/

[Sanford Whiteman]

> I tried that too, but if you have multiple paragraphs you run into trouble.

> http://jsfiddle.net/8ACRP/4/

No trouble at all.

http://jsfiddle.net/8ACRP/5/

I can't account for every possible markup variation, though, there
have to be known expectations.

-- S.

[Chad Meyers]

Sanford Whiteman, You are my hero!!! I can't thank you enough.  I have never seen that type of css selector (googling now)

[Sanford Whiteman]

> Sanford Whiteman, You are my hero!!! I can't thank you enough. I have
> never seen that type of css selector (googling now)

Happy to help, have fun!