468,115 Members | 2,115 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,115 developers. It's quick & easy.

CSS Border Problem In Safari...Help?

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;
}

Aug 4 '06 #1
2 4418
Once upon a time *j************@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/
Aug 4 '06 #2
<jo***********@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
Aug 4 '06 #3

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

8 posts views Thread by Steel | last post: by
3 posts views Thread by Wally Sanford | last post: by
4 posts views Thread by Paul W | last post: by
3 posts views Thread by David Stone | last post: by
1 post views Thread by biegel | last post: by
15 posts views Thread by GinnTech | last post: by
3 posts views Thread by didacticone | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.