Re: [css-d] IE6 and IE7 Correct, everyone else wrong with negative margins
Good explanation, Bill. And I find ASCII very useful for this purpose. iñ 2008/11/18 Bill Brown [EMAIL PROTECTED] Mark Wheeler wrote: Yep! That did the trick. I've run into this before, but it was a while back. What is it about adding the padding that does the trick? Mark Hi Mark. Glad it helped. Basically, I think when you have an element with no border or padding, the margin looks like this: m m m m -- top margin sometext m m m m -- bottom margin ...which means that when it's followed by another element, it looks like this: m m m m -- top margin sometext m m m m -- bottom margin m m m m -- top margin sometext m m m m -- bottom margin ...and the margins collapse like this: m m m m -- top margin sometext -- top and bottom margin sometext m m m m -- bottom margin ...like a kind of zippering effect. When you add a border or padding, it changes the nature of the imaginary box holding the content inside an element so that the margin now looks like this: m m m m sometext -- some bottom padding will create the solid margin -- allowing this margin to exist on its own... m m m m -- ...separated from this margin here sometext m m m m -- the border on this element will do it too sometext m m m m I know the ASCII might not be the best way to demonstrate this, but hopefully, it gives you at least some idea of what's going on there with the box model. Anyway, I'm glad you were able to get it working. --Bill -- !-- ! Bill Brown - [EMAIL PROTECTED] - 484-809-8077 ! WebDevelopedia.com, TheHolierGrail, MacNimble.com ! 24 Countryside Drive, Johnston, RI 02919 -- __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ -- Iñigo Medina García Tecnología http://www.toprural.com Tu guía de turismo rural __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] IE6 and IE7 Correct, everyone else wrong with negative margins
Hi all, Ok, I have a problem where IE6 and IE7 are doing what I want, but the rest of the gang (FF, Safari and Chrome) are not doing what I want. Basically, I'm using negative top and bottom margins to move the top and bottom div in on the inner text. Sorry if I'm not explaining this well, but the test page will explain it much better. What's happing in IE6 and IE7 is want I want. But my natural way of thinking is if it works in IE6 and IE7 but not in the others, then I'm doing it wrong. Here's the link: http://dev.tonedeafdesign.com/test/test27.html There are two balloons on the page. The first one is without the negative margins, and you can see why I want to move the text margins, and the second one is my solution that only works in IE6 and IE7. Check it in IE6 and IE7 to see what I want, then in FF, Safari or Chrome to see the problem. The CSS is in the head. Any help is greatly appreciated. Thanks, Mark __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE6 and IE7 Correct, everyone else wrong with negative margins
Mark Wheeler wrote:
http://dev.tonedeafdesign.com/test/test27.html
Any help is greatly appreciated.
Hi Mark,
You are experiencing collapsing margins, a semi-intended, somewhat
troublesome component of CSS design in compliant browsers.
Adding a small amount of padding or bordering will generally fix this.
Try this rule in your style sheet:
.balloon_middle {
width: 217px;
background: url(images/photo_balloon_middle_bg_slammed.png) repeat-y;
padding-top: 1px; /* ADD */
padding-bottom: 1px; /* ADD */
}
Hope it helps.
Bill
--
!--
! Bill Brown - [EMAIL PROTECTED] - 484-809-8077
! WebDevelopedia.com, TheHolierGrail, MacNimble.com
! 24 Countryside Drive, Johnston, RI 02919
--
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE6 and IE7 Correct, everyone else wrong with negative margins
Hi Mark, Your HTML has some problems (doesn't validate). Your best bet would probably be to fix those problems first and then try again. HTH Peter Hi Peter, I'm embarrassed. I usually validate all my html. It validates now, but my problem still exists. Again, any help is appreciated. Thanks, Mark __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE6 and IE7 Correct, everyone else wrong with negative margins
Hi Mark,
You are experiencing collapsing margins, a semi-intended, somewhat
troublesome component of CSS design in compliant browsers.
Adding a small amount of padding or bordering will generally fix
this. Try this rule in your style sheet:
.balloon_middle {
width: 217px;
background: url(images/photo_balloon_middle_bg_slammed.png)
repeat-y;
padding-top: 1px; /* ADD */
padding-bottom: 1px; /* ADD */
}
Hope it helps.
Bill
Hi Bill,
Yep! That did the trick. I've run into this before, but it was a
while back. What is it about adding the padding that does the trick?
Mark
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE6 and IE7 Correct, everyone else wrong with negative margins
Mark Wheeler wrote: Yep! That did the trick. I've run into this before, but it was a while back. What is it about adding the padding that does the trick? Mark Hi Mark. Glad it helped. Basically, I think when you have an element with no border or padding, the margin looks like this: m m m m -- top margin sometext m m m m -- bottom margin ...which means that when it's followed by another element, it looks like this: m m m m -- top margin sometext m m m m -- bottom margin m m m m -- top margin sometext m m m m -- bottom margin ...and the margins collapse like this: m m m m -- top margin sometext -- top and bottom margin sometext m m m m -- bottom margin ...like a kind of zippering effect. When you add a border or padding, it changes the nature of the imaginary box holding the content inside an element so that the margin now looks like this: m m m m sometext -- some bottom padding will create the solid margin -- allowing this margin to exist on its own... m m m m -- ...separated from this margin here sometext m m m m -- the border on this element will do it too sometext m m m m I know the ASCII might not be the best way to demonstrate this, but hopefully, it gives you at least some idea of what's going on there with the box model. Anyway, I'm glad you were able to get it working. --Bill -- !-- ! Bill Brown - [EMAIL PROTECTED] - 484-809-8077 ! WebDevelopedia.com, TheHolierGrail, MacNimble.com ! 24 Countryside Drive, Johnston, RI 02919 -- __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
