Forum Moderators: not2easy

Message Too Old, No Replies

Code check

my borders are buggy...

         

willybfriendly

3:47 am on Aug 3, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I am attempting to create a stained glass border around a parchment background containg the copy. It works, except...

At the bottom of my copy is approximately a 20px gap. In IE it shows as a repeating background that should be hidden by the parchment background (i.e. 20px of .vert peeks out). In Opera it simply shows whitespace.

CSS is:

.top
{
background-image: url(images/topbrdr.jpg);
background-repeat: repeat-x;
height: 20px; width: 560px;
margin-top:0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
.vert
{
background-image: url(images/lftbrdr.jpg);
background-repeat: repeat;
width: 560px;
margin-top:0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 0px;
padding-right: 20px;
padding-bottom: 0px;
padding-left: 20px;
}
.copy
{
background-image: url(images/lemonsquash.jpg);
background-repeat: repeat;
font-family: verdana,helvetica,arial,sans-serif;
text-align:left;
margin-top:0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;

HTML is

<body>
<div class ="top"></div>
<div class="vert">
<div class="copy">
<p>Copy fills this block</p>
</div>
</div>
<div class="top"></div>
</body>

Anyone see any obvious errors in this? Or, am I going about this all wrong? (I did away with shorthand declaration of padding and margins trying to track down the bug.)

WBF

willybfriendly

4:02 am on Aug 3, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Well, I added

border: solid black 1px;

to the .copy div and everything works now. Anyone care to explain to me why this made the difference?

WBF