How to line a box with thin border containing background image

[Skeeve]

Hi there,

I'm trying to create a containing box (relative position), and within
it, I'm trying to line that box with four (top, right, left, bottom)
thin boxes that contain a repeated background image, thus creating a
kind of fancy border. What would be the best practice to do that? I
thought that if the containor box was relative and the contained boxes
were absolute, that would work because the absolute boxes would be
measured againsted the containing box. But, it seems that each
subsequent box is measured off of the preceeding box, not the
containing one.
Here's what I get:
(the containing box, called calendar, is invisible)
||============= =========
||
||
||
|| <-----line should be
here to make a box
||
||
||
||
||
||============= =========||
||
||
|| <------ this should
be up above to make a box.
||
||
||
||
||
||
Here's the code:
HTML:
<div id="calendar">
<div id="top-border"/>
<div id="left-border"/>
<div id="bottom-border"/>
<div id="right-border"/>
</div>
CSS:
#calendar {
width: 1000px;
height: 887px;
margin-left: auto;
margin-right: auto;
margin: 0em;
padding: 0em;
position: relative;
border: 1px solid;
}
#top-border {
width: 100%;
background-image: url(images/bg_top.gif);
background-repeat: repeat-x;
height: 7px;
position: absolute;
top: 0em;
left: 0em;

}
#left-border {
background-image: url(images/bg_left.gif);
height: 887px;
width: 8px;
background-repeat: repeat-y;
position: absolute;
left: 0px;
top: 0px;
}
#right-border {
background-image: url(images/bg_right.gif);
height: 887px;
width: 8px;
background-repeat: repeat-y;
position: absolute;
right: 0px;
top: 0px;
}
#bottom-border {
width: 1000px;
background-image: url(images/bg_bottom.gif);
background-repeat: repeat-x;
height: 7px;
position: absolute;
bottom: 0px;
left: 0px;
}
Thanks in advance for your help.
Skeeve

[Skeeve]

Just to follow up because I found something interesting. I had my divs
in my html document coded like this:

<div id="top-border"/>

As I'm really a java programmer, when I deal with xml (which xhtml
actually is), it's usually revolving around data processing (dom or
xslt), where there is no difference between <node/> and <node></node>.
But, aparently, there *is* when it comes to browsers and css. When I
changed it to

<div id="top-border"></div>

the results were much better (not perfect). Now, I still have a
question, but it's different now.

I've changed the top and bottom borders to:
#top-border {
width: 100%;
background-image: url(images/bg_top.gif);
background-repeat: repeat-x;
position: absolute;
top: 0em;
left: 0em;}

The bottom border has different coordinates and gif. Otherwise,
theyr'e the same.

The problem is that they're too tall.

Should be like:
-----------------------------------------------
|xxxxxxxxxxxxxx xxxxxxxxxxxx| <-- height of 7px to match the gif
-----------------------------------------------

Instead it's like:
-----------------------------------------------
|xxxxxxxxxxxxxx xxxxxxxxxxxx| <-- gif is 7px but
| | <-- the box extends
beyond that
-----------------------------------------------

I changed the div's height to be smaller, and then just removed the
height property, but it makes no difference. The graphic that is
repeated along the x axis is only 7 px, but the height of the box is
closer to double that, and I can't seem to shrink it to 7px. I suspect
that it thinks there some character in there that is forcing the
height, but I'm not certain.

Thoughts? And, I'm still interested in why the form of the div tag
really makes a difference, so if anyone has any thoughts...

Thanks again.
Skeeve

[Skeeve]

Furthermore, I just found that it's perfect in FF, but in IE, this
problem exists.