FF displaying unwanted border

Question

i have a div element that is appearing fine in Chrome but Firefox for some reason has decided to put a border around it. let me share the CSS here:

#cpanel {
    width: 320px;
    height: 75px;
    position: absolute;
    //left: 28%;
    //top: 32%;
    z-index: 9996;
    //visibility: hidden;
    display:none;
}

.box {
    z-index:9997;
    //border: 1px solid #000;
    width: 75px;
    height: 75px;
    float:left;
    margin-left: 2px;;
    /*display: block;*/
    background-color: #000;
    -moz-opacity: 0.7;
    opacity:.70;
    filter: alpha(opacity=70);      
}
.box .text{
    width: 75px;
    text-align: center;
    color: white;
    position: absolute;
    //top: 40%;
    z-index: 9998;
}
#cpanel.on {
    visibility: visible;
}

the cpanel is the outermost div. the .box divs are small boxes inside the cpanel div. and these boxes somehow have 1px white borders that arent present in chrome. i want to remove those borders. thanks.

Answer 1

Use FireBug plugin to view the CSS and see where the border is coming from.

Answer 2

Probably you have bloated CSS file and you have lost in it :) Simplest solution is just to add border:none to .box class. Finding your bad border source of course could help, but it could be needed somewhere else and could not be removed.

I suggest also to do simple ctrl+f in css file for 'solid white'.

Answer 3

Another question for you is "Why are you defining the 'box' class twice in your css file?"