JAB Creations
msg:4242889 | 10:38 pm on Dec 15, 2010 (gmt 0) |
It might be the issue of collapsed margins, the most undesirable and poorly thought out implementation in all of CSS. It should seriously be removed as it's anti-intuitive and has wasted countless hours. Unfortunately since it's already implemented in all browsers what you'll have to do is use padding in conjunction with margin which is the only way to get around this implementation bug (the top and bottom margins will collapse if they are both 20px in example I think). Yes I consider it a bug and nothing will change my mind as anti-intuitive standards should not be made in to standards. Hope this helps.
- John
|
milosevic
msg:4243022 | 9:31 am on Dec 16, 2010 (gmt 0) |
I agree JAB Creations, even though I am aware of the collapsing margin bug/feature I still try to avoid coding designs that feature it just because it seems 'wrong'.
The most unintuitive thing about imo is how it only applies to vertical margins.
|
greencode
msg:4243024 | 9:37 am on Dec 16, 2010 (gmt 0) |
Apologies, so does that mean that I would be unable to add a bottom margin to this i.e. so the body background colour goes around the actual content area.
|
milosevic
msg:4243028 | 9:48 am on Dec 16, 2010 (gmt 0) |
Sorry Greencode, the problem here is not collapsing margins after looking at your code.
If you put your margin rules on #wrap, it will work and add a margin at the bottom of the page.
If you think about it from the point of "I want a margin at the bottom of this element with a white background" - you need to add the margin to the element with the white background, in this case #wrap.
|
greencode
msg:4243033 | 10:04 am on Dec 16, 2010 (gmt 0) |
But I've tried adding a margin-bottom: 20px to the #wrap element and that still doesn't create a bottom margin?!
|
milosevic
msg:4243037 | 10:18 am on Dec 16, 2010 (gmt 0) |
I had another look and while that works in Firefox it doesn't work in IE.
The problem here is that #wrap is floated left.
If you lose this, the bottom margin will work. Or you could add something to clear the float - so your HTML is like the below:
<body>
<div id="container">
<div id="wrap">
</div>
<br style="clear:both"/>
</div>
</body>
|
greencode
msg:4243038 | 10:26 am on Dec 16, 2010 (gmt 0) |
Perfect - thanks so much milosevic. I added the clear and that's worked a treat.
|
|
