Test your css skills - Number 2

Hi,

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 :slight_smile: )

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 :)).

[list][*]Rules: No frames or iframes
No javascript or scripting of any kind
NO TABLES
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[/list]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 :slight_smile:

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.

grr almost got it

I think I got it.

hmmmm, interesting.

Solved it! Answer sent to Paul O’B

Got it :wink:

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

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.20
Mstwntd : 04.25
Jamslam :04.40

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

http://www.pmob.co.uk/temp/spointquizdotteda.htm
http://www.pmob.co.uk/temp/spointdotteda2.htm

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.

Example 1


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd](http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd)">
<html xmlns="[http://www.w3.org/1999/xhtml](http://www.w3.org/1999/xhtml)">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#outer {
position:relative;
float:left;
width:20%;
border:2px solid blue;
margin-top:20px;
margin-left:20px;
background:#ffffcc;
}
#inner {
border:2px dashed red;
width:100%;
position:relative;
margin:-2px;
}
p {padding:5px;margin:0}
</style>
</head>
<body>
<div id="outer"> 
<div id="inner"> 
	<p>This is some text : This is some text This is some text : This is some 
	 textThis is some text : This is some text This is some text : This is some 
	 textThis is some text : This is some text </p>
</div>
</div>
</body>
</html>

example2:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd](http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd)">
<html xmlns="[http://www.w3.org/1999/xhtml](http://www.w3.org/1999/xhtml)">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#outer {
position:relative;
float:left;
width:20%;
margin-top:20px;
margin-left:20px;
background: blue;
}
#inner {
position: relative;
border:2px dashed red;
}
p {padding:5px;margin:0;background-color:#ffffcc }
</style>
</head>
<body>
<div id="outer"> 
<div id="inner"> 
<p>This is some text : This is some text This is some text : This is some 
	textThis is some text : This is some text This is some text : This is some 
	textThis is some text : This is some text </p>
</div>
</div>
 
</body>
</html>

All the entries submitted were similar to above but although not eaxactly the same they all produced the same result.

Well done to all who entered and I hope you enjoyed it.

Rudy sorry about the erroneous closing div it crept in on its own lol :slight_smile:

There is a solution without using an extra nested div by applying the styles to the p tag instead of #inner. The only drawback is that you have to loose the padding for it to work properly.

Look out for quiz number 3 some time next week :slight_smile:

Paul

Fun quiz :stuck_out_tongue: Wish I had seen this thread sooner.

Heh, cool.

For the example 2 (the one I did) it wont work properly (goes wonky) unless #inner has position: relative; any reason why?

congratulations, all

solution #2 is nicer, to me anyway (negative margins give me the willies)

i just realized that with one more restriction, this is all very much like
the css zen garden

the extra restriction would be: no change allowed to the markup

but i don’t mind changes to the markup being allowed, as long as the
overall number of divs, spans, and classes goes down

again, nice job folks

Hi,

Well the reason is that the parent float has a position:relative set and IE likes the children of positioned elements to be position:relative also or it does odd things (especially with floats).

However if you take the position:relative out of the parent as well then it will work ok and reduce the mark up even further.

I agree :slight_smile:

Paul

Great quiz Paul, Looking forward to the next one.:wink:

Hi,

I just though I’d show an example of a possible use for this double border effect :slight_smile:

It seems a shame for it to go to waste.

http://www.pmob.co.uk/temp/border2color1.htm

(BTW not tested in anything other than ie6 and mozilla)

Paul

Hi Paul,
Thanks for a simple/sophisticated solution for an ie6 obstacle. I think i’m going to use it in my page, with your permission of course.:slight_smile:

Help yourself :slight_smile: