Re: [css-d] Is it impossible to set margin to h1, h2... el ?
While this will work, I don't recommend it. My method for margins around headings and paragraphs has always been to remove top margins on all text and just set bottom margins on everything. This allows me to control the spacing between headings and the following paragraphs without needing child selectors or classes. I've never needed something more intricate (though I acknowledge others will at times -- try something simple like this first though). Zoe Zoe, I am trying this here: 66.155.251.18/mlinc.com/test/index.html but I am getting double margin (?) under the h1, in FF(Mac) and IE6. What am I missing? -- Tom Livingston Senior Multimedia Artist Media Logic www.mlinc.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Is it impossible to set margin to h1, h2... el ?
Tom Livingston wrote: While this will work, I don't recommend it. My method for margins around headings and paragraphs has always been to remove top margins on all text and just set bottom margins on everything. This allows me to control the spacing between headings and the following paragraphs without needing child selectors or classes. I've never needed something more intricate (though I acknowledge others will at times -- try something simple like this first though). Zoe Zoe, I am trying this here: 66.155.251.18/mlinc.com/test/index.html but I am getting double margin (?) under the h1, in FF(Mac) and IE6. What am I missing? Your margin under the h1 is the correct size. You've set it to 1em, and a 1em margin on a significantly bigger h1 is going to be bigger than on the smaller p. If you want a smaller margin there, set it to a smaller value, like .5em. Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Is it impossible to set margin to h1, h2... el ?
While this will work, I don't recommend it. My method for margins around headings and paragraphs has always been to remove top margins on all text and just set bottom margins on everything. This allows me to control the spacing between headings and the following paragraphs without needing child selectors or classes. I've never needed something more intricate (though I acknowledge others will at times -- try something simple like this first though). Zoe I'll try again now the messages are coming in again Zoe, I am trying this here: 66.155.251.18/mlinc.com/test/index.html but I am getting double margin (?) under the h1, in FF(Mac) and IE6. What am I missing? -- Tom Livingston Senior Multimedia Artist Media Logic www.mlinc.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Is it impossible to set margin to h1, h2... el ?
Your margin under the h1 is the correct size. You've set it to 1em, and a 1em margin on a significantly bigger h1 is going to be bigger than on the smaller p. If you want a smaller margin there, set it to a smaller value, like .5em. If your h1 element is set to 1.4em and that (through math) equates to 14px... and your p element is set to 1em and that equates to 10px, then 1em margin (top, bottom or whatever) will equal 14px for the heading and 10px for the paragraph. Remember, it's the font-size of each element that determines what 1em equals... use px instead if you must have the same space exactly beneath both elements... otherwise, the math could get ugly. On the other hand, using em allows the spacing to be proportional to the font-size of the element, so I wouldn't worry about it, but do what Zoe said, and make a proportional adjustments for your heading and paragraph margins. And don't forget that vertically adjacent margin collapse can intervene to make things appear unexpectedly different from what you planned (vertically adjacent margins collapse to the larger of the two values, even with nested elements, if no border or content appears between them) Donna Casey __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Is it impossible to set margin to h1, h2... el ?
Scott Sauyet wrote:
The paragraphs after the header elements need to have no top margin.
Ideally, you would do this with
h1 + p, h2 + p, h3 + p {
margin-top: 0;
}
but the 800-lb gorilla that is IE(7) doesn't understand this. You can
simply add a class to those paragraph elements. If the HTML is really
under your control, this is often the easiest way.
While this will work, I don't recommend it. My method for margins around
headings and paragraphs has always been to remove top margins on all
text and just set bottom margins on everything. This allows me to
control the spacing between headings and the following paragraphs
without needing child selectors or classes. I've never needed something
more intricate (though I acknowledge others will at times -- try
something simple like this first though).
Zoe
--
Zoe M. Gillenwater
Design Services Manager
UNC Highway Safety Research Center
http://www.hsrc.unc.edu
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Is it impossible to set margin to h1, h2... el ?
this makes me sound really dumb, but are you sure you're setting the
bottom margin on the right element?
#cotedroit p {margin-bottom:10px}
this is going to set a bottom margin on your paragraph tags, not your
header tags.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Is it impossible to set margin to h1, h2... el ?
victor NOAGBODJI wrote:
In my CSS I have h1,h2,h3 {margin:0;padding:0}
So that I can set margin bottom; the problem is that it isn't working.
You're running into a problem with collapsing margins. Adjacent
vertical margins are combined into one, and placed at the top:
http://www.w3.org/TR/CSS21/box.html#collapsing-margins
The paragraphs after the header elements need to have no top margin.
Ideally, you would do this with
h1 + p, h2 + p, h3 + p {
margin-top: 0;
}
but the 800-lb gorilla that is IE(7) doesn't understand this. You can
simply add a class to those paragraph elements. If the HTML is really
under your control, this is often the easiest way.
Good luck,
-- Scott
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Is it impossible to set margin to h1, h2... el ?
victor NOAGBODJI wrote:
In my CSS I have h1,h2,h3 {margin:0;padding:0}
So that I can set margin bottom; the problem is that it isn't working.
Am I doing something wrong?
I don't know as I am not sure I understand the question.
CSS snip :
form,p,h1,h2,h3 {margin:0;padding:0}
#cotedroit h2 {
color:#80786a;
font-size:16px
}
#cotedroit h3 {
color:#948b7b;
font-weight:normal;
font-size:12px;
letter-spacing:.1em;
text-transform:uppercase
}
#cotedroit p {margin-bottom:10px}
This CSS /may/ yield a 10px margin beneath h2, h3, and p with the html
that was in your post. Is this what you are after?
/*form,p,h1,h2,h3 {margin:0;padding:0}*/
body { font-size: 100%; line-height: 1.1; }
#cotedroit h2 {
color:#80786a;
font-size: 100%; margin-top: 0; margin-bottom: 10px;
padding-bottom: 1px;
}
#cotedroit h3 {
color:#948b7b;
font-weight:normal;
font-size: 90%;
letter-spacing:.1em;
text-transform:uppercase; margin-top: 0; margin-bottom: 10px;
padding-bottom: 1px;
}
#cotedroit p { margin-top: 0; margin-bottom: 10px;
background-color: fuchsia; }
Regards,
~davidLaakso
--
http://www.dlaakso.com/gustave/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
