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.

system
—
2004-05-15T16:57:20Z —
#2

grr almost got it

The_New_Guy
—
2004-05-15T19:12:03Z —
#3

I think I got it.

Starch
—
2004-05-15T20:26:31Z —
#4

hmmmm, interesting.

system
—
2004-05-16T03:22:31Z —
#5

Solved it! Answer sent to Paul O'B

jamslam
—
2004-05-16T03:41:15Z —
#6

Got it

r937
—
2004-05-16T04:51:13Z —
#7

i'll try it only if that young whippersnapper does, what was his name, danson or something, where is he now?

at the moment i have no time to try it, and i'm sorry, it isn't immediately apparent

i'll be looking for the solution, and see if it doesn't perhaps involve another nested div, seeing as how there just happens to be an unexplained extra </div> in there

i'm not very experienced at divitis but i can understand how it might be necessary to achieve an odd request like this

nice one, paul

PaulOB
—
2004-05-16T13:34:42Z —
#8

Hi,

Well done to all those that got it right and the winner was the first one who PM'd me with a working example.

Well done New Guy - 20.11 yesterday

Closely followed by :

Starch :21.20Mstwntd : 04.25Jamslam :04.40

There are various ways to achieve the answer and here are 2 different ways that covered most of the entries.

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.