SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 45
  1. #1
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,369
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)

    Test your CSS skills

    Hi,

    I've been handing out lots of tips and useful info over the last year so I thought it was about time to see what you've all learned .

    I was asked to fix this problem the other day and it took me about half an hour to work out how to do it. So lets see how bright you lot are and who can give me the solution first.

    Look at this link in firefox/ mozilla :

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

    You will see that it works perfectly in firefox etc

    Now look at it in IE6 - it doesn't work at all

    Your mission (should you accept) is to make it work in ie6 as it now does in firefox.

    The Problem:
    In good browsers you can set bottom:0 and top:180px and keep your element at the bottom of the page and always 180px from the top. This allows the bottom element to reduce as the window is made smaller in height but preserves the top part of the page.

    However IE6 won't let you set dimensions of an element by using the positioning properties alone.

    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
    Use as many hacks as you like (you will need them) but they must still validate at the w3c validator
    Must still work in Firefox
    Must work in IE6 exactly the same as my example above

    Hints:
    My solution involved changing nothing in the body of the html.
    Use * html to offer css code to IE6 if necessary.
    Use html>body to offer css code to firefox/mozilla.
    I changed/added about 11 lines of css and one other thing outside the css to make this work.

    The winner will be the first one to post a correct solution in this thread. Your method doesn't have to be the same as mine but must work the same. The prize will be your own satisfaction in being the first with the best solution.

    Have fun

    Paul

    PS If no-one can work it out (or can't be bothered) then I will post a solution in a couple of days (Also the person I originally did this for is barred from the competition.)

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

    Congratulations to Nick (Doctornick) who was the first person to solve this little problem

    His solution was very close to my original solution and used the same techniques.

    Well done Nick - heres a drink on me

    Just in case anyone else want to have a go at this I will post Nicks and my solution in a couple of days.

    Paul

  3. #3
    SitePoint Wizard jag5311's Avatar
    Join Date
    Jan 2003
    Location
    Somewhere in Indiana
    Posts
    3,082
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok, I don't have the answer, but I am quite curious as to how you can get the scroll bar to do what it does when the window is not maximized, but when it is maximized, the scrollbar goes away. Thats an interesting effect. Well, in Firefox anyways.

  4. #4
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,270
    Mentioned
    60 Post(s)
    Tagged
    3 Thread(s)
    paul, i had a look at it in both firefox and ie6, and other than a scrollbar i can't see the difference -- perhaps you could've pointed out a little more clearly what it is that "works perfectly in firefox" and "doesn't work at all" in IE6
    Quote Originally Posted by Paul O'B
    Use as many hacks as you like (you will need them) ...
    i might have tried it until you said that

    i don't do hacks, i simplify the design instead

    rudy.ca | @rudydotca
    Buy my SitePoint book: Simply SQL
    "giving out my real stuffs"

  5. #5
    SitePoint Zealot
    Join Date
    May 2003
    Location
    London
    Posts
    117
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I also don't see a difference apart from the scrollbar. Was there one?

  6. #6
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,270
    Mentioned
    60 Post(s)
    Tagged
    3 Thread(s)
    upon closer inspection, the content in IE6 appears cut off with no way to scroll down to see it!!

    paul, that could be interpreted as merely the unfortunate results produced by an inexperienced coder, not somethnig that you had to apply l33t css sk1lz0rz to achieve

    i've seen similar whoopsies, such as the left side being cut off with no way to scroll over to read it (the result of a fixed width div being "centered" by assigning a negative left margin)
    rudy.ca | @rudydotca
    Buy my SitePoint book: Simply SQL
    "giving out my real stuffs"

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

    Quote Originally Posted by bryan
    ok, I don't have the answer, but I am quite curious as to how you can get the scroll bar to do what it does when the window is not maximized, but when it is maximized, the scrollbar goes away. Thats an interesting effect. Well, in Firefox anyways.
    I'm not sure what you mean Bryan as the vertical scrollbar is still there when maximised on my screen unless you have a very long screen. The scrollbar is just set to auto which means it will appear when required.

    Quote Originally Posted by Rudy
    paul, i had a look at it in both firefox and ie6, and other than a scrollbar i can't see the difference -- perhaps you could've pointed out a little more clearly what it is that "works perfectly in firefox" and "doesn't work at all" in IE6
    Perhaps I should have done that

    In Ie6 the content disappears below the bottom of the screen and is unreachable because there is no vertical scrollbar. In firefox the content is always positioned 20px from the bottom of the screen and 170px from the top whatever the screensize. The content is always accessible by vertical scrollbar.

    As ie doesn't allow you to define an elements size using the properties left, right ,bottom and top the solution requires some lateral thinking and some alternate styles for ie.

    Quote Originally Posted by rudy
    i don't do hacks, i simplify the design instead
    If you can do it without hacks without changing the design I will be very impressed . Although I try to avoid hacks I will use them when someone requires a specific layout and won't change their design to accomodate.

    Although using * html is classed as a hack I just see it as offering alternative styles to ie. The styles passed to ie are normal styles and could be done without hacks but then mozilla wouldn't work.

    However, there will be extra points for anyone who can do it without offering alternative code to the two browsers in question

    Paul

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,369
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    HI Rudy,

    paul, that could be interpreted as merely the unfortunate results produced by an inexperienced coder, not somethnig that you had to apply l33t css sk1lz0rz to achieve
    Not quite sure what you mean Rudy

    The brief is to produce a fully working page in ie6 to the same design as the one viewed in firefox.

    It all boils down to how are you going to put a container that sits almost at the bottom of the screen and stays 170px away from the top when the page is resized smaller (heightwise). The container must offer a vertical scrollbar so that content is accessible.

    I hope that's clearer - this was supposed to be for fun

    Paul

  9. #9
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,270
    Mentioned
    60 Post(s)
    Tagged
    3 Thread(s)
    again, you should define what you mean by "do it"

    in the real world, i would "fix the problem" quite easily, and in way less than a half hour, by allowing the page to have a normal scrollbar

    this violates a couple of your premises, i guess, like the design with the cutesy embedded scrollbar

    apologies if the term "cutesy" offends

    i guess i should just stfu, sorry, i did not mean to spoil your challenge
    rudy.ca | @rudydotca
    Buy my SitePoint book: Simply SQL
    "giving out my real stuffs"

  10. #10
    SitePoint Enthusiast
    Join Date
    Apr 2004
    Location
    Cambridge
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Wink

    in the real world, i would "fix the problem" quite easily, and in way less than a half hour, by allowing the page to have a normal scrollbar
    Rudy - it should be fairly obvious that this problem was posted as a theoretical challenge rather than a real world problem. So take it as it was ment rather than trying to twist the problem the way you want it.

    Don't let your CSS inadequacy make you all bitter
    ;-)

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,369
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    i guess i should just stfu, sorry, i did not mean to spoil your challenge
    lol - I don't mind you're always an interesting read Rudy

    Paul

  12. #12
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by danson
    Don't let your CSS inadequacy make you all bitter
    ;-)
    Rudy's CSS skills are far from inadequate. Some people just find different ways around their problems .

  13. #13
    SitePoint Enthusiast
    Join Date
    Apr 2004
    Location
    Cambridge
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    true...whilst other's just settle for a less-than-perfect design.

  14. #14
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,270
    Mentioned
    60 Post(s)
    Tagged
    3 Thread(s)
    danson, them's fighting words

    paul, would you please set up a challenge for the two of us

    these are the conditions: no hacks, no spans, no divs, must validate xhtml strict and css1

    danson, are you game? put up, or, as the kids say, stfu

    rudy.ca | @rudydotca
    Buy my SitePoint book: Simply SQL
    "giving out my real stuffs"

  15. #15
    SitePoint Enthusiast
    Join Date
    Apr 2004
    Location
    Cambridge
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No divs? Paul - I do believe we have found the source of Rudy's trouble with CSS! How about we throw in "no styles" and be done with it? =-)

    If paul can think up a decent challenge involving those conditions - bring it on.

    *OR* we could just have a go at Paul's current challenge - the level playing field that it is. I feel, however, that you're probably too...lets say 'nervous'...to play on square terms ;o)

    i guess i should just stfu, sorry, i did not mean to spoil your challenge
    Bring it on - kiddo.

    (I'll play you for that "Database Guru of the Year" sticker - there's an empty patch on my fridge).

  16. #16
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,270
    Mentioned
    60 Post(s)
    Tagged
    3 Thread(s)
    sorry, i don't do css hacks, i cannot do the current challenge

    i guess you win, then, dude

    have fun
    rudy.ca | @rudydotca
    Buy my SitePoint book: Simply SQL
    "giving out my real stuffs"

  17. #17
    SitePoint Wizard jag5311's Avatar
    Join Date
    Jan 2003
    Location
    Somewhere in Indiana
    Posts
    3,082
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Bring it on - kiddo.

    (I'll play you for that "Database Guru of the Year" sticker - there's an empty patch on my fridge).
    I know your new and stuff, but you should really watch it. Rudy has been a great resource and help to many here at Sitepoint, hence why he received his Database Guru of the Year. As Vinnie said, people all have their own way of coding.

    There is always something to be said about someone "coming out of the box and swinging". With you being only 4 posts deep Danson, I would say you are a candidate for "coming out and swinging".

    Chill.

    Back on to topic though, Rudy, I am curious, you mentioned No Divs in your challenge. Do you consider a div a hack?

  18. #18
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,270
    Mentioned
    60 Post(s)
    Tagged
    3 Thread(s)
    no, not at all, a div is not a hack

    i just thought i'd make the challenge more interesting, since, as you know, it is so frightfully easy to succumb to divitis

    thanks for sticking up for me

    besides my sql sk1llz0rz, danson, i also know css fairly well, having started using it in 1999 (i'm one of the evolt.org founders, to give you an idea of my background)

    you?
    rudy.ca | @rudydotca
    Buy my SitePoint book: Simply SQL
    "giving out my real stuffs"

  19. #19
    SitePoint Enthusiast
    Join Date
    Apr 2004
    Location
    Lancs, England
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    aww, i was looking forward to a code-off

  20. #20
    SitePoint Wizard jag5311's Avatar
    Join Date
    Jan 2003
    Location
    Somewhere in Indiana
    Posts
    3,082
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Bring it on - kiddo.
    Sorry, I also giggled at this. I have seen a picture of Rudy (or I assume its you Rudy ), but Danson, he isn't a kid.

  21. #21
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,270
    Mentioned
    60 Post(s)
    Tagged
    3 Thread(s)
    yeah, i have kids older than you, bryan

    my most recent picture is right on my home page
    rudy.ca | @rudydotca
    Buy my SitePoint book: Simply SQL
    "giving out my real stuffs"

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

    If theres anyone left alive lol.

    I'll post another quiz tomorrow with no hacks - (although I will allow divs ).

    I've got an idea but I just have to work out how to do it myself first

    Paul

    BTW has anyone apart from Nick solved the original question yet?

  23. #23
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,369
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Off Topic:


    Quote Originally Posted by Rudy
    yeah, i have kids older than you, bryan
    I'm getting to like you more Rudy now that I know you're a similar age to me lol


  24. #24
    SitePoint Wizard jag5311's Avatar
    Join Date
    Jan 2003
    Location
    Somewhere in Indiana
    Posts
    3,082
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    geez, I feel so young being around Grandpas just kidding.

    How old are you two btw. I am 23

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

    Thats me in the picture from the original quiz link above:

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

    Taken last year on holiday in Spain.

    See if you can guess (without looking at my sitepoint profile ).

    Paul


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
  •