SitePoint Sponsor

User Tag List

Results 1 to 25 of 70

Threaded View

  1. #1
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,374
    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


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
  •