I'm unable to make use of -moz-column-width as I'd like. (With Firefox.)

When I edit a post and put <div style="-moz-column-width> at the beginning, every column is exactly the same height, give or take a single line for required formatting. But when I do it by applying the same CSS to BODY Box, the right-most column is never the same height as the others, sometimes even being completely blank while there are 5+ lines of text in the other columns.

Looking at the source for a rendered page, I'm unable to tell what could be causing this discrepancy...

What version of atahualpa and wp?
What is the URL pointing at the issue?

If you use 'body....' in the CSS inserts, you are applying it to the entire body

What is the exact CSS you are using?

WordPress 3.0.4 / Atahualpa 3.6.4.

The CSS is "-moz-column-width: 30em; -moz-column-gap: 15px"

If I put that into the Atahualpa BODY Box, the results are quite different than if I manually add it as a <div style="-moz-column-width: 30em; -moz-column-gap: 15px">...</a> block surrounding (and within) the text of an actual post.

I tried looking into hacking the Atahualpa php code to insert a custom div that would surround the post text, and then doing a CSS insert for that, but even though I changed several instances of <div class="post-bodycopy clearfix"> ... </div> to <div class="post-bodycopy clearfix"><div class="custom-bodycopy"> ... </div></div>" that didn't result in the source changing when I looked at it afterward. I must have missed something, and didn't get to the point where I could test putting my CSS insert into the "custom-bodycopy" class.

