Outline out of place

[soltek]

Hello, I gave my div a regular border and outline to give it a better edge, but in Firefox the outline is a couple of pixels away from the div.

Any idea?

 

This is my CSS code:

.header {
position: absolute;
z-index: 999;
height: 50px;
width: 100%;
border-bottom: 1px solid #4f4e4e;
outline: 1px solid #252525;
background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0, rgb(34,34,34)),
    color-stop(1, rgb(71,71,71))
);
background-image: -moz-linear-gradient(
    center bottom,
    rgb(34,34,34) 0%,
    rgb(71,71,71) 100%
);
-webkit-box-shadow: 0px 3px 5px #162631;
-moz-box-shadow: 0px 3px 5px #162631;
box-shadow: 0px 4px 5px #2e3235;
margin-bottom: 0;
}

 

 

[cssfreakie]

it's could be because of that box shadow. might want to have a look here: http://www.w3.org/TR/CSS2/ui.html#x2

[soltek]

Oh, it makes some sense.

 

Do you know if there's any conditional statement for Firefox?

Like this: <!--[if gt IE 6]><!-->

 

I'm trying to not show the outline in Firefox.

 

 

 

Thanks mate

[cssfreakie]

there is not as far as i know. but you could do the opposite.

[soltek]

there is not as far as i know. but you could do the opposite.

 

I guess so, but the outline works right on everthing but Firefox and I'd like to keep it on all other browsers. It makes a nice edge when used with border.

Probably the solution will be using php conditional statements and add the class directly into the pages when the browser detected != mozilla.

 

Thank you for your time and help, cssfreakie