I created a widget called "benefit-widget" and would like to have "0" margin for this specific widget. As is, the overall Atahualpa theme 3.7.1. adds a 15px margin at the bottom. Below this widget, I have a menu bar and so have an unwanted 15 pixel gap between this widget and the menu bar.

I tried adding this to the HTML/CSS Inserts:

div#benefit-widget { margin: 0 !important;}

I Tried,
div#benefit-widget { margin: -10 !important;}

I tried,
div#benefit-widget { margin: "" !important;}

I tried,
div#benefit-widget { margin: "0" !important;}

and I tried,
div#benefit-widget { margin: "0 0 0 0" !important;}


None of the above worked. Is this the correct way to specify a margin for a specific widget? I don't want to change margins for the other widgets -- only this one.

Thanks very much

Without knowing what the HTML structure of the widget is, it is hard to say. Try using firebug in firefox to examine the area and experiment. What is the url

Hi JD,
URL is http://bestselectedgamesforseniors.com

When you go in there now, you won't see any gap. That is because in ATA options, style widgets, widget container, I changed margin: 0 0 15px 0; To margin: 0 0 0px 0;

But that also "smushes" up the other category widgets. So what I'm looking for is to style only the benefit-widget.

Thanks in advance,

You have

div#benefit-widget{margin:"0 0 0 0" !important}

that is invalid, no quotes. If you want th margin to be 0 use

div#benefit-widget{margin:0 0 0 0 !important}

JD,
I put the following code into custom html/css: div#benefit-widget{margin:0 0 0 0 !important}
and set the wiget theme settings back to default but now the gap is back.

I feel like such a firebug "clutz". I have absolutely no idea how you can look at a widget like that and find the margin coding.
When I look, I don't see that.

see any difference between

<div id="benefit_widget" class="bfa_widget_area">

and

div#benefit-widget {margin:0 30px 0 40px !important;}

look careful and then don't kick yourself when you find it.

JD, I'm not connecting with what you're saying. Both Html codes are completely different.

'benefit_widget' does not = 'benefit-widget'

JD, I know that an underscore does not equal a hyphen in php coding or html coding.

In post #4 in this thread, you said to use: div#benefit-widget{margin:0 0 0 0 !important}

It has a hyphen. So, where are you seeing an underscore??????

Are you telling me to change it to: div#benefit_widget{margin:0 0 0 0 !important} Because not even the underscore here works.

the widget start with this

<div id="benefit_widget" class="bfa_widget_area">

this says the ID of the widget is "benefit_widget" so you have to use this in the CSS and the name has to be exact, so in the CSS you can't use 'benefit-widget' because that has a dash in it and the dash version and the underscore version don't match, so no CSS is applied

JD, I see now what you are trying to teach me, but even with this code:

div#benefit_widget{margin:0 0 0 0 !important}

I still have the unwanted gap.

It seems that the Atahualpa settings ( margin: 0 0 15px 0; ) for margin in "style widget/widget container are overriding the settings in css/html even with the !important in the code.

This is where CSS can get complicated.
There is a precedence in how CSS is applied - I'm not going into all of it but here is part that applies to this situation. This is the HTML for your area (neatened up)

<div id="benefit_widget" class="bfa_widget_area">
	<div id="text-2" class="widget widget_text">			
		<div class="textwidget">
			<img src="http://bestselectedgamesforseniors.com/wp-content/themes/themeimages/benefits.png" alt="Best SELECTED Games For Seniors" width="990" height="150" />
		</div>
	</div>
</div>

and the CSS you have is

div#benefit_widget {margin: 0px 0px 0px 0px !important}

This CSS says (in english) 'apply a margin of '0' to the top, right, bottom and right of the div with an ID of 'benefit_widget', problem is that there is another chunk of CSS that says

div.widget {
	display: block;
	width: auto;  /* without this IE will stretch too-wide select 
					menus but not the other widgets. With 100% IE
					will remove sidebar borders if select menu is
					too wide */
	margin: 0 0 15px 0;	}

Which says 'for every div that has a class of 'widget' give it a bottom margin of 15px (along with the other rules)'. This selector is more specific than your selector, so it gets applied.

This is the 'general' CSS that applies to ALL widgets, so how to override it for this widget. You have to be MORE specific. So by changing the CSS Selector from just 'div#benefit_widget' to 'div#benefit_widget div.widget' you are now saying to apply it to a <div> with a class of 'widget' that in inside a <div> with an ID of 'benefit_widget'

hope this helps.

JD. You are a genius! I am always amazed by someone who knows coding. To me it is a mystery language, but I'm getting better at it. I've never had any formal training on coding, just what I have picked up over the years.

Using the following code, as you suggested cleared the problem right up:

div#benefit_widget div.widget {margin: 0px 0px 0px 0px !important
}

But I have to ask you, " how would any lay person, who knows little about coding, ever come to the conclusion that you have--out of your experience and knowledge--so freely given me? To me, it is a mystery.

All I can say, Is "Thank you very much! Much appreciated. You have saved my "bacon."

When I started play ing with Atahualpa 2 1/2 years ago, I didn't know how to spell CSS. I got a book and started playing and experimenting and gradually it became clear. And I don't know it all, there are some interesting things you can do with CSS (apply this the the odd members of this list)

Sometmes I think people forget that it takes time and effort to learn something. If you want to master a subject, you have to put in 10,000 hours - the old saying practice makes perfect is so true, so keep playing with it.

One thing that I do when I get stumped is I will visit a site and then view the source. I then copy it and save it as a file on my computer calling it something.html. Then I can open the file in my browser and I can edit the text file, save it, swap to my browser and do a refresh and see the change. I also use the 'border' rule to show me what I'm working on. In your case I saved the file as 'game.html' and added

#benefit_widget {border: solid 1px red !important;}

so I could see the area and then play with it.

Just some of the tricks I use.

Thanks JD. I'm determined to learn css and php.
Appreciate your words.