[WSG] Negative margins questions
I'm experiencing an issue with using negative margins that I've never had before, and it's only occurring in IE. I basically have a div container with a small padding added to it (.8em to be exact), and inside of it I have a series of paragraphs. I wanted to add horizontal rules between each paragraph and give the rules the effect of separating the paragraphs completely by giving it a negative left and right margin to break out of the padding. This worked nicely in FF, and doesn't work at all in IE. I also tried using an h1 instead of an hr (as a test) with basically the same CSS rules and the negative margins work beautifully in both browsers. Oddly though the the negative margin required on the h1 is half the size of the padding added to the container element, which I have no idea why that is? (Mainly because I'm an idiot) I've setup a test case for the issues I'm having: http://www.epiphanize.com/NegativeMarginsTest.htm You'll notice both the hr and h1 separators work nicely in FF, and only the h1 works in IE while the hr doesn't want to cooperate. If anyone could tell me the following: 1) Why isn't the negative margins working on the hr in IE while it works on other elements? 2) Why is the negative margins neccesarry for the h1 half the parent's padding, when the hr requires the full measurement to achieve the same effect? Thanks for your time, any help would be greatly appreciated. P.S. I've received answers from people saying to simply set the hr's position to relative, but that doesn't work. - Jonathan Carter ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Negative margins questions
G'day
I've setup a test case for the issues I'm having:
http://www.epiphanize.com/NegativeMarginsTest.htm
You'll notice both the hr and h1 separators work nicely in FF, and
only the h1 works in IE while the hr doesn't want to cooperate.
If the hr is only there for decorative purposes (i.e. no semantic
meaning), why not put 0 padding on the container and apply the
padding (and border-top or border-bottom) to the paragraphs
instead? No need for the hr element or negative margins that way.
CSS along these lines:
#Container {
padding: 0;
border: 1px solid #999;
}
#Container h1 {
background-color:#999;
font-size:1.5em;
margin:0;
padding:.6em;
}
#Container p {
margin:0;
padding:1em .8em;
border-top:1px solid #999;
}
Regards
--
Bert Doorn, Better Web Design
http://www.betterwebdesign.com.au/
Fast-loading, user-friendly websites
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] Negative margins questions
Thanks Bert,
I had a feeling someone was going to reply with that suggestion, and
you're right :) The whole test case I setup was merely to display the
point that the hr element was no cooperating with the negative margins.
I'm hoping more specifically for an explanation on why that is, not on
how to get the desired effect.
Bert Doorn wrote:
G'day
I've setup a test case for the issues I'm having:
http://www.epiphanize.com/NegativeMarginsTest.htm
You'll notice both the hr and h1 separators work nicely in FF, and
only the h1 works in IE while the hr doesn't want to cooperate.
If the hr is only there for decorative purposes (i.e. no semantic
meaning), why not put 0 padding on the container and apply the padding
(and border-top or border-bottom) to the paragraphs instead? No need
for the hr element or negative margins that way.
CSS along these lines:
#Container {
padding: 0;
border: 1px solid #999;
}
#Container h1 {
background-color:#999;
font-size:1.5em;
margin:0;
padding:.6em;
}
#Container p {
margin:0;
padding:1em .8em;
border-top:1px solid #999;
}
Regards
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] Negative margins questions
G'day I had a feeling someone was going to reply with that suggestion, and you're right :) The whole test case I setup was merely to display the point that the hr element was no cooperating with the negative margins. I'm hoping more specifically for an explanation on why that is, not on how to get the desired effect. Ah, OK. Well, can't help you on the first question - maybe Microsoft can. But the question about h1 is easy. You use relative padding (0.8em) - relative to the text size of the element it is applied to. So the margins on the h1 are calculated by the (larger) text size of the h1, not its parent's text size. Hope that makes sense - it does to me :-) Regards -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Negative Margins
Jolorence Santos wrote: Bruce, Using negative margin is quite mouthful, it may display fine in latest browsers which supports web standards but if you consider to target some of those primitive browsers, I think you should be carefeul using it. :) ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** Yeah it is important that if the browsers dont support negative margins that the site still works. So only use them for effects that will degrade to what is a reasonable degree for the specific site your working on. As of course for all advanced css features. ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Negative Margins
Bruce wrote: I have used negative margins at various times, but I have a question I would like to throw out there. I work a lot reconfiguring Movable Type, and there can be a series of articles down a page. On my main page, I have a border around each one, but the positioning I used to have content first in the template after the heading meant that I had to set a top margin of 100px. Problem was, that carried through all the posts making them 100px apart...as the template rewrites each article from the same code, and is way too much space. I set the bottom margin to -80px to remove the space. Looks good in Firefox and Internet explorer6, and I am sure it is fine. It is just that setting margins to -80 seems kinda hacking CSS...maybe not in a good way? What do you think? Site is xhtml1.0 Transitional Bruce Prochnau, www.bkdesign.ca I wouldn't call it hacking, however I try to avoid negative margins as much as possible. That said, do make use of the possibility because sometimes they can do great things in the way of effects that are otherwise difficult and/or messy to achieve. It can even negate the use of hacks in some situations. ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Negative Margins
Bruce, Using negative margin is quite mouthful, it may display fine in latest browsers which supports web standards but if you consider to target some of those primitive browsers, I think you should be carefeul using it. :) ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
[WSG] Negative Margins
I have used negative margins at various times, but I have a question I would like to throw out there. I work a lot reconfiguring Movable Type, and there can be a series of articles down a page. On my main page, I have a border around each one, but the positioning I used to have content first in the template after the heading meant that I had to set a top margin of 100px. Problem was, that carried through all the posts making them 100px apart...as the template rewrites each article from the same code, and is way too much space. I set the bottom margin to -80px to remove the space. Looks good in Firefox and Internet explorer6, and I am sure it is fine. It is just that setting margins to -80 seems kinda hacking CSS...maybe not in a good way? What do you think? Site is xhtml1.0 Transitional Bruce Prochnau, www.bkdesign.ca ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Negative Margins
Not to answer my own question, but I just seen that setting the header 100px high would remove the necessity of making margins for the content to clear the header. Seems a better practice as well. I must be tired, lol. Is that a better way? Bruce, www.bkdesign.ca ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Negative Margins
You could nest your three columns in a wrapper div under your header and position everything absolute from there, avoiding the need for negative margins. It is using html for presentation, sorta, but probably a lesser evil than your -80 issue. You could call your wrapper content for added semantic flavour. Personally, I have used and think negative margins can be great to acheive the effect of something extending outside its containing box but would generally avoid for standard positioning. If it feels dirty, it probably is. Cheers Pete -- Peter Costello www.domestik.net ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Negative Margins
Yeah, or what you said. On Wed, 5 Jan 2005 19:53:00 +1100, Peter Costello [EMAIL PROTECTED] wrote: You could nest your three columns in a wrapper div under your header and position everything absolute from there, avoiding the need for negative margins. It is using html for presentation, sorta, but probably a lesser evil than your -80 issue. You could call your wrapper content for added semantic flavour. Personally, I have used and think negative margins can be great to acheive the effect of something extending outside its containing box but would generally avoid for standard positioning. If it feels dirty, it probably is. Cheers Pete -- Peter Costello www.domestik.net -- -- Peter Costello www.domestik.net ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
