SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,269
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)

    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 )

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

  2. #2
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    grr almost got it

  3. #3
    Put your best practices away. The New Guy's Avatar
    Join Date
    Sep 2002
    Location
    Canada
    Posts
    2,087
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    I think I got it.
    "A nerd who gets contacts
    and a trendy hair cut is still a nerd"

    - Stephen Colbert on Apple Users

  4. #4
    SitePoint Member
    Join Date
    May 2004
    Location
    ohio
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hmmmm, interesting.

  5. #5
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Solved it! Answer sent to Paul O'B
    Last edited by mstwntd; May 15, 2004 at 21:08.

  6. #6
    SitePoint Enthusiast
    Join Date
    Oct 2003
    Location
    Massachusetts
    Posts
    82
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Got it

  7. #7
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,215
    Mentioned
    58 Post(s)
    Tagged
    3 Thread(s)
    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
    rudy.ca | @rudydotca
    Buy my SitePoint book: Simply SQL
    "giving out my real stuffs"

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,269
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="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:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="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

    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

    Paul

  9. #9
    SitePoint Addict
    Join Date
    Apr 2003
    Posts
    208
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Fun quiz Wish I had seen this thread sooner.

  10. #10
    Put your best practices away. The New Guy's Avatar
    Join Date
    Sep 2002
    Location
    Canada
    Posts
    2,087
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Heh, cool.

    For the example 2 (the one I did) it wont work properly (goes wonky) unless #inner has position: relative; any reason why?
    "A nerd who gets contacts
    and a trendy hair cut is still a nerd"

    - Stephen Colbert on Apple Users

  11. #11
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,215
    Mentioned
    58 Post(s)
    Tagged
    3 Thread(s)
    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
    rudy.ca | @rudydotca
    Buy my SitePoint book: Simply SQL
    "giving out my real stuffs"

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,269
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Quote Originally Posted by new guy
    unless #inner has position: relative; any reason why
    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.

    Quote Originally Posted by rudy
    solution #2 is nicer, to me anyway
    I agree

    Paul

  13. #13
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Great quiz Paul, Looking forward to the next one.

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,269
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

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

    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

  15. #15
    SitePoint Addict
    Join Date
    Feb 2009
    Location
    israel
    Posts
    217
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  16. #16
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,269
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by deotpit View Post
    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.
    Help yourself


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •