Spacing issue in EDir

[Soto]

Hey folks,
After adding the EDir modules I decided that it all needed a bit of breathing room (some margin space).
I figured that the best way to do this is to add a margin of 2px to the div containing the EDir modules.
In template_css.css, #maincontent table {margin:2px;}  (#maincontent is the div that contains EDir)

This works fine except for one little thing. It adds space between the header and the directory table of the EDir Main Display. (please view image file to understand better)
Is there a Module Class Suffix that I can add to the Main Display so that I can correct this?
Or maybe someone has a better solution to my spacing issue.

Thanks for any help.

ps. thank God for image attachments 

[old attachment deleted by admin]

[datahell]

This: margin: 2px; adds a surrounding margin.
You can control independently the margin for every side this way:
margin: 4px 2px 5px 30px;
or
margin-top: 4px;
margin-left: 5px;
margin-right: 2px;
margin-bottom: 12px;

This format:  margin: Tpx Rpx Bpx Lpx; follows a clockwise rotation starting from the top:

margin: (top margin)px (right margin)px (bottom margin)px (left margin)px

Example:
margin: 0 2px 2px 2px;
The above will add a margin of 2px in every side except to the top (what you want).
The above bar may also have a bottom margin so you want to get it even closer.
In this case you can use a negative margin for the top side. ie: margin: -3px 2px 2px 2px;

The above is valid for all relative css elements ie: padding: 2px 0 0 8px; border, etc

[Soto]

Thanks for the quick reply.

I already know how to add different margin sizes per side but what I really need to know is how to add it to individual modules; like the directory table for instance.
I've seen that quite a few modules are capable of having a css suffix added to them so that we can customize them but I havent found anything for the directory. Is there one? If not, where do you suggest that I add the margin spacing so as not to separate the header from the directory table.

Thanks again, Sot.

[datahell]

The table starts like this:

<table width="100%" cellspacing="0" cellpadding="0" id="subcats" class="edirtable">

You can modify the css class edirtable (general tables) or add a css class for that specific table using the id="subcats".

example:

#subcats table { margin: 0 2px 2px 2px; }
or
table.edirtable { margin: 0px 2px 2px 2px; }


Copy EDir default css file and make your own that you will use in your site.

[Soto]

I'll try that out and let you know.
Thanks Datahell 

[Soto]

#subcats { margin: -3px 2px 3px 2px; } worked like a charm.
Thanks again for the help