Best Practices for Removing Space (padding) between Boxes

[WebWerx 0]

Hi! I need to bring these 3 boxes together so there is no space between them: http://cl.ly/0H3j1A2o423P0v1m3K1D I have assigned a separate CSS class to each box: IE "#content-boxes .home-page-badges". So now I want to remove the space for just these 3 boxes - without affecting any other boxes.... How do I do this "correctly"? Thanks!

[Rob 547]

I've looked, up, down and around - searched for every option but I can't figure this one out. The second charcoal box appears to be in the footer for some odd reason. For what it's worth, Henry offered this: [code].container.clone_2.section-contentbox.fix {padding-bottom:0px !important; }[/code] for the red bad... with the proviso... "maybe?" I'm going to play my age for the moment... create a table to do the same thing as those 3 boxes. Put it inside a content box. Make each box you have now a simple table row. The problem I see is that .content is overriding each element with 15px padding. So, we need to customize the padding for each. Your class is actually applied inside the box. We need something to tie together each and set the padding top or bottom for the individual boxes. Tough call. Tables! Great for boxes and dinner!

[WebWerx 0]

Good Morning @rangelone! Actually, all three (red - black - black) boxes are "Content Boxes" where I have assigned individual CSS classes. I then added the coloured backgrounds via CSS. I have since added some stuff in the MoreFoot area of the Page template. Bottom line is I need to set things up as shown is this mockup: http://cl.ly/0C2d44110h3m3c0N0x2G So my challenge is really what is the most practical way to get the content to render correctly? Do I use 3 boxes (red-black-black). Or do I use 2 (red-black) by merging the content in the two bottom black areas? @hperkins (Henry): Thanks for the suggestion. I did put the code in my custom.css file - with no affect. I don't understand it enough to troubleshoot. By changing: .content-pad to have "padding-bottom & padding-top" to 0px I can get things looking like this: http://cl.ly/3U1g0c3R2s0V0O1d2S09 But that results in a site-wide change. So back to square one. @Simple_Mama: Any thoughts on this conundrum? Thanks you all and Happy Memorial Day weekend to those of you whop are living in the US of A.

[catrina 103]

By changing: .content-pad to have "padding-bottom & padding-top" to 0px I can get things looking like this: http://cl.ly/3U1g0c3R2s0V0O1d2S09 But that results in a site-wide change. ^ Is this .content-pad belong to a specific DIV ID? (i.e. #divid div.content-pad)

[Henry Perkins+ 14]

@webwerx Each content pad is given its own individual selector even if you don't give it one in meta settings. the class for the content pad for your red box is class="container clone_2" which is parent to your assigned homepage-red. Hopefully that helps you on your way. :)

[WebWerx 0]

@hperkins: This makes more sense now. I'll have to take a look with FireBug to see the Selector structure. I'd like to be able to figure this stuff out myself. I'll report back on whether your suggestion worked. @catrina: No it does not. That is my issue..... Finding the correct Selector.

[Danny 1,327]

Hi WebWerx, Do you need further assistance ?

[WebWerx 0]

Hey @Danny: I guess the folks in the UK don't take weekends off! I did try @hperkin 's fix. Sadly it did not have any effect. This is maddening... and confusing too.... I can take care of the spacing for the 2 black boxes by merging their content into 1. But this still leaves me with the space between red & black boxes which needs to be removed. I am tempted to try @rangelone 's suggestion of using tables. But I really am adverse to using to tables in Wordpress. Plus that would put me in the same age group as my chef friend -- ;-) @simple_mama: Can you have a look?

[catrina 103]

I'm looking at it and since that .content-pad doesn't belong to any DIV ID, I was thinking maybe to create the illusion of removing spacing, you can use a negative value in the margin-left attribute for moving the box. This isn't the most robust/elegant solution, however. I can't think of any other solution (besides tables, which is kind of a lame solution).

[WebWerx 0]

Hi @catrina!: I don't get it. Adding a negative value for margin-left will only move the box to the left. Am I misunderstanding? I have tried every permeation possible in FireBug. Funny thing is when I do just that the box does move to the left. http://cl.ly/1S3V3n43390B443F0d1J But why won't it move up or down? GRRRRRRRRRR

