IE/Gecko CSS conflict

[archigamer]

i have the following CSS declartion in my style sheet

#leftBar p
{
	margin-left: 10%;
	position: relative;
	padding: 0px;
	margin-top: 10%;
	margin-bottom: 10%;
	margin-right: 0%;
}

The CSS looks great in NS/FF etc. However in Internet Explorer instead of closing the gap between paragraphs it widens it. can anyone explain why?

[doctornick]

i have the following CSS declartion in my style sheet

#leftBar p
{
	margin-left: 10%;
	position: relative;
	padding: 0px;
	margin-top: 10%;
	margin-bottom: 10%;
	margin-right: 0%;
}

The CSS looks great in NS/FF etc. However in Internet Explorer instead of closing the gap between paragraphs it widens it. can anyone explain why?

By assigning a value of 10% to a margin, it will take the value of 10% of the containing block it is in. So if you assign margin-top(or bottom): 10%; to an element which has a containing block with a height of 1000px, then the top margin (or bottom) for that element will be 100px!! which will be most undesirable. The same can be said for margin-left or right taking a value of 10% of the containing block width.

The best way to do it is by using the values of em, px or pt. The default vertical distance between paragraphs is 2em so if i want to decrease the distance between them i just us a value lower than that.

If you look at
http://www.lincoln-oxford.com/users/...y/3colexample/
i have shown 3 columns with different margin-bottom's. The green column has the default paragraph gap of 2em, then red has an assigned margin-bottom of 0.5em and then centre column has the margin-bottom assigned to 10% as you said which gives a massive gap!

Hope this helps!
Nick

ps. you can assign margin-top, margin-right, margin-bottom and margin-left all at once using margin.

e.g.
p {
margin: 0 10px 20px 40px
}

assigns margin-top: 0, margin-right: 10px, margin-bottom: 20px and margin-left:40px to the paragraph tag

[archigamer]

thanks using ems works great.

as far as the short hand, i am aware of it, it is just not my style though.