15th July, 2004

Prevent dynamic collapsing margins

I’m aware of margin collapsing with CSS. It’s a pain. However, I’ve had a slightly different issue with margins over at IE 6 (PC). Bizarrely, the margins are showing correctly spaced, right up until the user slowly mouses over them.

At that point the margins collapse dynamically, as though powered by Javascript. I couldn’t have designed that with CSS if I’d tried! Luckily, I’ve worked out how to resolve the issue - and the solution is fairly obvious.

image of the elements

To see this problem in action, you’ll need to view CollyLogic on a PC using IE (preferebly IE 6). The boxes in my sidebar have parallel borders all the way around, made with two nested divs. If you gently roll the cursor over the bottom borders of certain boxes, you’ll notice that the two grey lines close up, refusing to open up again. Bloody annoying.

Update: I have now implemented the fix site-wide, so you’ll just have to imagine the effect.

Margin collapsing is a well-known phenomenon. You’ve got two margins meeting up. One is 7px and the other is 2px. You’ll get a 9px space between the elements, right? Wrong. The 7px overrides the 2px. You can of course do what I did, and pretend the problem doesn’t exist because you use a Mac.

In his excellent article No Margin For Error, Andy Budd suggests the following to counter standard ‘collapsing margins’:

There are number of ways to get round margin collapsing issues. One way is to add a border or 1px of padding around the elements so that the borders are no longer touching and so no longer collapse.

If you’re not aware of the issue, Andy’s article gives a great background to the various quirks. Anyway, for some reason, Andy’s advice wasn’t working for me this time (it has before). I had to sit down and make sketches of the various elements and the spacing until I figured out how to beat it.

A way to beat Dynamic Collapsing

Firstly, I’ve created a more semantic method of representing each box, removing a div, replacing it with a styled unordered list. Note, I’m only using these styles on my test page at the moment.


The important bit

All I needed to do was create reverse margin and padding statements. The key settings obviously affect the bottom margin/padding for each element. Here are the two important excerpts from the two revised styles:

code example

So, it’s a 0 0 2 0 - 2 2 0 2 reverse on margin and padding. Basically, this removes the need for a bottom margin from the inner (unordered list) box, by adding substitute padding to the outer (hope) box. Thus, no two margins are coming together. The 7px bottom margin of hope has no margin above it to collapse against.

I couldn’t make the settings uniform around all sides here due to my desire to avoid any width padding (which would’ve meant box hack inside box hack - nasty).

So, that seems to have solved it. As I said, I haven’t applied these changes to this page or the rest of the site yet - just the test page. Unlikely to be helpful to many, but hopefully helpful to someone.

The point of all this?

Why the blooming ‘eck does IE (PC) make the margins dynamic! How does that help anyone? If you have another solution, or it’s happened to you, lemme know.

Prev / Next


If you enjoyed this article, please subscribe to my Internet of Natural Things letter, and maybe grab the RSS feed. Thank you.