Loading ...
Sorry, an error occurred while loading the content.

CSS oddity with grids example from "Learn YAHOO" book

Expand Messages
  • Karr, David
    This is probably a simple CSS newbie problem, but I m working through examples in the Learning YAHOO book, and I m seeing something funny when I make a
    Message 1 of 4 , May 1, 2008
    • 0 Attachment
      This is probably a simple CSS newbie problem, but I'm working through
      examples in the "Learning YAHOO" book, and I'm seeing something funny
      when I make a seemingly simple CSS change. I can't get my example to
      match the example in the book. My example page is based on the example
      on p.64 of the book. I got my layout to look like the example, except
      for the border highlights. I thought I would try to add that, so I
      looked up the example file on the source zip.

      When I just pasted in the "style" element that adds the borders,
      everything came out except for the borders on the two "unit" blocks. I
      then experimented with adding a specific rule for ".yui-u" just before
      the ".yui-gb .yui-u" rule. When I had it like this:

      .yui-u {
      border:4px lightblue;
      height:70px;
      }

      It still seemed to ignore it (although firebug shows me it respected the
      "height" setting). When I then changed it to:

      .yui-u {
      border:4px solid lightblue;
      height:70px;
      }

      It went completely wonky. It put lightblue borders on the two unit
      divs, but instead of the second one just being to the right of the first
      one, it put the second one below and to the right of it (the top of the
      second box was even with the bottom of the first box).

      Enclosed is my current page:

      <!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>Mark-up Example</title>
      <link rel="stylesheet" type="text/css"
      href="yui/reset-fonts-grids/reset-fonts-grids.css">
      <style type="text/css">
      #hd {
      border:4px solid lightblue;
      height:50px;
      margin-bottom:5px;
      }
      #bd {
      border:4px solid lightblue;
      height:100px;
      margin-bottom:5px;
      }
      #ft {
      border:4px solid lightblue;
      height:50px;
      }
      .yui-b {
      border-right:4px solid lightblue;
      height:100px;
      }
      #yui-main .yui-b {
      border-right:0px;
      height:100px;
      margin-right:5px;
      }
      .yui-u {
      border:4px solid lightblue;
      height:70px;
      }
      .yui-gb .yui-u {
      border:4px solid lightblue;
      height:70px;
      }
      </style>
      </head>
      <body>
      <div id="doc3" class="yui-t1">
      <div id="hd">This is your header</div>
      <div id="bd">
      <div class="yui-b">This is the secondary block</div>
      <div id="yui-main">
      <div class="yui-b">This is the main block
      <div class="yui-g">
      <div class="yui-u first">This is a
      unit</div>
      <div class="yui-u">This is another
      unit</div>
      </div>
      </div>
      </div>
      </div>
      <div id="ft">This is your footer</div>
      </div>
      </body>
      </html>
    • Karr, David
      And going on from this, I tried changing the container for the two units to use the yui-gb (3 columns instead of 2) class instead of yui-g , and that worked
      Message 2 of 4 , May 1, 2008
      • 0 Attachment
        And going on from this, I tried changing the container for the two units to use the "yui-gb" (3 columns instead of 2) class instead of "yui-g", and that worked perfectly fine.  There's something about the 2 column layout "yui-g" that has trouble when the units have borders on them.


        From: ydn-javascript@yahoogroups.com [mailto:ydn-javascript@yahoogroups.com] On Behalf Of Karr, David
        Sent: Thursday, May 01, 2008 11:31 AM
        To: ydn-javascript@yahoogroups.com
        Subject: [ydn-javascript] CSS oddity with grids example from "Learn YAHOO" book

        This is probably a simple CSS newbie problem, but I'm working through
        examples in the "Learning YAHOO" book, and I'm seeing something funny
        when I make a seemingly simple CSS change. I can't get my example to
        match the example in the book. My example page is based on the example
        on p.64 of the book. I got my layout to look like the example, except
        for the border highlights. I thought I would try to add that, so I
        looked up the example file on the source zip.

        When I just pasted in the "style" element that adds the borders,
        everything came out except for the borders on the two "unit" blocks. I
        then experimented with adding a specific rule for ".yui-u" just before
        the ".yui-gb .yui-u" rule. When I had it like this:

        .yui-u {
        border:4px lightblue;
        height:70px;
        }

        It still seemed to ignore it (although firebug shows me it respected the
        "height" setting). When I then changed it to:

        .yui-u {
        border:4px solid lightblue;
        height:70px;
        }

        It went completely wonky. It put lightblue borders on the two unit
        divs, but instead of the second one just being to the right of the first
        one, it put the second one below and to the right of it (the top of the
        second box was even with the bottom of the first box).

        Enclosed is my current page:

        <!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>Mark- up Example</title>
        <link rel="stylesheet" type="text/css"
        href="yui/reset- fonts-grids/ reset-fonts- grids.css" >
        <style type="text/css" >
        #hd {
        border:4px solid lightblue;
        height:50px;
        margin-bottom: 5px;
        }
        #bd {
        border:4px solid lightblue;
        height:100px;
        margin-bottom: 5px;
        }
        #ft {
        border:4px solid lightblue;
        height:50px;
        }
        .yui-b {
        border-right: 4px solid lightblue;
        height:100px;
        }
        #yui-main .yui-b {
        border-right: 0px;
        height:100px;
        margin-right: 5px;
        }
        .yui-u {
        border:4px solid lightblue;
        height:70px;
        }
        .yui-gb .yui-u {
        border:4px solid lightblue;
        height:70px;
        }
        </style>
        </head>
        <body>
        <div id="doc3" class="yui-t1" >
        <div id="hd">This is your header</div>
        <div id="bd">
        <div class="yui-b" >This is the secondary block</div>
        <div id="yui-main" >
        <div class="yui-b" >This is the main block
        <div class="yui-g" >
        <div class="yui-u first">This is a
        unit</div>
        <div class="yui-u" >This is another
        unit</div>
        </div>
        </div>
        </div>
        </div>
        <div id="ft">This is your footer</div>
        </div>
        </body>
        </html>

      • Nate Koechley
        Hey David, My general recommendation to people is to not add rules directly to yui- nodes. Doing so -- especially with dimensional properties like
        Message 3 of 4 , May 2, 2008
        • 0 Attachment
          Hey David,

          My general recommendation to people is to not add rules directly to yui- nodes. Doing so -- especially with dimensional properties like width/height/border/margin/padding -- can have reprocussions like  you're experiencing. If you instead put the border on your own child of .yui-u you should be safe and happy.

          Here's a quick example of your page transferred to the approach I suggested above:

          Hope that helps.

          Thanks,
          Nate

          PS: Many times when I'm tempted to use borders for debugging -- for clearly seeing the dimensions of regions -- I can get the same result without risk by using background color instead of border. Clearly some times borders are what's needed, but...



          On May 1, 2008, at 12:30 PM, Karr, David wrote:

          And going on from this, I tried changing the container for the two units to use the "yui-gb" (3 columns instead of 2) class instead of "yui-g", and that worked perfectly fine.  There's something about the 2 column layout "yui-g" that has trouble when the units have borders on them.


          From: ydn-javascript@yahoogroups.com [mailto:ydn-javascript@yahoogroups.com] On Behalf Of Karr, David
          Sent: Thursday, May 01, 2008 11:31 AM
          To: ydn-javascript@yahoogroups.com
          Subject: [ydn-javascript] CSS oddity with grids example from "Learn YAHOO" book

          This is probably a simple CSS newbie problem, but I'm working through
          examples in the "Learning YAHOO" book, and I'm seeing something funny
          when I make a seemingly simple CSS change. I can't get my example to
          match the example in the book. My example page is based on the example
          on p.64 of the book. I got my layout to look like the example, except
          for the border highlights. I thought I would try to add that, so I
          looked up the example file on the source zip.

          When I just pasted in the "style" element that adds the borders,
          everything came out except for the borders on the two "unit" blocks. I
          then experimented with adding a specific rule for ".yui-u" just before
          the ".yui-gb .yui-u" rule. When I had it like this:

          .yui-u {
          border:4px lightblue;
          height:70px;
          }

          It still seemed to ignore it (although firebug shows me it respected the
          "height" setting). When I then changed it to:

          .yui-u {
          border:4px solid lightblue;
          height:70px;
          }

          It went completely wonky. It put lightblue borders on the two unit
          divs, but instead of the second one just being to the right of the first
          one, it put the second one below and to the right of it (the top of the
          second box was even with the bottom of the first box).

          Enclosed is my current page:

          <!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>Mark- up Example</title>
          <link rel="stylesheet" type="text/css"
          href="yui/reset- fonts-grids/ reset-fonts- grids.css" >
          <style type="text/css" >
          #hd {
          border:4px solid lightblue;
          height:50px;
          margin-bottom: 5px;
          }
          #bd {
          border:4px solid lightblue;
          height:100px;
          margin-bottom: 5px;
          }
          #ft {
          border:4px solid lightblue;
          height:50px;
          }
          .yui-b {
          border-right: 4px solid lightblue;
          height:100px;
          }
          #yui-main .yui-b {
          border-right: 0px;
          height:100px;
          margin-right: 5px;
          }
          .yui-u {
          border:4px solid lightblue;
          height:70px;
          }
          .yui-gb .yui-u {
          border:4px solid lightblue;
          height:70px;
          }
          </style>
          </head>
          <body>
          <div id="doc3" class="yui-t1" >
          <div id="hd">This is your header</div>
          <div id="bd">
          <div class="yui-b" >This is the secondary block</div>
          <div id="yui-main" >
          <div class="yui-b" >This is the main block
          <div class="yui-g" >
          <div class="yui-u first">This is a
          unit</div>
          <div class="yui-u" >This is another
          unit</div>
          </div>
          </div>
          </div>
          </div>
          <div id="ft">This is your footer</div>
          </div>
          </body>
          </html>


        • Karr, David
          Thanks, both of those strategies worked for me (border on p and bg on div). ________________________________ From: ydn-javascript@yahoogroups.com
          Message 4 of 4 , May 2, 2008
          • 0 Attachment
            Thanks, both of those strategies worked for me (border on p and bg on div).


            From: ydn-javascript@yahoogroups.com [mailto:ydn-javascript@yahoogroups.com] On Behalf Of Nate Koechley
            Sent: Friday, May 02, 2008 3:54 PM
            To: ydn-javascript@yahoogroups.com
            Subject: Re: [ydn-javascript] CSS oddity with grids example from "Learn YAHOO" book

            Hey David,


            My general recommendation to people is to not add rules directly to yui- nodes. Doing so -- especially with dimensional properties like width/height/ border/margin/ padding -- can have reprocussions like  you're experiencing. If you instead put the border on your own child of .yui-u you should be safe and happy.

            Here's a quick example of your page transferred to the approach I suggested above:

            Hope that helps.

            Thanks,
            Nate

            PS: Many times when I'm tempted to use borders for debugging -- for clearly seeing the dimensions of regions -- I can get the same result without risk by using background color instead of border. Clearly some times borders are what's needed, but...



            On May 1, 2008, at 12:30 PM, Karr, David wrote:

            And going on from this, I tried changing the container for the two units to use the "yui-gb" (3 columns instead of 2) class instead of "yui-g", and that worked perfectly fine.  There's something about the 2 column layout "yui-g" that has trouble when the units have borders on them.


            From: ydn-javascript@ yahoogroups. com [mailto:ydn-javascri pt@yahoogroups. com] On Behalf Of Karr, David
            Sent: Thursday, May 01, 2008 11:31 AM
            To: ydn-javascript@ yahoogroups. com
            Subject: [ydn-javascript] CSS oddity with grids example from "Learn YAHOO" book

            This is probably a simple CSS newbie problem, but I'm working through
            examples in the "Learning YAHOO" book, and I'm seeing something funny
            when I make a seemingly simple CSS change. I can't get my example to
            match the example in the book. My example page is based on the example
            on p.64 of the book. I got my layout to look like the example, except
            for the border highlights. I thought I would try to add that, so I
            looked up the example file on the source zip.

            When I just pasted in the "style" element that adds the borders,
            everything came out except for the borders on the two "unit" blocks. I
            then experimented with adding a specific rule for ".yui-u" just before
            the ".yui-gb .yui-u" rule. When I had it like this:

            .yui-u {
            border:4px lightblue;
            height:70px;
            }

            It still seemed to ignore it (although firebug shows me it respected the
            "height" setting). When I then changed it to:

            .yui-u {
            border:4px solid lightblue;
            height:70px;
            }

            It went completely wonky. It put lightblue borders on the two unit
            divs, but instead of the second one just being to the right of the first
            one, it put the second one below and to the right of it (the top of the
            second box was even with the bottom of the first box).

            Enclosed is my current page:

            <!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>Mark- up Example</title>
            <link rel="stylesheet" type="text/css"
            href="yui/reset- fonts-grids/ reset-fonts- grids.css" >
            <style type="text/css" >
            #hd {
            border:4px solid lightblue;
            height:50px;
            margin-bottom: 5px;
            }
            #bd {
            border:4px solid lightblue;
            height:100px;
            margin-bottom: 5px;
            }
            #ft {
            border:4px solid lightblue;
            height:50px;
            }
            .yui-b {
            border-right: 4px solid lightblue;
            height:100px;
            }
            #yui-main .yui-b {
            border-right: 0px;
            height:100px;
            margin-right: 5px;
            }
            .yui-u {
            border:4px solid lightblue;
            height:70px;
            }
            .yui-gb .yui-u {
            border:4px solid lightblue;
            height:70px;
            }
            </style>
            </head>
            <body>
            <div id="doc3" class="yui-t1" >
            <div id="hd">This is your header</div>
            <div id="bd">
            <div class="yui-b" >This is the secondary block</div>
            <div id="yui-main" >
            <div class="yui-b" >This is the main block
            <div class="yui-g" >
            <div class="yui-u first">This is a
            unit</div>
            <div class="yui-u" >This is another
            unit</div>
            </div>
            </div>
            </div>
            </div>
            <div id="ft">This is your footer</div>
            </div>
            </body>
            </html>


          Your message has been successfully submitted and would be delivered to recipients shortly.