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
    No javascript or scripting of any kind
    No expressions or conditional comments
    Use Valid CSS
    Use Valid xhtml
    No hacks, no child selectors, no universal selecors, no means of offering separate code toeach browsers. The same code must work for both browsers.
    Must still work in Firefox
    Must work in IE6 exactly the same as my example above
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



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.