My page border is uneven
-
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.