i'm trying to put a css border around this box, and it's not working
properly in safari and firefox (works fine in IE). can anyone help me
fix this? here is a grab so you can see the problem:

http://www.thebrotherkite.com/grab.jpg

and here is the css code:

#container
{
position:absolute;
margin: auto 0 auto;
top:306px;
clip:rect(0,370,247,0);
height:247px;
width:370px;
border-top: 1px solid #555555;
border-right: 1px solid #555555;
border-bottom: 1px solid #555555;
border-left: 1px solid #555555;
}

.msg
{
padding-top: 2em;
padding-bottom: 2em;
margin: auto 0 auto;
}

html
{
min-height: 100%;
margin-bottom: 1px;
}

body
{
margin-top:50px;
margin-left:0px;
margin-bottom:0px;
background-color:#000000;
}

div
{ font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
color: #FFFFFF;
border-style: none
}

a:link {
color:#CCCCCC;
background-color:transparent;
}

a:active {
color:#FFFFFF
background-color:transparent;
}

a:visited {
color:#CCCCCC
background-color:transparent;
}

a:hover {
color: #FFFFFF;
background-color:transparent;
}

Once upon a time *jonathandowns@gmail.com* wrote:

i'm trying to put a css border around this box, and it's not working
properly in safari and firefox (works fine in IE). can anyone help me
fix this? here is a grab so you can see the problem:
>
http://www.thebrotherkite.com/grab.jpg

Don't give an image to look at, the URL to the actual page is a lot
better.

One question, what's the doctype of the page? The clip:rect maybe
don't work in Quirks mode.

--
/Arne

Proud User of SeaMonkey. Get your free copy:
http://www.mozilla.org/projects/seamonkey/

<jonathandowns@gmail.comwrote:

i'm trying to put a css border around this box, and it's not working
properly in safari and firefox

Why do you think that it doesn't work in Safari/Firefox?
I think it is just working fine in these browsers and only IE is doing
it wrong.

Please note that the border is not inside the content area, so when you
set the width of the content area to 370px the whole box including the
border will have a width of 372px. The values of the clipping rectangle
are offsets relative to the "border edges" (content area including the
browsers), so your clipping rectangle will not cover the last 2 pixels
to the right and bottom, and therefore the right and bottom borders are
not visible.

BTW: "clip:rect(0,370,247,0);" is not valid, the unit ("px" is missing
here). This must be clip:rect(0,370px,247px,0);

WHy do you add the clip rule at all? Probably you can remove this rule
without and side effects.

--
Alexander