SitePoint Sponsor |
|
User Tag List
Results 1 to 25 of 70
-
Sep 25, 2009, 12:28 #1
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 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%; }
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:Last edited by Paul O'B; Oct 4, 2009 at 09:55.
-
Sep 25, 2009, 12:56 #2
- Join Date
- Oct 2008
- Location
- Whiteford, Maryland, United States
- Posts
- 13,782
- Mentioned
- 16 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>
How big was your CSS after completion?
Edit:
If you can't answer that's fine tooAlways looking for web design/development work.
http://www.CodeFundamentals.com
-
Sep 25, 2009, 13:00 #3
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 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
-
Sep 25, 2009, 14:24 #4
- 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)
-
Sep 26, 2009, 06:29 #5
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 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%; }
Code:.test{max-width:800px}
-
Sep 26, 2009, 07:00 #6
- Join Date
- Dec 2007
- Location
- Carlsbad, California, United States
- Posts
- 3,658
- Mentioned
- 15 Post(s)
- Tagged
- 0 Thread(s)
I'm guessing some kind of nested div border trick. But beyond that, not a clue?
-
Sep 26, 2009, 07:20 #7
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
-
Sep 26, 2009, 08:36 #8
- Join Date
- Dec 2007
- Location
- Carlsbad, California, United States
- Posts
- 3,658
- Mentioned
- 15 Post(s)
- Tagged
- 0 Thread(s)
OK. I "really" don't have a clue then.
-
Sep 26, 2009, 10:48 #9
- 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.
-
Sep 26, 2009, 12:57 #10
-
Sep 26, 2009, 13:24 #11
-
Sep 26, 2009, 15:19 #12
- Join Date
- Oct 2008
- Location
- Whiteford, Maryland, United States
- Posts
- 13,782
- Mentioned
- 16 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>
Always looking for web design/development work.
http://www.CodeFundamentals.com
-
Sep 27, 2009, 01:47 #13
- 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.
-
Sep 27, 2009, 05:14 #14
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 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.
-
Sep 27, 2009, 05:32 #15
- 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!
-
Sep 27, 2009, 22:48 #16
- Join Date
- Jun 2008
- Location
- Cuyahoga Falls, Ohio.
- Posts
- 1,511
- 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;
Blake Tallos - Software Engineer for Sanctuary
Software Studio, Inc. C# - Fanatic!
http://www.sancsoft.com/
-
Sep 27, 2009, 23:10 #17
- 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.
-
Sep 28, 2009, 01:37 #18
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Mal curtis from Sitepoint staff has also sent me a correct solution
Well done Mal.
Any other takers?
Originally Posted by Blake
(see a previous quiz for answers on min-width)
Originally Posted by pixeline
Code:.test{ min-width:600px; max-width:1200px; }
Code:.test{ min-width:600px; max-width:1200px; width:70%; }
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.
-
Sep 28, 2009, 14:08 #19
- Join Date
- Nov 2007
- Location
- Malaga, Spain
- Posts
- 1,072
- Mentioned
- 4 Post(s)
- Tagged
- 0 Thread(s)
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.
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.
-
Sep 28, 2009, 14:14 #20
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 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?
-
Sep 28, 2009, 15:07 #21
- 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.
-
Sep 28, 2009, 16:24 #22
- 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!)
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.)
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.
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!
-
Sep 28, 2009, 18:18 #23
- 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
-
Sep 29, 2009, 01:33 #24
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Originally Posted by 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.
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
-
Sep 29, 2009, 02:03 #25
- 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!
Bookmarks