(I suspect, though, that this must be part of the problem. The column code can't be applied to the parent div as it is, for some reason, it needs to apply to a child div.)

Anyone?

the Atahualpa BODY Box

??? where did you apply it?

What is the URL so I can see what you have done?

Originally Posted by juggledad

??? where did you apply it?

Appearance > Atahualpa Theme Options > Posts & Pages > Style Posts & Pages > BODY Box.

I really hadn't thought that there was anywhere else to apply it in the theme GUI. Just put -moz-column-width: 30em; -moz-column-gap: 15px in there and observe what it does. You'll see the the right-most column is not vertically even with the other columns. (This is all assuming that you're using Firefox of course.)

Now, remove that code, and instead edit the post itself.

Use: <div style="-moz-column-width: 30em; -moz-column-gap: 15px"> at the very top of the post text, and </div> at the end. The results here will have the right-most column being vertically even with everything (at least within one line of text).

I haven't "done" anything more than that, and it should be very easy to reproduce. (And note - it's impossible to provide a URL to any site that has an example of the different methods of styling both active at the same time. It's either one or the other. Therefore, much easier to just reproduce yourself.)

In Mozilla applications like Firefox, the -moz-column-width CSS property suggests an optimal column width. The actual column width may be wider (to fill the available space), or narrower (only if the available space is smaller than the specified column width).

The body box is part of the center area who's width is equal to the page width minus the width of the sidebars

I have no idea what that has to do with my problem at all. That CSS property divides existing space (within the current "workspace") into columns of equal width. It doesn't matter how wide the current space it - it will just divide that into equal columns within it. Plus, that aspect of it works just fine. It's simply the number of vertical lines in the right-most column (within the DIV) that's behaving differently.

It doesn't explain why putting the CSS into the Athahualpa theme option section is behaving differently than putting it into a manually inserted DIV in the body of a post.

Did you actually try the above and see for yourself? Just add the CSS into a blog post to see what it does. Once done, remove it from the blog post again - and put it into the BODY Box section of the theme itself, as outlined above.

No I didn't try anything. Being a volunteer (ie unpaid) moderator I try to spend the minimal amount of my time which is why I always ask to see the url.

Understood, although in this case supplying a URL would be of no help because you need to look at it one way, change things, then look at it the other way. Just seeing it work one way wouldn't communicate the problem.

(Actually, let me see if I can supply some screen captures instead.)

I guess I will go back to seeing if I can hack the PHP code.

Do you know what I would need to modify to insert my own custom DIV (that I could then style) right after <div class="post-bodycopy clearfix">?

Okay, some screen captures.

Here's what happens when I use a DIV, with the CSS, in the body of a post directly:





Here's what happens if I use the same CSS but apply it to BODY-Box instead:





Note that for this example I used a narrower column definition so that it would produce 3, making it more obvious. When applying it to the BODY-Box the behaviour for this particular post (also why I selected this one) is so extreme that there is no text in the right-most column at all.

Also note: The presence of the additional CSS in BODY-Box (as per the screenshot) is not responsible for the problem. If I remove it altogether and use just the column CSS, the problem still occurs.

No ideas? Maybe one of the developers could comment? Does it seem that there's an explanation for this - or could it be a bug in some way?

If it isn't known why this is happening - can you explain how to add a custom DIV to every post automatically?

I just ran a test and it works for me in FireFox (note in Safari you need to use -webkit-column-width: 20em; -webkit-column-gap: 15px

so you probably have a conflict with something else.

disable all plugins
remove all CSS in the CSS Inserts

I was hoping that would be it - because identifying the problem would be easy at that point if removing everything fixed it. But it didn't. After disabling all plugins, and removing all CSS inserts, I'm seeing exactly the same thing...

If I had a Mac I could test with Safari too, and it could then be something that's specific to my build of Firefox, but it still doesn't explain why putting the code into the actual body of a post is behaving differently than having it in BODY Box.

I do know that everything would work if I could get all of my posts automatically inside a custom DIV. (Even if I wouldn't know what was causing this in the first place.)

When I look at the HTML source code for a post, I see <div class="post-bodycopy clearfix"> before the body text of each post. Searching for this, I see that it's contained in two different Atahualpa files:

functions/bfa_post_parts.php: function bfa_post_bodycopy($before = '<div class="post-bodycopy clearfix">', $after = '</div>'
functions/bfa_theme_options.php: <?php bfa_post_bodycopy('<div class=\"post-bodycopy clearfix\">','</div>'); ?>

However, when I modify both of these - say to ...clearfix">blah' - what I'm adding isn't picked up at all and "blah" doesn't appear in my posts or the HTML source.

The only other places where <div class="post-bodycopy clearfix"> appears anywhere are in the Styles .txt files. But renaming the entire styles directory to something else, resulted in no errors - so I know that those files aren't actually being used by me at present and modifying them won't do any good either.

How do I go about modifying the code being generated here if not by changing those two lines?

once again, I tested it and it works the way you would expect. This is on 3.6.4 and WP 3.0.5
You Say looking at the site won't help. The way I tested it was to have two posts, one with the hard coded div and styling, the other without. I looked at it and one was a single column and the other was three columns. I then added the CSS insert and both were three columns.

So, this makes it an issue with your environment, but without access to the site I'm afraid there isn't anything I can offer.

Well, I give up - because now it's not working properly even if I put a DIV into the body of the post itself directly now. Which is extremely odd because there was a difference when I composed my screenshots and earlier.

To answer my other question though - to add a custom DIV to every post, do this:

functions/bfa_post_parts.php
function bfa_post_bodycopy($before = '<div class="post-bodycopy clearfix">', $after = '</div>')
{
global $bfa_ata, $post;
$before.='<div class=\"post-custombody\">';
$after = '</div>'.$after;

Add the last two lines, and name the DIV class what you'd like. I don't know why modifying the initial definition of $before and $after fails to work, but changing the definition after the fact in the body of the function code does the trick. (Not that it actually solved my real problem.)

By changing that code and removing the original, you have changed the CSS that will apply to that area. If you want to add a custom class, just add it - don't remove the others - or add a new dive after it

functions/bfa_post_parts.php
function bfa_post_bodycopy($before = '<div class="post-bodycopy clearfix">', $after = '</div>')
{
global $bfa_ata, $post;
$before.='<div class=\"post-bodycopy clearfix post-custombody\">';
$after = '</div>'.$after;

or

functions/bfa_post_parts.php
function bfa_post_bodycopy($before = '<div class="post-bodycopy clearfix">', $after = '</div>')
{
global $bfa_ata, $post;
$before.='<div class=\"post-bodycopy clearfix\"><div class=\"post-custombody\">';
$after = '</div></div>'.$after;

since you give up, I'll close this thread