[Rob 547]

To paraphrase Shakespeare, who wasn't my contemporary or classmate in secondary school - for the record: [quote]"Age cannot wither [us], nor custom stale [our] infinite variety;"[/quote] Lest we forget, you [b]are[/b] my age! Our British colleagues aren't the only ones working weekends. They just wake up earlier than we do. Okay, this isn't quite the solution you want but it's closer. In Dashboard > PageLines > Templates > Morefoot place both Boxes and Morefoot sidebars with Boxes taking top position. Inside the Morefoot, you'll have to add multiple text boxes. In Custom Code > CSS Rules, add and modify the colors in this: [code]#morefoot_area {background-color: #e9e9e9;} #boxes, .container section-boxes fix {background-color: #C00000;}[/code] Admittedly, it causes the boxes anywhere else to be the same color. And it makes the color go site-wide. BUT, it did get rid of the white space. One small accomplishment. I must admit you've stumped not only me, but it seems my colleagues with this one, though it appears something we should work on - a means of easily providing the background color of a section and on a particular page. I'm going to put that in my weekly report. I know that doesn't do you much good right now and humbly apologize for it. I suppose I'll have to bake a pie of crow.

[WebWerx 0]

@rangelone: [b]You are older[/b] -- that aside.... I'll give this fix a whirl tomorrow. I have been banging my noggin against the old CSS wall all afternoon. And any attempt at meaningful engagement between me & our website ain't going to happen this evening! I do appreciate your loyalty to the company (and all that....). I too have some (misguided?) loyalty to my brand also. Sunday is coming to a close and a glass of Liberty School awaits! Thanks you kindly for attentiveness to this CSS dilemma of mine.

[Danny 1,327]

Hi, Is this issue now resolved ?

[WebWerx 0]

@Danny: Nope!

[Rob 547]

I'm getting this message: [url=""Unable to locate the main framework files! Make sure the parent theme folder is named correctly.""]"Unable to locate the main framework files! Make sure the parent theme folder is named correctly."[/url] I'm presuming you're fiddling again!

[WebWerx 0]

@rangelone: Me and Nero... It's okay now. I was editing my style.css with the new version of Coda and POOF! GONZO. Just like that. "Honest officer, it was the other guy.". This is when I love WPENGINE! It's back up my friend. You will see that I pulled the 2 black section into one. So now it is only the space between the black & red boxes. You guys should get "danger pay" when you have to work with me!

[catrina 103]

Hm, that space between the black and red boxes is a mystery to me. I still advise against using tables, but it's the only solution I can think of (...but still, don't use them).

[WebWerx 0]

@catrina & @rangelone: It seems to be a mystery to everyone! So to recap (as this thread has gotten very long).... My initial requirement was to reduce the space between content boxes. I have partially solved my problem by bringing 2 black boxes into one. Reducing the top or bottom padding will bring the boxes (almost) together. But the change would be sitewide and we don't want that. @rangelone submitted this suggestion: ".container.clone_2.section-contentbox.fix {padding-bottom:0px !important; }". But it does not work. Me thinks that this issue is really about an inadequacy in the core Framework. So... what about putting the whole shebang in one box? Is there a way to place a red strip (as I have in one box) at the top of a box, followed by the black below? I think maybe. But the CSS is beyond me. @catrina: I agree (again) about not using tables. It'll make a mess of things somewhere. Tables in Wordpress are equivalent to IE6 anywhere (in my books).

[Jenny 33]

Try using this (as long as I understand what you're trying to do): [code].clone_2.section-contentbox .content-pad { padding-bottom: 0; } .clone_3.section-contentbox .content-pad { padding-top: 0; margin-top: -12px; }[/code]

[WebWerx 0]

@simple_mama: Finally someone who understands me!: http://cl.ly/1j2I0h2C0s190H3G1n1L

[Jenny 33]

Glad to help! :)

[WebWerx 0]

I know you are Jenny --- And also know that I always appreciate the fact that you go "above & beyond" as everyone else at PL seems to enjoy doing.