SitePoint Sponsor

User Tag List

Page 2 of 2 FirstFirst 12
Results 26 to 44 of 44
  1. #26
    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)
    Solution Time

    Hope you enjoyed this simple little quiz and now its time to share all your solutions.

    Thanks to the following who took part.

    Rayzur, Raffles, Ryan, Gary and Yurikolovsky.

    I had more than one entry from some so If I have missed an entry please feel free to post it yourselves.

    As most entries were on similar lines it's hard to choose a winner but I've chosen Rayzur as the winner this week so well done Ray. Everyone else can be joint second

    Here was my original solution which is different from most received in that the inner element doesn't have a width and is pulled wide with negative margins. IE needs a helping hand of course via the height:1px hack and position:relative (note that the height:1% hack does not work here).

    Paul:
    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">
    div {
        width:300px;
        border:5px solid #000;
        padding:20px;
        margin:40px;
        background:red;
    }
    div div {
        width:auto;
        margin:0 -50px;
        padding:0 25px;
        position:relative;
        min-height:0;
    }
    p {
        background:red;
        margin:-20px 0;
        padding:0 5px;
        min-height:0;
        position:relative;
        text-align:justify;
    }
    </style>
    <!--[if lt IE 7]>
    <style type="text/css">
    div div,p{height:1px}
    </style>
    <![endif]-->
    
    </head>
    <body>
    <div>
        <div>
            <p>This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required. This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required.This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required. </p>
        </div>
    </div>
    <div>
        <div>
            <p>This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required. This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required.This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required. This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required. This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required.This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required.</p>
        </div>
    </div>
    </body>
    </html>
    This was another version of mine with one less element making a pleasing shape.
    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>
    p {
        margin:0
    }
    div {
        border:20px solid #000;
        width:300px;
        margin:20px;
        background:red;
        padding:20px
    }
    div p {
        border:10px solid #000;
        background:red;
        margin:-10px -40px;
        padding:0 20px;
        border-top:none;
        border-bottom:none;
    }
    </style>
    </head>
    <body>
    <div>
        <p>This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required. This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required.This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required. </p>
    </div>
    <div>
        <p>This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required. This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required.This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required. This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required. This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required.This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required.</p>
    </div>
    </body>
    </html>
    Rayzur:
    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>Rayzur - Quiz #25</title>
    <style type="text/css">
    
    *{margin:0;padding:0}
    
    div{
    width:300px;
    margin:30px 60px;
    padding: 22px 0;
    background:red;
    border:4px solid #000;
    }
    div div{
    width:352px;
    margin:0 -30px;
    padding:0;
    position:relative;
    background:red;
    border:4px solid #000;
    }
    p {
    width:290px;
    margin:-26px auto;
    padding:5px;
    position:relative;
    z-index:1;
    background:red;
    text-align:justify;
    }
    </style>
    
    </head>
    <body>
    <div>
        <div>
            <p>This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required. This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required.This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required. </p>
        </div>
    </div>
    <div>
        <div>
            <p>This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required. This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required.This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required. This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required. This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required.This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required.</p>
        </div>
    </div>
    </body>
    </html>
    Raffles:
    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">
    div{
      position:relative;
      width:300px;
      border:4px solid black;
      background:red;
      margin:50px;
      padding:0;
    }
    p {
      position:relative;
      padding;0;
      background:red;
      margin:-40px 44px -40px 36px;
    }
    div div {
      width:380px;
      margin:40px -40px;
    }
    </style>
    <!--[if lt IE 7]>
    <style type="text/css">
    p {margin-right:36px;}
    </style>
    <![endif]-->
    
    </head>
    <body>
    <div>
        <div>
            <p>This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required. This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required.This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required. </p>
        </div>
    </div>
    <div>
        <div>
            <p>This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required. This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required.This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required. This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required. This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required.This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required.</p>
        </div>
    </div>
    </body>
    </html>
    Ryan:
    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">
    * {
        margin:0;
        padding:0;
    }
    div {
        margin:0 auto;/*centers for visual*/
        width:350px;/*width for centering*/
        background:red;
        border:3px solid #000;
        padding:1em 0
    }
    div div {
        border:0;
        background:#000;
        width:390px;
        padding:0;
        position:relative;
        margin-left:-1.4em;
        background:red;
        border:3px solid #000;
    }
    p {
        margin:-3px 0 -3px 19px;
        background:red;
        width:350px;
        position:relative;
    }
    * html div {
        overflow:hidden;
    }
    * html div div {
        overflow:visible;
    }
    </style>
    </head>
    <body>
    <div>
        <div>
            <p>This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required. 
                
                This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required.This example 
                
                must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required. </p>
        </div>
    </div>
    </body>
    </html>
    Gary:

    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 name="generator"
            content=
            "HTML Tidy for Linux (vers 7 December 2008), see www.w3.org" />
      <meta http-equiv="Content-Type"
            content="text/html; charset=utf-8" />
    
      <title>Untitled Document</title>
      <style type="text/css">
    /*<![CDATA[*/
    
      div {
        background-color: red;
        border: 3px solid black;
        margin: 30px;
        width: 300px;
        }
    
      div div {
        padding: 0 33px 0 27px;
        margin: 30px -30px;
        position: relative;
        }
    
    * html div div {
        padding-right: 27px;
        }
    
      p {
        background-color: red;
        margin: -25px 0;
        padding: 3px;
        position: relative;
        }
    
      /*]]>*/
      </style>
    
    <!--[if lt IE 7]>
    <style type="text/css">
    </style>
    <![endif]-->
    
    </head>
    
    <body>
      <div>
        <div>
          <p>This example must work in IE6 and IE7 and the text can be a
          fluid height so the element must expand as required. This example
          must work in IE6 and IE7 and the text can be a fluid height so
          the element must expand as required.This example must work in IE6
          and IE7 and the text can be a fluid height so the element must
          expand as required.</p>
        </div>
      </div>
    
      <div>
    
        <div>
          <p>This example must work in IE6 and IE7 and the text can be a
          fluid height so the element must expand as required. This example
          must work in IE6 and IE7 and the text can be a fluid height so
          the element must expand as required.This example must work in IE6
          and IE7 and the text can be a fluid height so the element must
          expand as required. This example must work in IE6 and IE7 and the
          text can be a fluid height so the element must expand as
          required. This example must work in IE6 and IE7 and the text can
          be a fluid height so the element must expand as required.This
          example must work in IE6 and IE7 and the text can be a fluid
          height so the element must expand as required.</p>
        </div>
      </div>
    </body>
    </html>
    Yurikolovsky:

    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>YuriKolovsky - CSS Quiz #25</title>
    <style type="text/css">
    div {
        width:300px;
        position:relative;
        border:solid #000 5px;
        background:red;
        margin:25px;
    }
    div div {
        margin:40px -55px -10px 0;
        /*all browsers ignore negative margin-right, while ie6 doesent, you can replace the -55px with 0px and it will looks the same in all browsers except ie6*/
        width:340px;/*300 + 20 + 20*/
        left:-25px;/*-20 - 5*/
        top:-25px;/*-20 - 5*/
    }
    p {
        position:relative;
        margin:0;/*remove default p margin*/
        margin-top:-40px;/*-20 - 20*/
        left:20px;
        top:20px;
        width:290px;/*300 - 5 - 5*/
        padding:5px;
        background:red;
    }
    </style>
    </head>
    <body>
    <div>
        <div>
            <p>This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required. This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required.This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required. </p>
        </div>
    </div>
    <div>
        <div>
            <p>This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required. This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required.This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required. This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required. This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required.This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required.</p>
        </div>
    </div>
    </body>
    </html>
    Rayzur2: (uses a different methood to other examples)
    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">
    * {
        margin:0;
        padding:0
    }
    div {
        width:320px;
        margin:30px auto;
        padding:20px 0;/*extend parent on top and bottom*/
        background:#000;/*simulate borders*/
    }
    div div {
        width:352px;/*360px with borders*/
        margin:0 -20px;
        padding:0;
        border:4px solid #000;/*borders used here only*/
        background:red;
        position:relative;
    }
    p {
        width:306px;
        margin:-20px auto;
        padding:3px;
        background:red;
        text-align:justify;
        position:relative;
    }
    </style>
    </head>
    <body>
    <div>
        <div>
            <p>This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required. This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required.This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required. </p>
        </div>
    </div>
    <div>
        <div>
            <p>This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required. This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required.This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required. This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required. This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required.This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required.</p>
        </div>
    </div>
    </body>
    </html>
    Ryan 2 (uses only a p element - Not working in IE):
    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">
    * {
        margin:0;
        padding:0;
    }
    html {
        margin:0 auto;/*centers for visual*/
        width:350px;/*width for centering*/
        background:white;
        height:auto;
        position:relative;
        border:3px solid #000;
        padding:1em 0;
    }
    body/*this gets the "div div" styles*/ {
        border:0;
        width:390px;
        padding:0;
        margin-left:-1.4em;
        background:red;
        border:3px solid #000;
        position:relative;
    }
    p {
        margin:-20px 0 -20px 19px;
        background:red;
        width:341px;
        padding:5px;
    }
    </style>
    </head>
    <body>
    <p>This example must work in IE6 and IE7 and the text can be a fluid height so the 
        
        element must expand as required. 
        This example must work in IE6 and IE7 and the text can be a fluid height so the element must 
        
        expand as required.This example must work in IE6 and IE7 and the text can be a fluid height 
        
        so the element must expand as required. </p>
    </body>
    </html>
    Well done to all and hope you had a little fun experimenting with this.

  2. #27
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    hahaha, nice use of html tag ryan.

  3. #28
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,585
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Thx. I had one with 2 elemetns. the div and the p, the body tag took the "div" styles.

    the div took the "div div" styles.

    And the p took the "p" styles.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  4. #29
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,585
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Here is my solution using 1 less div (so it comes to <div><p></p></div>)

    I made use of the <body> element. I set a background on that so I had to use the html element to override the background
    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">
    *{margin:0;padding:0;}
    html
    {
        background:white;/*overrides body*/
    }
    body/*this gets the "div" styles*/
    {
        margin:0 auto;/*centers for visual*/
        width:350px;/*width for centering*/
        background:red;
        border:3px solid #000;
        padding:1em 0;
    
    }
    div/*this gets the "div div" styles*/
    {
        border:0;
        background:#000;
        width:390px;
        padding:0;
        position:relative;
        margin-left:-1.4em;
        background:red;
        border:3px solid #000;
    }
    p
    {
        margin:-3px 0 -3px 19px;
        background:red;
        width:350px;
        position:relative;
    }
    * html body{overflow:hidden;}
    * html div{overflow:visible;}
    </style>
    
    </head>
    <body>
       <div>
          <p>This example must work in IE6 and IE7 and the text can be a fluid height so the 
    
    element must expand as required. 
    This example must work in IE6 and IE7 and the text can be a fluid height so the element must 
    
    expand as required.This example must work in IE6 and IE7 and the text can be a fluid height 
    
    so the element must expand as required.
          </p>
       </div>
    </body>
    </html>
    My solution with 1 element doesn't work in IE because they don't like styling the HTML element, thus it falls over completely.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  5. #30
    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)
    Nice job guys! looking on my phone right now - I'm going to have to throw this code in my DW to study it and see how you did it...

  6. #31
    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)
    Quote Originally Posted by EricWatson View Post
    Nice job guys! looking on my phone right now -
    Show off

  7. #32
    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)
    I guess I do like my phone (iPhone). But I really ment I have to study and play with the code in DW, because while looking on my phone (still marooned on it), I still can't tell how it's done. AKA - just an exscuse why I'm temporarily stupid.

  8. #33
    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)
    Quote Originally Posted by EricWatson View Post
    But I really meant I have to study and play with the code in DW, because while looking on my phone (still marooned on it), I still can't tell how it's done. AKA - just an excuse...
    It's really just trickery with negative margins Eric. I think it will snap when you find time to look at the code.

    I have an old demo that is doing basically the same thing.
    http://www.css-lab.com/misc-test/hangout-div.html

  9. #34
    SitePoint Zealot ajaxdinesh's Avatar
    Join Date
    Apr 2009
    Location
    India
    Posts
    137
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,

    I have given the html code its not working in IE6 but working in FF 3.5.1

    Code HTML4Strict:
    <!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>
    p {
        margin:0
    }
    div {
        border:20px solid #000;
        width:300px;
        margin:20px;
        background:red;
        padding:20px
    }
    div p {
        border:10px solid #000;
        background:red;
        margin:-10px -40px;
        padding:0 20px;
        border-top:none;
        border-bottom:none;
    }
    </style>
    </head>
    <body>
    <div>
        <p>This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required. This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required.This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required. </p>
    </div>
    <div>
        <p>This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required. This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required.This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required. This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required. This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required.This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required.</p>
    </div>
    </body>
    </html>
    Cheers,
    Dinesh

  10. #35
    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 Dinesh,

    Yes I forgot to include some IE hacks for that extra demo.

    Here's the full code:

    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>
    p {
        margin:0
    }
    div {
        border:20px solid #000;
        width:300px;
        margin:20px;
        background:red;
        padding:20px
    }
    div p {
        border:10px solid #000;
        background:red;
        margin:-10px -40px;
        padding:0 20px;
        border-top:none;
        border-bottom:none;
            position:relative;
            min-height:0;
    }
    </style>
    <!--[if lt IE 7]>
    <style type="text/css">
    div div,p{height:1px}
    </style>
    <![endif]-->
    
    </head>
    <body>
    <div>
        <p>This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required. This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required.This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required. </p>
    </div>
    <div>
        <p>This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required. This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required.This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required. This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required. This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required.This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required.</p>
    </div>
    </body>
    </html>

  11. #36
    SitePoint Zealot ajaxdinesh's Avatar
    Join Date
    Apr 2009
    Location
    India
    Posts
    137
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    If you want to make things harder and have some fun then reduce the html by one div as follows:

    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">
    div {
        width:300px
    }
    </style>
    <!--[if lt IE 7]>
    <style type="text/css">
    </style>
    <![endif]-->
    </head>
    <body>
    <div>
        <p>This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required. This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required.This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required. </p>
    </div>
    <div>
        <p>This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required. This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required.This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required. This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required. This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required.This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required.</p>
    </div>
    </body>
    </html>
    I haven't been able to reproduce the original design but I have come up with some interesting shapes using minimal mark up.

    Have a look at the attachment to this post and see if you can come up with something more interesting just using the html provided. This isn't part of the quiz so just post a screenshot of what you have created.

    Hi Paul,

    Where is the html code for these shape? Please post it.
    Cheers,
    Dinesh

  12. #37
    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 Dineseh,

    These were the other examples:

    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>
    p {
        margin:0
    }
    div {
        border-left:30px solid #000;
        border-right:30px solid #000;
        width:300px;
        margin:20px;
        background:#fff;
        padding:20px
    }
    div p {
        border:0px solid #000;
        background:#fff;
        margin:0 -40px;
        padding:0 30px;
        border-top:none;
        border-bottom:none;
        position:relative;
        min-height:0;
    }
    </style>
    <!--[if lt IE 7]>
    <style type="text/css">
    div div,p{height:1px}
    </style>
    <![endif]-->
    
    </head>
    <body>
    <div>
        <p>This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required. This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required.This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required. </p>
    </div>
    <div>
        <p>This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required. This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required.This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required. This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required. This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required.This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required.</p>
    </div>
    </body>
    </html>

    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>
    p {
        margin:0
    }
    div {
        border:20px solid #000;
        width:300px;
        margin:20px;
        background:red;
        padding:20px
    }
    div p {
        border:10px solid #000;
        background:red;
        margin:-10px -40px;
        padding:0 20px;
        border-top:10px solid red;
        border-bottom:10px solid red;
        position:relative;
        min-height:0;
    }
    </style>
    <!--[if lt IE 7]>
    <style type="text/css">
    div div,p{height:1px}
    </style>
    <![endif]-->
    
    </head>
    <body>
    <div>
        <p>This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required. This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required.This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required. </p>
    </div>
    <div>
        <p>This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required. This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required.This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required. This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required. This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required.This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required.</p>
    </div>
    </body>
    </html>
    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>
    p {
        margin:0
    }
    div {
        border:20px solid #000;
        border-left:20px solid red;
        border-right:20px solid red;
        width:300px;
        margin:20px;
        background:red;
        padding:10px
    }
    div p {
        border:20px solid #000;
        background:red;
        margin:-15px -40px;
        padding:0 10px;
        border-top:30px solid red;
        border-bottom:30px solid red;
        position:relative;
        min-height:0;
    }
    </style>
    <!--[if lt IE 7]>
    <style type="text/css">
    div div,p{height:1px}
    </style>
    <![endif]-->
    
    
    </head>
    <body>
    <div>
        <p>This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required. This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required.This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required. </p>
    </div>
    <div>
        <p>This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required. This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required.This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required. This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required. This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required.This example must work in IE6 and IE7 and the text can be a fluid height so the element must expand as required.</p>
    </div>
    </body>
    </html>

  13. #38
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,585
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul, when is the next quiz? I'm itching for it .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  14. #39
    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)
    Quote Originally Posted by RyanReese View Post
    Hi Paul, when is the next quiz? I'm itching for it .
    It won't be until the weekend as I am trying to leave a weeks breather between quizzes now so that people don't get bored.

  15. #40
    SitePoint Zealot ajaxdinesh's Avatar
    Join Date
    Apr 2009
    Location
    India
    Posts
    137
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great Paul.

    Thanks a lot.
    Cheers,
    Dinesh

  16. #41
    SitePoint Enthusiast antitoxic's Avatar
    Join Date
    Apr 2008
    Location
    London, UK
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ahh, this is quite interesting.
    I sure will sign up for the next one. Can I subscribe somehow so I don't miss the start?

  17. #42
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,585
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Naw there is nno way. Just keep frequenting this forum.

    I'm itching for the next quiz. I'm gonna dominate it.

    PS-It's been more then a week Paul .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  18. #43
    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)
    Can I subscribe somehow so I don't miss the start?
    If you subscribe to this one I always make a post at the end with a link to the new quiz when it starts.

    The quiz has been delayed due to a virus on my computer that wouldn't go away and cost me three days work. It's fixed now so i'm trying to play catch up now

  19. #44


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
  •