Margins problem

Hey , I've been into web design for abt 2 months ... and i've been having this annoying problem .. whenever I wanna define margins for any " <div " ... every browser shows it differently .... I only got internet explorer 7 to show it the way i want .. other browsers like Firefox .. Safari .. Google Chrome. .. show it in a wrong way ... can someone please tell me why ?

One of the best ways to solve cross-browser compatibility issues is to never add side margins to an element with a set width. Instead, put another div inside that div. Set the width on the outer div, and the side margins on the inner div.Same with top and bottom margins. Never set top or bottom paddings/margins to a div with a fixed height. Put a div inside, and set the height on the outer div, and the margins on the inner div.

However I am struggling with one specific problem - as you can see on attached picture I can not get rid of spaces between modules, marked with arrows and numbers 1 and 2. I suppose they are defined by margins - but Chrome does not show any in metrics and I can not identify the culprit in template's css (which is based on Atomic, as mentioned). As I cannot upload the template (currently running it on on my pc), I can only ask for one thing: where is the default setting for space between modules, eg. between Spotlight1 and Spotlight 2 and between the user positions in one Spotlight?


KIITEE 2011 | Amrita 2011

it is always recommended not to go with specifying attributes like width. As above amte said, Chathuranga said, you can solve the problem with his words.