SitePoint Sponsor

User Tag List

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

    CSS - Test Your CSS Skills Number 28 (max-width)

    CSS - Test Your CSS Skills Number 28 : Quiz now ended - Solution in post #38

    Just as you are recovering from the last mammoth quiz, please don't rush to put your braincells away just yet as I have another CSS myth to squash.

    Following on from a suggestion by Luki_be in this thread
    I have another challenge for you to do which is to implement max-width in IE6 without using javascript or expressions. We already squashed min-width in a previous quiz so now we attack max-width with a vengeance.

    As you know IE6 doesn't support max-width and commonly authors will use an expression or javascript to accomplish this which is undesirable for a number of reasons. Therefore your mission is to create a page that can be squashed to nothing but as it expands it stretches to only a maximum width of 800px (but it could of course be anything).

    Once the element is at 800px width it should then be centred in the viewport if the viewport is wider. This would be the same as setting max-width of 800px and using margin:auto.
    Edit:


    Edit:

    I should also point out that I'm not looking to mimic this type of behaviour as follows.

    Code:
    .test{
    max-width:800px;
    width:70%;
    }
    The element .test should be content width and then get capped at 800px width.

    Code:
    .test{max-width:800px}




    Look at the attachments which show working examples of max-width in action in IE6.

    The answer is relatively simple and took me about 10 minutes to work out but then I may just have been lucky as google shows no results for this at all

    The basic rules are:

    valid css/html
    no tables
    no javascript
    No expressions/behaviours etc
    no conditional comments in the body of the html

    Try to keep the code as simple and usable as possible and the look as close to my original as you can (which is shown in the attachment).

    Any questions or if anything is unclear just ask and remember this is just for fun (although this solution will indeed be a very workable solution for IE6)

    Solutions to the quiz will be posted at the end of the week (or longer) depending on how it goes

    Have fun .

    Paul

    PS. : In case you missed the other tests you can find them all listed here:
    Attached Images Attached Images

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Paul question-did you need any additional elements? Look at this base
    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>Max width</title>
    <style type="text/css">
    *{margin:0;padding:0;}
    #outer
    {
    	margin:0 auto;
    	max-width:800px;
    	background:blue;
    }
    </style>
    </head>
    <body>
    <div id="outer">
    	<p>test</p>
    </div>
    </body>
    </html>
    Did you need another element? You don't have to tell me where I'm just wondering if it involves one.
    How big was your CSS after completion?
    Edit:

    If you can't answer that's fine too
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Yes you do need some extra elements but not many. I won't say exactly how many as that would be too much of a clue at this stage. The answer is quite uncomplicated html wise and of course my answer may not be the only way to do it as I'm sure you will all surprise me once again

  4. #4
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    oh, its on already? but its almost 12pm!! i will have a look tomorrow morning (while im still zombified)

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    I should also point out that I'm not looking to mimic this type of behaviour as follows.

    Code:
    .test{
    max-width:800px;
    width:70&#37;;
    }
    The element .test should be "content width" and then get capped at 800px max width.

    Code:
    .test{max-width:800px}

  6. #6
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,657
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    I'm guessing some kind of nested div border trick. But beyond that, not a clue?

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by EricWatson View Post
    I'm guessing some kind of nested div border trick. But beyond that, not a clue?
    Nope (not in my example anyway - but there may well be other solutions)

  8. #8
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,657
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    OK. I "really" don't have a clue then.

  9. #9
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    i remember trying to find a solution to this some time ago, i never did find it, so im very excited that it will be posted at the end of the quiz!

    this does not mean that i will stop trying.

  10. #10
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    It took you ten minutes? Not sure I should even bother then. I'll probably be 35 by the time I figured it out.

    I'll give it a try in the next few days.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  11. #11
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by kohoutek View Post
    It took you ten minutes? Not sure I should even bother then. I'll probably be 35 by the time I figured it out.

    I'll give it a try in the next few days.
    hahaha well said maleika!
    i just hope its nothing to do with his encyclopedic knowledge of css, i prefer the mathematical ones.

  12. #12
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Funny thing is Paul this can be done with a table soooooooo easy

    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>Max width</title>
    <style type="text/css">
    *{margin:0;padding:0;}
    table{margin:auto;}
    td{width:800px;background:blue;}
    </style>
    </head>
    <body>
    <table>
    <tr>
    <td>text</td>
    </tr>
    </table>
    </body>
    </html>
    Pure CSS-IDK-still trying though
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  13. #13
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    ok, solved it.
    making a usable example.

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Well done Timo the example you sent is exactly the same as mine It works very well doesn't it.

    I'm sure that many others can do this so get your thinking caps on. It needs very little code to achieve this.

  15. #15
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    yes! it does work well, i also made a max-width/min-width example to make it completely usable, (paul did too), because they really do complement each other.

    This is one of those thinking quizzes, that don't require any encyclopedic knowledge of css,
    and also, Paul gave plenty of clues (at least 4), so use those if your feeling stuck!

  16. #16
    SitePoint Wizard Blake Tallos's Avatar
    Join Date
    Jun 2008
    Location
    Cuyahoga Falls, Ohio.
    Posts
    1,510
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmmm, im guessing if you cant use min-width you can do something like
    Code CSS:
    min-width:1em;
    ? Using EM can make the container expand according to content.
    Blake Tallos - Software Engineer for Sanctuary
    Software Studio, Inc. C# - Fanatic!
    http://www.sancsoft.com/


  17. #17
    SitePoint Member
    Join Date
    Mar 2008
    Location
    Brussels, Belgium
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What if you wanted to set both the min-width and max-width? Or the min-height and max-height?

    You'd have to do a tradeoff, right? Because you can't set the width (or the height) at 2 different values. So there, you 're back to using javascript.

  18. #18
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Mal curtis from Sitepoint staff has also sent me a correct solution Well done Mal.

    Any other takers?

    Quote Originally Posted by Blake
    Hmmm, im guessing if you cant use min-width you can do something like CSS Code:
    min-width:1em;

    min-width doesn't work in IE6 Blake (see a previous quiz for answers on min-width)

    Quote Originally Posted by pixeline
    What if you wanted to set both the min-width and max-width? Or the min-height and max-height?
    You can use the ie6 min-width routine from a previous quiz and wrap it up with this max-width answer quite easily as already mentioned a couple of times above. This will allow you to mimic the exact behaviour of the following code in IE6:

    Code:
    .test{
    min-width:600px;
    max-width:1200px;
    }
    The quiz answer does not however cater for this types of structure below though:

    Code:
    .test{
    min-width:600px;
    max-width:1200px;
    width:70%;
    }
    The quiz is only concerned with max-width. We are not building max-height into it and so does not need to be discussed here (maybe another quiz at another time). Regarding min-height then you don't need to do anything for IE6 because it treats height as a minimum anyway.

    Remember these quizzes are for fun and to show your ability in manipulating css to produce the desired result. Whether or not the answers have real world applications is secondary to the quiz but indeed many of the quizzes do have useful real world uses.

  19. #19
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by pixeline View Post
    What if you wanted to set both the min-width and max-width? Or the min-height and max-height?

    You'd have to do a tradeoff, right? Because you can't set the width (or the height) at 2 different values. So there, you 're back to using javascript.

    no not really, i have currently min-width and max-width set without javascript in every browser, i can also set the min-height and max-height in any browser if i wanted to, but i don't see any real need for this as sticky footers are much more comfortable.

    there, im still not using javascript (for anything but fancy special effects).
    (please don't use expressions for your own sake, just write a small javascript function and leave it at that.)

    Remember these quizzes are for fun and to show your ability in manipulating css to produce the desired result. Whether or not the answers have real world applications is secondary to the quiz but indeed many of the quizzes do have useful real world uses.
    they always do, either in the form of knowledge, or in the form of the actual quiz, i always find them useful.
    but for reference reasons, the quizzes are kept separate and as simple as possible, regardless if they are usable or not (who knows, someone might make a usable version after seeing a quiz).

    this quiz is indeed usable in the above scenario.

  20. #20
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Another correct entry received from Erik J (who has also combined the min-width routine into the demo). Well done Erik

    How is everyone else doing?

    Do you need more clues?

  21. #21
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    I haven't tried yet and am not sure I will have enough time to do so this week. I have four clients that need attending to.

    If the weekend is included, I will definitely participate and try to solve the quiz.

    Anyway, congrats to everyone so far. I have no doubt that all things that were thought impossible wil be solved right here. Good times.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  22. #22
    SitePoint Enthusiast
    Join Date
    Jan 2009
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nice quiz idea! Funny we didn't think of it during the min-width quiz .

    One way to think about 'max-width' is that a box should expand naturally until a certain point – and is then prevented from expanding further. I suspect there's just one single way (modulo minor variations on a theme) to exploit IE6's rendering model to achieve this: I'm sure we've all come across a certain feature of IE6 where a box's width isn't as wide as we might have hoped (nor indeed as wide as it would have been in a CSS21-compliant browser), due to external factors, and often cursed it .

    (...All the while celebrating it at other times, wishing it were part of the CSS21 spec; it's that old "in-column typography vs grid-layout" dichotomy again!)

    Quote Originally Posted by Paul O'B View Post
    You can use the ie6 min-width routine from a previous quiz and wrap it up with this max-width answer quite easily as already mentioned a couple of times above. This will allow you to mimic the exact behaviour of the following code in IE6:
    Code:
    .test{
    min-width:600px;
    max-width:1200px;
    }
    Almost . Whilst the solution (assuming there's only one) plays nicely with 'min-width', it's not truly a 'max-width' replacement, even in the limited case where it is not used in conjunction with 'width'. In particular, my above characterization of 'max-width' omitted one other important behaviour of CSS21 max-width: that content which is wider than the container's computed 'max-width' should overflow. Alas the very IE6 behaviour which we can exploit to help produce our pseudo 'max-width' also /inhibits/ overflow, instead preferring to widen the container. Still, that's a different issue and there are other workarounds for it (which are also discussed in the min-width quiz, as it happens) and so this is not a concern.

    I also note that, in my solution at least, another well-known IE6 bug rears its head when combining the min-width and max-width techniques, but you have to look closely to see it! (I'll provide the details once the quiz is over.)

    Quote Originally Posted by Paul O'B View Post
    The quiz answer does not however cater for this types of structure below though:
    Code:
    .test{
    min-width:600px;
    max-width:1200px;
    width:70&#37;;
    }
    Indeed, and I'm going to stick my neck out and say that I strongly believe that there is no way to mimic a combination of 'width' and 'max-width' in IE6 using only HTML and CSS (except /perhaps/ using tables, which I haven't given much thought to because my gut feeling is "no" even then.) The thing about 'width' in IE6 is that it's really agressive; once you've set it (other than 'auto') I really don't think you can then suppress it, neither by fair means nor foul. The IE6 expanding box behaviour is but one consequence of this.

    Quote Originally Posted by Paul O'B View Post
    The quiz is only concerned with max-width. We are not building max-height into it and so does not need to be discussed here (maybe another quiz at another time). Regarding min-height then you don't need to do anything for IE6 because it treats height as a minimum anyway.
    Yes; unlike 'width', 'height' really does behave the same as CSS21 'min-height' in IE6. I was going to be brave (foolhardy?!) and claim that I believed that 'max-height' could not be mimicked in IE6. (Max-height is a strange concept in CSS21, since the idea that boxes ordinarily expand completely freely in the 'height' direction is central to the CSS21 rendering model. It's doubly so in IE6, where it's really hard to get things to overflow properly even at the best of times.) However, Timo (YuriKolovsky) has just stated that he has a working 'max-height' in IE6, so I'm going to give it some more thought first!

  23. #23
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm ashamed to say that i'm swamped with stuff to give it my own try this week but maybe if i got an opening i'm gonna give it a try. I hope Erik J.'s solution gets posted though. The combination of min/max seems very useful
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  24. #24
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Anton
    and is then prevented from expanding further. I suspect there's just one single way (modulo minor variations on a theme) to exploit IE6's rendering model to achieve this:
    Thanks for the comments Anton

    There are no quirks needed for this at all and the solution works in all browsers without using max-width for good browsers either. Indeed my min and max width version works in all browsers without using min and max width at all.

    Almost . Whilst the solution (assuming there's only one) plays nicely with 'min-width', it's not truly a 'max-width' replacement, even in the limited case where it is not used in conjunction with 'width'. In particular, my above characterization of 'max-width' omitted one other important behaviour of CSS21 max-width: that content which is wider than the container's computed 'max-width' should overflow.
    While you are 100&#37; correct that the content overflow should be visible by default if max-width is exceeded it would be a little churlish to say that it isn't a true representation of this behaviour of max-width for the purposes of the quiz.

    Especially as the problem is an inherent problem with width/height itself due to the expanding box problem in IE6. In fact we could disallow all quizzes so far on this basis as width does not work in any one of them the way it should do

  25. #25
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    However, Timo (YuriKolovsky) has just stated that he has a working 'max-height' in IE6, so I'm going to give it some more thought first!
    slight correction, i did not state that i have a working max-height, i only stated that i think i know how to make a max-height.


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
  •