SitePoint Sponsor

User Tag List

Page 2 of 2 FirstFirst 12
Results 26 to 50 of 50
  1. #26
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,777
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Thanks for taking part everyone

    I will be posting another one in a couple of days - so keep an eye out and get sharpening those css skills

    Paul

  2. #27
    SitePoint Wizard DougBTX's Avatar
    Join Date
    Nov 2001
    Location
    Bath, UK
    Posts
    2,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Methinks you forgot to post the winner's entry!
    Hello World

  3. #28
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,777
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Thanks doug - I knew there was something I had to do

    here was jamslams entry :
    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> Quiz #3 </title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    body {
    margin: 5px;
    padding: 0;
    }
    a {
    display: block;
    height: 18px;
    text-align: center;
    text-decoration: none;
    width: 100%;
    }
    ul#navlist {
    list-style-type: none;
    font-family: Arial, Helvetica, sans-serif;
    width: 168px;
    background: #ff0000;
    padding: 4px 1px 4px 1px;
    margin: 0;
    }
     ul#navlist li {
     margin-top: 4px;
     }
     ul#navlist li.active {
     margin: 0;
     }
      ul#navlist li.active a {
      background: #ffffcc;
      color: #ff0000;
      }
      ul#navlist li a {
      background: #036;
      color: #eee;
      }
      ul#navlist li a:hover {
      background: #ffffcc;
      color: #000;
      }
      ul#navlist li a span {
      position: absolute;
      top: -500px;
      left: -500px;
      background: transparent;
      visibility: hidden;
      width: 1px;
      height: 1px;
      color: #eee;
      cursor: pointer;
      }
      ul#navlist li a:hover span {
      position: absolute;
      top: 9px;
      left: 6px;
      background: #036;
      visibility: visible;
      width: 168px;
      height: 18px;
      }
    </style>
    </head>
    <body>
    <ul id="navlist">
      <li class="active"><a href="#1">Link 1</a></li>
      <li><a href="#2">Link 2
    	<span>Link 1</span>
    	</a></li>
      <li><a href="#3">Link 3
    	<span>Link 1</span>
    	</a></li>
      <li><a href="#4">Link 4
    	<span>Link 1</span>
    	</a></li>
      <li><a href="#5">Link 5
    	<span>Link 1</span>
    	</a></li>
      <li><a href="#6">Link 6
    	<span>Link 1</span>
    	</a></li>
    </ul>
    </body>
    </html>
    Not quite as neat (and smooth) as mine but the general idea was much the same.

    If anyone still has different (css) ways of doing this then I'd be interested in posting their answers still.

    Paul

  4. #29
    SitePoint Addict xDev's Avatar
    Join Date
    Jul 2003
    Location
    Moncton, New Brunswick, Canada
    Posts
    247
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Couldn't get my z-index method to work with ie. I don't think the css method of doing this is right though. The markup ends up nonsensical to acheive a behavior that isn't built into CSS to begin with. Doug's method is the only one that is acceptable imo - javascript is the only correct way.

  5. #30
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,014
    Mentioned
    53 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by xDev
    javascript is the only correct way.
    interesting comment

    you'll absolutely love what my good buddy ppk is doing these days --

    Separating Behavior and Presentation
    r937.com | rudy.ca | Buy my SitePoint book: Simply SQL
    "giving out my real stuffs"

  6. #31
    SitePoint Addict xDev's Avatar
    Join Date
    Jul 2003
    Location
    Moncton, New Brunswick, Canada
    Posts
    247
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by r937
    interesting comment

    you'll absolutely love what my good buddy ppk is doing these days --

    Separating Behavior and Presentation
    That's a great article, I've read it before and his site is a stunning achievement. I agree with most of his points in the article except for his javascript image replacement solution. Were not talking about behavior with image replacement and CSS does a good enough job if you find the right technique. It's a styling issue and belongs in a style sheet where it will be cached by the client.

    Paul posted a good method for image replacement a while ago in this forum:
    http://www.sitepoint.com/forums/show...07&postcount=7

    My preferred way of doing it is here:
    http://levin.grundeis.net/files/2003...ernatefir.html
    I can live with the extra span, and I've found this solution (with a bit of tweaking) to work in nearly all situations whether positioning or floating the element.

  7. #32
    SitePoint Wizard DougBTX's Avatar
    Join Date
    Nov 2001
    Location
    Bath, UK
    Posts
    2,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by xDev
    Were not talking about behavior with image replacement
    re·place·ment
    n.
    The act or process of replacing or of being replaced; substitution

    act or process == behavior?

    I think so. It isn't something being done by the user, but it is something being done in reaction to the user's environment.

    I still have some playing to do with his solution - I don't like the idea of tying IDs into file names too much, if there is another attribute I can take advantage of I'll move its focus there. Even if I have to make one up. (Oh, the horror, non-validating headers! what will we dooo??)

    Besides, I prefer not to draw too much attention to my previous header replacment techniques....

    Douglas
    Hello World

  8. #33
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,777
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi,

    Quote Originally Posted by xdev
    Doug's method is the only one that is acceptable imo - javascript is the only correct way.
    I agree in this case that dougs method is neater and more accessible and is the method I would advise in a real situation.

    (However I must point out to others that the purpose of these tests is just to explore the properties of css in interesting ways and not in any way to say that this is the way to do it. I'm just looking to set puzzles to be solved that help people understand and learn css.)

    Thanks for the link Rudy its an interesting read. I think we all should take a balanced approach and use what is best for the job in hand. Obviously in the css forum I push css but I don't exclude other methods and try not to offer css as the only way.

    I am guilty of neglecting javascript but only because I spend too much time on css - if only the days were longer lol.

    Paul

  9. #34
    SitePoint Addict xDev's Avatar
    Join Date
    Jul 2003
    Location
    Moncton, New Brunswick, Canada
    Posts
    247
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B

    (However I must point out to others that the purpose of these tests is just to explore the properties of css in interesting ways and not in any way to say that this is the way to do it. I'm just looking to set puzzles to be solved that help people understand and learn css.)

    Paul
    Great puzzles too! The amount of thinking involved to solve them (this one at least) is on par with programming exercises in text books ... algorithms, linked lists, sorting etc. I have never flexed my logical-thinking muscles in CSS to this extent and it was a very rewarding exercise. Thanks Paul, can't wait for the next one

    -xDev

  10. #35
    SitePoint Enthusiast
    Join Date
    Apr 2004
    Location
    Denmark
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    http://home1.stofanet.dk/samtaletera.../projekt1.html +
    http://home1.stofanet.dk/samtaletera.../projekt2.html

    1) sometimes when i mouse upwards the span element on link 2 doesnt disappear when i mouse over link 1 (especially when i mouse upwards fast)

    does this have to do with too little space between link 2 and the span element connected to link 2?

    if so, is this kind of functionality not suited perfectly to a 1px border scheme?

    2) the span elements arent links in ie as they are in firefox (which makes better sense)

    is there any way to fix this?

    (im no all together sure what i need that for, but i have vague ideas as to pure css popup menus)

    thanks
    rasmus

  11. #36
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,777
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi,

    1) sometimes when i mouse upwards the span element on link 2 doesnt disappear when i mouse over link 1 (especially when i mouse upwards fast)

    does this have to do with too little space between link 2 and the span element connected to link 2?
    Yes thats the reason i used bigger borders to minimise the effect. It can still happen if you mouse very fast but that would happen in js as well I believe in certain circumstances.

    This is the working version of my menu which has a couple of fixes in that the active link has been given a negative margin so that it behaves better.
    http://www.pmob.co.uk/temp/disjointednavlist1.htm

    In reality dougs JS method is the best in a real life situation.

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


    Code:
    the span elements arent links in ie as they are in firefox (which makes better sense)
    
    is there any way to fix this?
    Not sure what you mean! The span element will still be a link as it is between the <a> tags. If your mouse is fast enough to get to the span before it switches off then it will link to the page that it was originally positioned from.

    If you are thinking of trying to make a pop up menu with more than one active link that pops up then I think you will be out of luck. You can do this in mozilla browsers because you can use hover on other elements (as in the suckerfish menus).

    The nearest that anyone has got to pre css pop ups with more than one active link can be seen here:

    http://www.sitepoint.com/forums/showthread.php?t=154391

    Hope some of that helps.

    Paul

  12. #37
    SitePoint Enthusiast
    Join Date
    Apr 2004
    Location
    Denmark
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    maybe i wont have any luck but id still understand more on the way

    ive made a slight alteration in http://home1.stofanet.dk/samtaletera.../projekt1.html
    so the span on link 2 overlaps with link 2

    in ie the problem is that when i mouse from the actual link 2 a and onto the span element, the curser changes from the link hand to the text version over the text and the normal arrow in the space to the right of the text inside the span element

    does this make more sense than before?
    in firefox the entire span element conforms to the a {display: block} spec perfectly

    thanks
    rasmus

  13. #38
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,777
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi,

    You can just set the cursor to display the link hand if you want.
    Code:
    ul#navlist li a:hover span {visibility:visible;cursor:pointer;cursor:hand}
    Paul

  14. #39
    SitePoint Enthusiast
    Join Date
    Apr 2004
    Location
    Denmark
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    great thanks

  15. #40
    ? ro0bear's Avatar
    Join Date
    Oct 2007
    Location
    United Kingdom
    Posts
    624
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I havent tested this in IE6 but it works in IE7, Firefox, Opera, and Safari.

    The HTML does not need to be altered from the original HTML submitted by Paul O'B using this method.

    HTML 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">
    ul#navlist 
    {
     list-style-type: none;
     font-family: Arial, Helvetica, sans-serif;
     width:160px;
     padding: 0;
     margin: 0;
    }
    ul#navlist a {
    width: 100&#37;;
    text-align:center;
    background-color: #036;
    color: #EEE;
    text-decoration: none;
    display: block;
    border: 3px solid red;
    }
    
    ul#navlist li.active a {background:#ffffcc;color:red;}
    ul#navlist:hover li a {background-color: #036;color: #EEE;}
    ul#navlist li a:hover {background: #ffffcc;color:black;}
    </style>
    </head>
    <body>
    <ul id="navlist">
      <li class="active"><a href="#">Link 1</a></li>
      <li><a href="#">Link 2</a></li>
      <li><a href="#">Link 3</a></li>
      <li><a href="#">Link 4</a></li>
      <li><a href="#">Link 5</a></li>
      <li><a href="#">Link 6</a></li>
    </ul>
    </body>
    </html>
    ro0bear

  16. #41
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,777
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Thanks RoObear, yes that does indeed work in all but IE6. Unfortunately as far as this quiz was concerned IE6 was a requisite (and in 2004 when the quiz was set 95&#37; of users used ie6).

    The problem is that ie6 doesn't understand hover on anything but anchors so you can't get this to work in IE6 which was actually the trick you had to overcome on the quiz.

    Thanks for showing how easy it could be if IE6 wasn't around

  17. #42
    ? ro0bear's Avatar
    Join Date
    Oct 2007
    Location
    United Kingdom
    Posts
    624
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Thanks RoObear, yes that does indeed work in all but IE6. Unfortunately as far as this quiz was concerned IE6 was a requisite (and in 2004 when the quiz was set 95% of users used ie6).

    The problem is that ie6 doesn't understand hover on anything but anchors so you can't get this to work in IE6 which was actually the trick you had to overcome on the quiz.

    Thanks for showing how easy it could be if IE6 wasn't around
    I thought this way was too easy

    I learn something new with every CSS puzzle

  18. #43
    SitePoint Enthusiast
    Join Date
    Jan 2009
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS solution without document fudges

    These days, happily, web authors are much more aware of the importance of meaningful document structure, and I hope no-one would consider using Paul's original solution (fudging the content of the LIs) in a real-world web page.

    It is very nearly possible to solve the test without document fudges whilst using CSS2.1 and working within the IE6 restriction of not being able to use :hover on anything other than A elements. The only concession is that in IE it is necessary to hover over the bounding box of the link text because the blank space at either side will not respond to the hover.

    At the heart of this test is the fact that the only element which responds to hover in IE6 is an A element with an href attribute. The solution presented here is based on a principle similar to that used in the "long clipped columns" multi-column layout technique for achieving the visual appearance of equal height columns. It works by applying a large blue border-top or border-bottom to a hovered A element and a corresponding negative margin; this border, which thus "bleeds out" of the margin box, masquerades as the background of the "current page" link and is clipped at the edges of the UL. (Bizarrely, IE gets trapped in a hover-unhover cycle if this border is too large. Moreover, it incorrectly calculates the negative margin corresponding to the border if it is specified in ems and the browser text-size is other than "medium". Hence the border needs to be small and measured in px.)

    Note that this is essentially the only approach possible without using document fudges, because the "current page" item need to be visually affected by the hover. If the effect is not caused by some extraneous descendant added to the A element then it has to result from some part of the A's border box.

    Fortunately, Firefox 2 responds correctly to the semantically-meaningful CSS created for CSS2.1-compliant browsers (which Firefox 3.5, Opera 10 and Safari 4 come close to being), but IE needs a couple of code-forks. I've used the IE6 underscore hack to highlight these IE-only styles, but you'd have to use other delivery methods to apply these styles to IE7 if you want the solution to work there too. I've used zoom:1 to apply hasLayout, but of course there are many other ways to achieve that too.

    For the solution to work in CSS2.1-compliant browsers, you need to add a class to each LI so that you can target each one individually. (With CSS3 you would be able to use ::nth-child instead.) For IE you also have to kill any whitespace between consecutive LIs and between the last LI and the UL's end tag, due to its habit of failing to correctly collapse this whitespace in several situations involving styling lists.

    A fully-working solution is simply not possible for IE. It suffers from a bug whereby in order to make the whole block-displayed A element respond to hover rather than just the bounding box of the text, it is necessary apply position:relative to the A. But then, in order to ensure that the hover-induced border lies underneath the other As so as not to obscure them, the hovered A would need to be given a lower z-index than the others. Easy in principle, but alas IE suffers from three z-index bugs which make this impossible.

    The first bug is that the z-index property cannot accept the values 0 and auto in IE6. This leaves us with the following two options:

    1. give z-index:2 to all As and then change the z-index to 1 when hovering;
    2. do the same but change the z-index to -1 when hovering.

    The second bug is that IE6 will not change a positive z-index to another positive z-index on hover unless the position or float properties are also changed. We could theoretically work with float here, but IE will add a small text-size-dependant space under the A if it is floated, which breaks the layout. Thus option 1 is impossible since it relies on position:relative remaining unchanged.

    The second option -- changing to z-index:-1 -- is impossible because of a third bug: IE gets trapped in a hover-unhover cycle when hovering over the spaces to either side of the link text bounding box, although hovering over the link text works correctly. Note that the As need hasLayout (as is often the case with position:relative elements) else IE gets trapped in a different hover-unhover cycle when calculating the border and negative margin. Unfortunately this use of hasLayout doesn't fix the first cycle. (Additionally, IE6 crashes if hasLayout is applied only when hovering.)

    Hence our only option is to change the As from position:static to position:relative on hover, which works well but only responds to hovers on the bounding box of the text as mentioned above. (Additionally, hasLayout must not be applied to the static As else a hover-unhover cycle occurs and furthermore the red borders are not hoverable, yet hasLayout must be added on hover when the As change to position:relative.)

    The nearest solution is thus:

    Code HTML4Strict:
    <ul id="navlist">
    	<li class="link-1"><a href="">Link 1</a></li
    	><li class="link-2"><a href="">Link 2</a></li
    	><li class="link-3 active"><a href="">Link 3</a></li
    	><li class="link-4"><a href="">Link 4</a></li
    	><li class="link-5"><a href="">Link 5</a></li
    	><li class="link-6"><a href="">Link 6</a></li
    ></ul>

    Code CSS:
    ul#navlist {
    	background-color: #ffc;
    	overflow: hidden;
    	position: relative;
    	padding: 0;
    	width: 160px;
    	list-style-type: none;
    	font-family: Arial, Helvetica, sans-serif;
    }
    ul#navlist li {
    	zoom: 1;
    	display: block;
    }
    ul#navlist li.active a {
    	color: red;
    }
    ul#navlist li a {
    	background-color: #036;
    	display: block;
    	position: relative;
    	_position: static;
    	z-index: 1;
    	border: 0 solid red;
    	text-align: center;
    	color: #eee;
    	text-decoration: none;
    }
    ul#navlist li.link-1 a,
    ul#navlist li.link-2 a {
    	border-width: 5px 1px 0;
    }
    ul#navlist li.active a {
    	border-width: 5px 1px;
    }
    ul#navlist li.link-4 a,
    ul#navlist li.link-5 a,
    ul#navlist li.link-6 a {
    	border-width: 0 1px 5px;
    }
    ul#navlist li.active a {
    	background-color: transparent;
    }
    ul#navlist li a:hover {
    	z-index: 0;
    	_position: relative; _zoom: 1;
    	_z-index: -1;
    	background: #ffc;
    	color: black;
    }
    ul#navlist li.link-1 a:hover,
    ul#navlist li.link-2 a:hover {
    	margin-bottom: -200px;
    	border-bottom: 200px solid #036;
    }
    ul#navlist li.link-4 a:hover,
    ul#navlist li.link-5 a:hover,
    ul#navlist li.link-6 a:hover {
    	margin-top: -200px;
    	border-top: 200px solid #036;
    }
    Last edited by Anton P; Apr 19, 2009 at 11:49. Reason: formatting fix

  19. #44
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,777
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi Anton,

    Welcome to Sitepoint and welcome to the quiz although it seems you were 5 years to late for this party

    Quote Originally Posted by Anton P View Post
    These days, happily, web authors are much more aware of the importance of meaningful document structure, and I hope no-one would consider using Paul's original solution (fudging the content of the LIs) in a real-world web page.
    I always stipulate that these quizzes are just for fun and not most are not meant for real world use but just to push the limits of CSS as I mentioned in post #33.
    (However I must point out to others that the purpose of these tests is just to explore the properties of css in interesting ways and not in any way to say that this is the way to do it. I'm just looking to set puzzles to be solved that help people understand and learn css.)
    It is very nearly possible to solve the test without document fudges whilst using CSS2.1 and working within the IE6 restriction of not being able to use :hover on anything other than A elements. The only concession is that in IE it is necessary to hover over the bounding box of the link text because the blank space at either side will not respond to the hover.
    Yes there are various other ways to do this and had you submitted this in 2004 you may have been in with a chance of winning lol (Apart from the fact that IE6 doesn't really work full width which was a requirement .)

    However your method is very good and thanks for having a go and the good explanation even if you were a bit late.

    Why don't you have a look at some of the newer quizzes if this interests you and see what you can come up with.

    Here is a link to the latest (relatively easy) quiz but you will find links to the other quizzes at the bottom of the first post and some are quite challenging

  20. #45
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Paul, you say relatively easy yet only one fully correct answer so far .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  21. #46
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,777
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Easy for you then Ryan

    I guess it's awkward if you don't know the pitfalls and are not as familiar with sticky footers.

  22. #47
    SitePoint Enthusiast
    Join Date
    Jan 2009
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Welcome to Sitepoint and welcome to the quiz although it seems you were 5 years to late for this party
    Thanks! Heh, yes; I stumbled across one of the 2009 quizzes and thought I'd look through the previous ones.

    I always stipulate that these quizzes are just for fun and not most are not meant for real world use but just to push the limits of CSS as I mentioned in post #33.
    Sure; the fun thing about the older ones is what they tell us about the way we used to think back then! By contrast, of course, the fun of solving modern-day web challenges lies in working within the constraints of correct usage.

    Yes there are various other ways to do this and had you submitted this in 2004 you may have been in with a chance of winning lol (Apart from the fact that IE6 doesn't really work full width which was a requirement .)

    Well, it's the only solution possible without document fudges. The interesting thing is that it was possible at all! In these days of progressive enhancement enlightenment, of course, we'd just use a method like ro0bear's one above for modern browsers and fallback in IE6 to having the "current page" link highlighted at all times.

    Why don't you have a look at some of the newer quizzes if this interests you and see what you can come up with.
    Have already done so (up to number 15), thanks! This particular quiz was actually the hardest of all if you are avoiding document fudges (due to the background-bleed-through-negative-margins not being widely known even today, and due to the minefield of IE6 bugs concerning lists, hover and whitespace handling). It was also one which presents a genuine real-world problem; a clean solution to this particular quiz would have probably received wide publicity in the industry back in 2004! That's why it interested me sufficiently to post my solution.

    I found some of the other quizzes a bit gimmicky, but several stood out as interesting:

    The very first quiz: I had a moment of excitement when I read it without having noticed the publication date! This is another quiz where a clean CSS2.1 solution would certainly generate a lot of publicity. Alas dropping into quirks mode is the only way possible, although these days I'd like to think many authors wouldn't know a thing about quirks mode (other than to avoid it all all costs)!

    Quiz 5, the four-cell table: a fun reminder of the golden age of layout experimentation that was 2004! The principle involved is still meaningful today, although it's never been the "correct" equal-height columns technique because of the mark-up nesting.

    Quiz 7, the arrow-image near the right of a container: a nice idea to demonstrate that there are some easy things that CSS2.1 can't do (when used correctly). This particular problem is handled in CSS3 thank goodness.

    Quiz 8, the three-column layout: again interesting because of what it tells us about the state of knowledge at that time (early 2007). Even just two years ago there was still very little understanding of the mechanics of grid-like layouts. I would hope that many CSS authors would find this quiz easy today.

    The one involving the circle of overlapping coloured squares: a fun exercise in lateral thinking! Like the first quiz, on reading the instructions you had me fooled for a moment into thinking you'd hit upon a solution to an intractable problem!

    The organisational flowchart one: nice because it reaps the benefit of the fact that semantic mark-up doesn't mean minimal mark-up but rather means sufficiently descriptive mark-up. The right quantity and quality of markup leads to significant layout flexibility as this quiz shows.

    Quiz 11, the centred black box borders one: nice idea because it demonstrates a couple of facts about percentages that are not as well-known as they should be.

    Nice work with these quizzes! I'll certainly take a peek at the latest ones when I get time.

  23. #48
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,777
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi Anton,

    Great comments and a great round-up

    Thanks for taking the time to look through and as you correctly pointed out the quizzes are more of a fun learning exercise (for us all) and expose some idiosyncrasies in CSS that we can utilise or avoid.

    It's quite surprising that a number of bugs have been exposed in the quizzes even with things that should have worked and IE was not the only cuplrit (although it often is at fault).

    The very first quiz: I had a moment of excitement when I read it without having noticed the publication date! This is another quiz where a clean CSS2.1 solution would certainly generate a lot of publicity. Alas dropping into quirks mode is the only way possible, although these days I'd like to think many authors wouldn't know a thing about quirks mode (other than to avoid it all all costs)!
    I solved that in standards mode years ago

    http://www.pmob.co.uk/temp/2scroll2.htm

  24. #49
    SitePoint Enthusiast
    Join Date
    Jan 2009
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    It's quite surprising that a number of bugs have been exposed in the quizzes even with things that should have worked and IE was not the only cuplrit (although it often is at fault).
    Sure; in fact I think these kind of CSS games are a fantastic way of turning up holes in the CSS spec as well.

    The very first quiz: I had a moment of excitement when I read it without having noticed the publication date! This is another quiz where a clean CSS2.1 solution would certainly generate a lot of publicity. Alas dropping into quirks mode is the only way possible, although these days I'd like to think many authors wouldn't know a thing about quirks mode (other than to avoid it all all costs)!
    I solved that in standards mode years ago
    pmob.co.uk/temp/2scroll2
    Only by forking the code for IE6 . I can't think of any standards-mode solution that works cross-browser without code forks. Of course, in practice, combining the AP one with the IE6 fork is definitely the way to go to achieve this layout on the modern web, as your demonstration very nicely shows.

  25. #50
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,777
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Only by forking the code
    That's what most people think of my code


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
  •