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?']

On Thu, Jun 7, 2012 at 9:09 AM, Chad Meyers <starlingdesig...@gmail.com>wrote:

<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

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.

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

From: Chad Meyers [mailto:starlingdesig...@gmail.com]
Sent: Friday, 8 June 2012 12:44 AM
To: mootools-users@googlegroups.com
Subject: [Moo] Re: add <div> before each hr element

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.

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.

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

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

~Philip

On Thu, Jun 7, 2012 at 10:33 AM, Chad Meyers <starlingdesig...@gmail.com>wrote:

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/

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

-- S.

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.

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!