can't get rid of the extra margin below my menu in responsive theme

[ameerulislam]

jppv.net is the place where I'm working on, It's a responsive theme and when I the screen is scales down the screen size to 719px (max) my menu layout changes but an extra 20 odd pixel space is being added and I can't get rid of it. see the attached image.

marginProblemCSS.png

[Paul O'B]

Hi,

I'm not sure if this is what you mean but the 20px purple backgrond beneath the nav is caused by the 20px padding on the parent #header_margin and can't be removed with a negative margin on an inner element.

You just need to do this:

#header_margin{padding-bottom:0}

Unless you meant something else of course

[ameerulislam]

Hi,

I'm not sure if this is what you mean but the 20px purple backgrond beneath the nav is caused by the 20px padding on the parent #header_margin and can't be removed with a negative margin on an inner element.

You just need to do this:

#header_margin{padding-bottom:0}

Unless you meant something else of course

Boss now new problem arose. the menu bar gets extra margin/padding from the left.

[Paul O'B]

Boss now new problem arose. the menu bar gets extra margin/padding from the left.

Hi,

You didn't add the code I gave you but instead added an invalid rule before the margin rule in the media query causing it to be missed.

line 1631 style.css
You added this:

#header_margin{padding-bottom:0};

It should be this:

#header_margin{padding-bottom:0}

There should be no semi-colon at the end. Otherwise it makes the following rule unmatchable.

	#header_margin{padding-bottom:0};

	.header-container {
		margin-left:0;
	}

It shuld be:

	#header_margin{padding-bottom:0}

	.header-container {
		margin-left:0;
	}

[ameerulislam]

I love you man.. Your awesome!! I thought every statements should end with ; . can you guide me, when not to use semi-colons ?

Thanks alot..

[Paul O'B]

I love you man.. Your awesome!! I thought every statements should end with ; . can you guide me, when not to use semi-colons ?

Thanks alot..

Hi,

Your mistake was adding the semi-colon outside the closing bracket thus effectively beginning a new rule

Regarding semi-colons then a semi-colon means that there are more rules to follow. The last rule (or a single rule) doesn't need them but does no harm either way.

e.g. All the following are valid:

#header_margin{padding-bottom:0}

#header_margin{padding-bottom:0;}

#header_margin{
padding-bottom:0;
margin:0
}
#header_margin{
padding-bottom:0;
margin:0;
}

As a rule of thumb I usually leave the trailing semi-colun from single rules:

#header_margin{padding-bottom:0}

But I always add it at the end in multiple rules.

#header_margin{
padding-bottom:0;
margin:0;
}

It's up to you. It's probably safer to tell people to always add it but in the end its just personal preference and saves a few bytes if you omit it.

[ameerulislam]

oh... silly mee..

guess I'm used to seeing this format (in multiple lines)

#header_margin{
padding-bottom:0;
}

where actually this is the same thins as

#header_margin{padding-bottom:0;}

or

#header_margin{padding-bottom:0}

All good now.. Thanks Again.

Hi,

Your mistake was adding the semi-colon outside the closing bracket thus effectively beginning a new rule

Regarding semi-colons then a semi-colon means that there are more rules to follow. The last rule (or a single rule) doesn't need them but does no harm either way.

e.g. All the following are valid:

#header_margin{padding-bottom:0}

#header_margin{padding-bottom:0;}

#header_margin{
padding-bottom:0;
margin:0
}
#header_margin{
padding-bottom:0;
margin:0;
}

As a rule of thumb I usually leave the trailing semi-colun from single rules:

#header_margin{padding-bottom:0}

But I always add it at the end in multiple rules.

#header_margin{
padding-bottom:0;
margin:0;
}

It's up to you. It's probably safer to tell people to always add it but in the end its just personal preference and saves a few bytes if you omit it.

[Paul O'B]

oh... silly mee..

guess I'm used to seeing this format (in multiple lines)

#header_margin{
padding-bottom:0;
}

where actually this is the same thins as

#header_margin{padding-bottom:0;}

Its just a preference of mine to put single rules on their own line and save 3 separate lines of code in the stylesheet. In a large stylesheet it soon mounts up and you have to keep scrolling forever to read the stylesheet. I usually only do this with single rules and then revert to the usual format for multiple rules.

[ameerulislam]

you know what, I think I'm going to like this. As this will enable me to understand other people's codes. And not get bluffed when I see a different rule like now.

For single rules your one and the regular rules using multiple lines.

by the way this is valid too right? One Line!!

#header_margin{padding-bottom:0; margin:0;}

Its just a preference of mine to put single rules on their own line and save 3 separate lines of code in the stylesheet. In a large stylesheet it soon mounts up and you have to keep scrolling forever to read the stylesheet. I usually only do this with single rules and then revert to the usual format for multiple rules.

[kohoutek]

you know what, I think I'm going to like this. As this will enable me to understand other people's codes. And not get bluffed when I see a different rule like now.

For single rules your one and the regular rules using multiple lines.

by the way this is valid too right? One Line!!

#header_margin{padding-bottom:0; margin:0;}

That's valid as well. In fact, you could write all your styles on a single line. Not that that would be a practical idea, at least not in pre-production mode, but it'd be perfectly valid.

[ameerulislam]

That's valid as well. In fact, you could write all your styles on a single line. Not that that would be a practical idea, at least not in pre-production mode, but it'd be perfectly valid.

Thanks.. There should be a thanks button in sitepoint!!