• Resolved skirkster

    (@skirkster)


    Hi,

    In my stylesheet I use .sheet tags to build the border around the entire page. I’ve been messing with it so much, unfortunately, that I forgot the original settings, and now the border sticks out in the upper left corner, looking pretty bad. You can view it at blog.noelmarie.com. Here’s the CSS for the border:

    /* begin Box, Sheet */
    .Sheet {
      min-width: 13px;
      min-height: 13px;
      margin: 0 auto;
      position: relative;
      overflow: hidden;
      z-index: 0;
      width: 1000px;
    }
    * html .Sheet {
      width: 1000px;
    }
    .Sheet-body {
      position: relative;
      overflow: hidden;
      z-index: 0;
      margin: 6px;
      text-align: left;
    }
    .Sheet-tl {
      position: absolute;
      overflow: hidden;
      z-index: -1;
      top: 0;
      left: 0;
      width: 16px;
      height: 16px;
      background-image:  url('images/Sheet-s.png');
    }
    * html .Sheet-tl {
      font-size: 1px;
      background: none;
    }
    Sheet-tr {
      position: absolute;
      overflow: hidden;
      z-index: -1;
      top: 0;
      left: 0;
      width: 16px;
      height: 16px;
    }
    * html .Sheet-tr {
      font-size: 1px;
    }
    .Sheet-tr div {
      position: absolute;
      z-index: -1;
      top: 0px;
      left: -16px;
      width: 32px;
      height: 32px;
      background-image: url('images/Sheet-s.png');
    }
    * html .Sheet-tr div {
      background: none;
    }
    *.Sheet-bl {
      position: absolute;
      overflow: hidden;
      z-index: -1;
      bottom: 0;
      left: 0;
      width: 16px;
      height: 16px;
    }
    * html .Sheet-bl {
      font-size: 1px;
    }
    
    .Sheet-bl div {
      position: absolute;
      z-index: -1;
      top: -16px;
      left: 0;
      width: 32px;
      height: 32px;
      background-image: url('images/Sheet-s.png');
    }
    
    * html .Sheet-bl div {
      background: none;
    }
    
    .Sheet-br {
      position: absolute;
      overflow: hidden;
      z-index: -1;
      bottom: 0;
      right: 0;
      width: 16px;
      height: 16px;
    }
    
    * html .Sheet-br {
      font-size: 1px;
    }
    
    .Sheet-br div {
      position: absolute;
      z-index: -1;
      top: -16px;
      left: -16px;
      width: 32px;
      height: 32px;
      background-image: url('images/Sheet-s.png');
    }
    
    * html .Sheet-br div {
      background: none;
    }
    
    .Sheet-tc {
      position: absolute;
      overflow: hidden;
      z-index: 0;
      top: 0;
      left: 5px;
      right: 5px;
      height: 16px;
    }
    * html .Sheet-tc {
      font-size: 1px;
    }
    .Sheet-tc div
    {
      position: absolute;
      z-index: 0;
      top: 0;
      left: 0;
      width: 100%;
      height: 32px;
      background-image: url('images/Sheet-h.png');
    }
    
    * html .Sheet-tc div {
      font-size: 1px;
      background: none;
    }
    .Sheet-bc  {
      position: absolute;
      overflow: hidden;
      z-index: -1;
      bottom: 0;
      left: 16px;
      right: 16px;
      height: 16px;
    }
    
    * html .Sheet-bc {
      font-size: 1px;
    }
    
    .Sheet-bc div {
      position: absolute;
      z-index: -1;
      top: -16px;
      left: 0;
      width: 100%;
      height: 32px;
      background-image: url('images/Sheet-h.png');
    }
    
    * html .Sheet-bc div {
      font-size: 1px;
      background: none;
    }
    .Sheet-cl {
      position: absolute;
      overflow:hidden;
      z-index: 0;
      top: 16px;
      left: 0;
      width: 16px;
      bottom: 16px;
    }
    
    * html .Sheet-cl {
      font-size: 1px;
    }
    
    .Sheet-cl div {
      position: absolute;
      z-index: 0;
      top: 0;
      left: 0;
      width: 32px;
      height: 100%;
      background-image: url('images/Sheet-v.png');
    }
    
    * html .Sheet-cl div {
      font-size: 1px;
      background: none;
    }
    
    .Sheet-cr {
      position: absolute;
      overflow:hidden;
      z-index: 0;
      top: 16px;
      right: 0;
      width: 16px;
      bottom: 16px;
    }
    
    * html .Sheet-cr {
      font-size: 1px;
    }
    
    .Sheet-cr div {
      position: absolute;
      z-index: -1;
      top: 0;
      left: -16px;
      width: 32px;
      height: 100%;
      background-image: url('images/Sheet-v.png');
    }
    
    * html .Sheet-cr div {
      font-size: 1px;
      background: none;
    }
    
    .Sheet-cc  {
      position: absolute;
      overflow:hidden;
      z-index: -2;
      top: 16px;
      left: 16px;
      right: 16px;
      bottom: 16px;
      background-color: #ffffff;
    }
    
    * html .Sheet-cc {
      font-size: 1px;
    }
    
    .Sheet {
      margin-top: 30px !important ;
      margin-bottom: 3em;
      padding: 0 0 1em 0;
    }
    /* end Box, Sheet */

    Then it loads in the footer like this:

    <div class="Sheet-tl"></div>
      <div class="Sheet-tr"><div></div></div>
      <div class="Sheet-bl"><div></div></div>
      <div class="Sheet-br"><div></div></div>
      <div class="Sheet-tc"><div></div></div>
      <div class="Sheet-bc"><div></div></div>
      <div class="Sheet-cl"><div></div></div>
      <div class="Sheet-cr"><div></div></div>
      <div class="Sheet-cc"></div>

    I know I should have backed up my original stylesheet, but I’ve been tweaking it every possible way I can think of, and I’m having no luck. Does anyone have any ideas on how to help? I’d greatly appreciate it, thanks.

  • The topic ‘My page border is uneven’ is closed to new replies.