SitePoint Sponsor

User Tag List

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

    CSS - Test Your CSS Skills Number 33 :

    CSS - Test Your CSS Skills Number 33 : Quiz now ended - solution in post #44

    The last quiz was fantastic but was a little complicated for some so this time we are coming down to solve something a lot easier so that all levels can have a go.

    In this quiz we are going to solve a real life problem that affects IE7 and IE6 (and is a real pain at times).

    If you look at the attachment called "ff-leftandright" you will see the type of display I am looking for. If you then look at the attachment "ie7-leftandright" you will see what a hash IE7 has made of this simple task.

    All we have is a parent that is floated to the left but without a width so that it shrinks wraps its content. Then we place a fixed width element such as an image into the mix. Lastly we float two elements, one left and one right to line up with the element above's side edges.

    All is well in all browsers except IE7 and IE6 and the problem is that a right floated element in a width-less left floated parent will stretch the element to 100% width. The effect is ruined in completely in IE7 and the first element is stretched 100% wide but rather more strangely the second and third elements are broken in a different way to the first.

    It just goes to show how badly IE7 gets this wrong.

    Your task, should you accept, is to duplicate the FF-leftandright screenshot and make it work in IE6 and IE7 and to look exactly the same and have the same capabilities.

    You have to use the html that I provide but you can change the css as much as you want (although one answer doesn't really require much to be changed at all).

    There are some rules (there are always rules):

    The main thing is that the parent (.wrap) must be floated left and must have no width.

    The second main thing is that the fixed width element could be any size that you define but the layout must work without changing anything else. The point being that you cannot float the right element to the left and then use a fixed margin to push it into position.

    You can't change the html except for the css styles.

    It must
    work with variable sizes (such as a dynamic image of varying widths) as shown in my example where the same code works with the three different sized elements.

    Scripting, images, expressions etc are not allowed.

    If any of the above is unclear then just shout and I will clarify.

    I reserve the right to plug loopholes should they arise

    Here is the basic html

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    p {
        margin:0
    }
    .wrap {
        float:left;/* no width allowed*/
        clear:left;
        border:1px solid #ccc;
        padding:10px;
        margin:0 0 10px;
        background:#f2f2f2;
    }
    .image {
        height:150px;
        border:1px solid #000;
        background:red;
        line-height:150px;
        text-align:center;
    }
    .i1 {width:300px}/* cater for any width automatically*/
    .i2 {width:400px}
    .i3 {width:200px}
    .f {
        width:75px;
        height:75px;
        border:5px solid red;
        text-align:center;
        margin:1px 0 0;
        background:#ffc;
    }
    .fl {float:left}
    .fr {float:right}
    </style>
    <!--[if lte IE 7]>
    <style type="text/css">
    
    </style>
    <![endif]-->
    
    </head>
    <body>
    <div class="wrap">
        <p class="image i1">Image</p>
        <p class="f fl">Text Left<br>Text Left</p>
        <p class="f fr">Text Right<br>Text Right</p>
    </div>
    <div class="wrap">
        <p class="image i2">Image</p>
        <p class="f fl">Text Left<br>Text Left</p>
        <p class="f fr">Text Right<br>Text Right</p>
    </div>
    <div class="wrap">
        <p class="image i3">Image</p>
        <p class="f fl">Text Left<br>Text Left</p>
        <p class="f fr">Text Right<br>Text Right</p>
    </div>
    </body>
    </html>

    Edit:


    Edit:

    To plug the loophole:

    I want you to also be able to change the width and height of those 2 little boxes at the bottom and for the layout to still work without having to change the code again. It has to be automatic.



    Remember this is just for fun
    and there are no prizes.

    Don't post your answers in this thread but PM with the details instead so that all can have a go.

    Have fun.


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

  2. #2
    Resident curmudgeon bronze trophy gary.turner's Avatar
    Join Date
    Jan 2009
    Location
    Dallas
    Posts
    990
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quick and dirty solution sent.

    cheers,

    gary
    Anyone can build a usable website. It takes a graphic
    designer to make it slow, confusing, and painful to use.

    Simple minded html & css demos and tutorials

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,352
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Thanks Gary - that definitely works - well done

    There is another solution (or maybe more) so all entries gratefully received.

  4. #4
    Resident curmudgeon bronze trophy gary.turner's Avatar
    Join Date
    Jan 2009
    Location
    Dallas
    Posts
    990
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There had been a niggling at the back of my mind that there was a more elegant solution. Well, it came to me, and it should have been the first solution.

    cheers,

    gary
    Anyone can build a usable website. It takes a graphic
    designer to make it slow, confusing, and painful to use.

    Simple minded html & css demos and tutorials

  5. #5
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Another quick and dirty solution sent.

  6. #6
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Well I'm late to the party but my solution has been submitted as well.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,352
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Thanks Gary and Ray have the solution that I wanted Well done to both.

    Eric has a different solution which is quite inventive but not quite as flexible as the other solution. Well done Eric

    To plug the loophole:

    I want you to also be able to change the width and height of those 2 little boxes at the bottom and for the layout to still work without having to change the code again. It has to be automatic.

  8. #8
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Yay a classic simple quiz!
    Oh darn, was away (so busy with work) so now im sooo late...
    I will have a look later today

    ...
    OH its THIS bug again! I know this one!

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,352
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi Timo - no rush have a go when you can

    I have another entry from Eric Watson which is the same as Gary's first entry. Well done - but it can still be improved

  10. #10
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Alright! Third solution submitted - that one has to be it?

  11. #11
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,589
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quick solution sent before I leave for a few days
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

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

    Eric yes that's the right one now well done

    Ryan that is a solution but is the same as the first attempts from Gary and Eric and therefore could be improved but well done anyway

  13. #13
    SitePoint Enthusiast
    Join Date
    Feb 2006
    Posts
    62
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I like this kind of quiz -- usable in the real world and doesn't take all day to figure out...

    John

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,352
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Thanks John

    I have your entry and it's correct - well done and thanks for taking part.

  15. #15
    SitePoint Member Catharsis's Avatar
    Join Date
    Mar 2010
    Location
    Oakland, CA
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Submitted my solution

  16. #16
    SitePoint Member
    Join Date
    Feb 2009
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That was absolutely easy. Only took 3 properties and doesn't require IE conditionals.

  17. #17
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,352
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Well done Catharsis that was the correct solution

    Thanks for your entry kingkool68 and that works also but is not the optimal solution but well done anyway. (It's the same solution that some of the others first gave me.)

    Thanks to all entries so far and glad to see some different names for a change

  18. #18
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,220
    Mentioned
    237 Post(s)
    Tagged
    1 Thread(s)
    Right... I'll see what I can do... it's been so long since I touched this (the last few months have been less web-wise that I wanted) that I need to refresh my skills (again ).

    It will have to be tomorrow though

  19. #19
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,352
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    No Rush Nuria

  20. #20
    SitePoint Enthusiast
    Join Date
    Mar 2009
    Posts
    67
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    in IE7 why is it that only the first "wrap" stretches 100&#37; and not all 3 of them?

    I sent you my solution, I would have to say it's quick and dirty too

  21. #21
    SitePoint Enthusiast
    Join Date
    Mar 2009
    Posts
    67
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    wait a minute... I think I might of broken a rule... depends what you mean by "cant tamper with the html"

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

    Thanks for your entry but yes you broke the rules and you can't change any of the html between the body tags.

    You can't use fixed widths anyway as that would be cheating. The design needs to cater for whatever width that red box happens to be. The widths I set for the box are just examples but the layout must works if the widths are changed (e.g. in the case of a dynamic image being inserted that you don;t know the size of).

    Have another try

    in IE7 why is it that only the first "wrap" stretches 100&#37; and not all 3 of them?
    It's a bug - it only seems to stretch the first in sequence and then gets confused with the following ones.

  23. #23
    SitePoint Enthusiast
    Join Date
    Mar 2009
    Posts
    67
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    The design needs to cater for whatever width that red box happens to be.
    the way I had it, it did cater to that... no?, but yes I did break the rule, I'll keep trying.

  24. #24
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,352
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    the way I had it, it did cater to that... no?
    No you set the width of the wrap to match the width of the red box.

    You can only do that if you know the width of the red box beforehand which as I explained in the quiz - you don't. Therefore as the red box's width is undefined you cannot set a width on wrap because you wouldn't know what width it will be

    You have to cater for whatever width the red box will be - it could be 200px it could be 800px - or it could be related to how much content it holds. You have no control over it.

  25. #25
    SitePoint Enthusiast
    Join Date
    Mar 2009
    Posts
    67
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    maybe I did miss that, I was thinking that as long as the red box width is defined in a class (or ID) I just needed to call up the class and not needing to know, but I guess your saying I don't even know the name of the class that defines the red box width either


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
  •