Following on from the previous test in this thread. Heres another little quiz to test your coding skills.

Some of the comments said the last test was to hard and used too many hacks so this one involves no hacks and is pretty simple (if you know what you are doing )

All I want is for you to reproduce this layout so that it works in IE6 and mozilla/firefox. At the moment it is only displaying correctly in firefox so you will need that browser to look at it. Its simply a dashed border that alternates between red and blue dashes.

In ie6 its only a red dashed border. Your mission (should you accept) is to reproduce the firefox layout so that it works both in ie6 and firefox.

This one should take no more than 10 minutes ( and those brighter among you will already know how to do this :)).

Rules: No frames or iframes

There are no prizes other than the self satisfaction of being the first to complete this. If you solve it then post a message here but PM me the solution so that other people can still have a go.

Have fun

Paul

Edit:

You can ignore the differences in sizes that exist between firefox and ie6's dashed borders. What I'm looking for is the duplication of the alternate dashed border and I'm not worried about the size of the elements being exactly the same as the browers have different margins etc anyway.

The problem is that the background colour of an element is supposed to extend under the border and would therefore be visible when using dashed borders. However IE only draws the background as far as the border but not underneath.

The first example uses a negative margin to pull the inner containers borders on top of the outers solid border. IE6 needed a width 100% added to make this work properly.

The second example uses the background colour of outer to produce the blue border and then just overlays the dashed order on top.