SitePoint Sponsor

User Tag List

Page 2 of 2 FirstFirst 12
Results 26 to 42 of 42
  1. #26
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    yes, i think that would be better,
    but i just wanted to point out some of the flaws with expressions to help some less experienced users reading this thread.


  2. #27
    SitePoint Zealot candlebain's Avatar
    Join Date
    May 2009
    Location
    Phoenix, AZ
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Interesting stuff. I need to explore how "display:table" and "display:inline-table" work so I can understand the alternatives better.

    I tried "display:inline-table"...the alignment automatically became "bottom" (I'm guessing here as I'm not sure what the alignment reference is being generated from). To fix this, I used "vertical-align:top" like one might on a table. Recommended here or is there a better way?

  3. #28
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    As to Paul saying you had to set left and right coordinates-if you leave them as auto then it works out perfectly (for IE7 part of the quiz).

    I knew the solution to the quiz had to do with display table, though I couldn't figure out what combination worked.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  4. #29
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    I tried "display:inline-table"...the alignment automatically became "bottom"
    Yes you just need to use the vertical-alignroperty to align to the position you require just as you would with tables. I believe that for inline tables Firefox defaults to vertical-align:top but Safari defaults to vertical-align:bottom.

    As to Paul saying you had to set left and right coordinates-if you leave them as auto then it works out perfectly (for IE7 part of the quiz).
    Not in my example as the co-ordinates are needed to drag the element wider to accommodate the padding and borders of the element above.

    If you use auto it will work but will be too small and not line up. (You could use auto if the element above had no padding or borders.)

  5. #30
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    I don't know if you looked at my example but I didn't really see a problem of it not aligningi to the top, which anyway could just be achieved through a negative mragin.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  6. #31
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by RyanReese View Post
    I don't know if you looked at my example but I didn't really see a problem of it not aligningi to the top, which anyway could just be achieved through a negative mragin.
    Your example didn't have any padding or borders to cater for so you defined the width width width:100%. My example used left and right to describe the width without actually needing to set the width.

    Why complicate it more with negative margins

  7. #32
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    I dunno you siad there was space so I assumed my example did too...
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  8. #33
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    each quiz makes me realize more and more on how amazing css really is.

  9. #34
    SitePoint Enthusiast
    Join Date
    Jan 2009
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yuri and Ryan's solution for part 1 (large negative right margin and width:100% on the P) was interesting, but I was initially surprised to hear that it worked cross-browser; the width of the floated outer div is undefined in CSS 2.1 (http://www.w3.org/TR/CSS2/visudet.ht...width-property):

    "The percentage is calculated with respect to the width of the generated box's containing block. If the containing block's width depends on this element's width, then the resulting layout is undefined in CSS 2.1."

    However, I guess it's reasonable that the browsers behave the way they do, since the presence of the large negative right margin means that they "know" that even with width:100% the margin box of the P is going to have a negative width and hence not influence the shrink-to-fit width of the floated div, so they calculate the shrink-to-fit width ignoring the P and then resolve width:100% on that P to that calculated width.

    It would be foolhardy to rely on that undefined behaviour though! By contrast, the display: (inline-)table and width:1px method works exactly as specified by CSS2.1.


    Regarding IE7, apart from the layout collapsing at small widths, the obvious other limitation is that it only works for a single subsequent sibling of the heading. /Two/ paragraphs are out of the question! However, it's nice that the technique used works according to the spec and so is more a fallback technique than a hack.


    It's interesting that no-one has mentioned /why/ the IE7 technique fails in IE6. It's because there's a bug in IE6 whereby the width:100% on the absolutely-positioned P is not resolved according to the width of its containing block DIV but rather to the BODY (in this example). Yet all other interactions with the containing block perform correctly (left/right/top/bottom and indeed percentage height). In fact, percentage width will work correctly once you've nudged IE6 into recalculating, as can be done by changing the percentage via the IE Developer Toolbar or presumably via expressions. It would seem, then, that IE6 attempts to resolve the 100% width too early, before the width of the containing block has been determined, and so falls back to using the BODY width. So this is a "calculation-order" bug rather than a logical error. Sadly, such bugs are very unlikely to have practical solutions/workarounds.

  10. #35
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    because of the previous quizzes held and some personal css mini-projects i came up with the negative margin solution (i was recently busy with lots of float and negative margin css trickery xD)

    the solution came to me after some css experimenting on the spot and the aim was to make it work cross browser, including ie6 and ie7.

    this is why i abandoned display:table at the start (ie7 doesn't support it), i was sure that i saw the solution to this quiz problem in my css experimentation folder with a dropdown having the content with auto width and a shrink to fit box, where negative margins and floats were involved, i seem to have been mistaken because i never did find the solution, it might have been a dream (yes, i sometimes dream of css :P)
    even now i have this small feeling that this can be solved somehow but with an additional container div (im sure one of my dropdowns can be modified to work like a caption)

    sadly ie6-7 are here for a long time and are still very popular, so im not really considering it a solution until it works in those browsers (even tho i hate them as much as you do)

  11. #36
    SitePoint Enthusiast
    Join Date
    Jan 2009
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Yuri,

    Yes, negative margins are /very/ powerful and have applications in many areas of practical and experimental CSS.

    I too was reminded of drop-down menus whose submenu is the width of the parent menu item. Your comment prompted me to go and look at sites where I'd used this, but I found that I was relying on position:absolute; width:auto something very similar to the IE7 technique from this quiz. [Using width:auto instead of width:100% means that when that the "natural" (non-abspos) width of the submenu is wider than the parent item, the submenu's abspos width was the same as the parent's; whilst when the natural width is narrower then the submenu doesn't expand to the full width of the parent item when abspos'd (of course). So the technique is more like setting max-width on the submenu than width. This "max-width" variant /does/ work cross-browser, including in IE6 and IE7.]

    But despite sharing your faint nagging feeling that this should somehow be possible without resorting to the unique behaviour of display:table, I think it's an irrational desire! In CSS 2.1, with the exception of table display types, the properties which induce shrink-to-fit behaviour do not influent the margin-box width of in-flow or floated descendants (and thus can't force a "normal" paragraph to become narrower, for example), whilst using width:100% on the content box of decendant's whose margin box is sufficiently narrow results in undefined CSS 2.1 behaviour since the width of ancestor and descendant circularly depend on each other. On the other hand, out-of-flow non-floated descendants cannot occupy "space" in their ancestor's "layout" and so we have to put up with the limitations that are demonstrated by the position:absolute; width:100% approach.

    Great quiz by the way! It illustrated a poorly-known behaviour that is unique to tables, required some lateral thinking by way of text-wrapping, and showcased a little-known bug in IE6.

  12. #37
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    i absolutely agree anton.
    i still have this unrational feeling that it could be done to work with css only.

    it does demonstrate the areas of undiscovered css.

  13. #38
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Anton P View Post
    Hi Yuri,

    Great quiz by the way! It illustrated a poorly-known behaviour that is unique to tables, required some lateral thinking by way of text-wrapping, and showcased a little-known bug in IE6.
    Thanks - glad you like it

    Quote Originally Posted by yuri
    i still have this unrational feeling that it could be done to work with css only.
    Ok - Here's a solution for IE6

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style>
    .test {
        float:left;
        background:red;
        position:relative;
        margin:10px;
    }
    .test h2 {
        white-space:nowrap;
    }
    .test p {
        position:absolute;
        left:0;
        width:1%;
    }
    </style>
    </head>
    <body>
    <div class="test">
        <h2>This is the heading</h2>
        <p>This :is :the :text :content :here This :is :the :text :content :here This :is :the :text :content :here This :is :the :text :content :here This :is :the :text :content :here </p>
    </div>
    <div class="test">
        <h2>This is the longer heading with more text</h2>
        <p>This :is :the :text :content :here :This :is :the :text :content :here :This :is the :text :content :here :This :is :the :text :content :here :This :is :the text :content :here :This :is :the :text :content :here :This :is :the :text content :This :is :the :text :content :here :This :is :the :text :content here :This :is :the :text :content :here :This :is :the :text :content :here</p>
    </div>
    </body>
    </html>
    (Just in case anyone thinks it's a real solution - it's not)

  14. #39
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    yes paul, i tried that too :P
    but the box aint vertically extendin!

  15. #40
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    yes paul, i tried that too :P
    I don't think you did

    I think you missed the joke (or haven't spotted it yet) Why does the text wrap at the width of the heading?

    This was supposed to be a copy of the IE7 solution (which as I said before is unusable anyway due to the absolute positioning).

  16. #41
    SitePoint Enthusiast
    Join Date
    Jan 2009
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Ok - Here's a solution for IE6

  17. #42


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
  •