CSS Borders

Mozilla displaying wide borders

[PleaseAnswer]

I have created a couple of bounding boxes and Mozilla is displaying them larger than IE is. It's meant to be a 1 px border around a Div tag.

The .BodyContainer style displays exactly how I want it in both IE and Mozilla (with a 1 px border) the .BodySectionBox displays a 1px border in IE (which I want) but it displays about a 4-5 px border in Mozilla.

The .BodySectionBox sits inside the .BodyContainer box if that means anything.

Any ideas?

Below are my styles

.BodyContainer {
float: right;
width: 783px;
height: 100%;
border:solid;
border-width: 1px 1px 1px 1px;
border-color:#000000;
background-color: #EBF4F5;
color: #000000;
padding: 5px;
margin-top: 10px;
margin-bottom: 10px;
}

.BodySectionBox {
color: #000000;
background-color: #FDFDEC;
border-width: 1px 1px 1px 1px;
border: solid;
border-color: #000000;
padding: 5px;
margin-top: 5px;
margin-bottom: 5px;
}

[Munsiblicious]

The problem is here:

.BodySectionBox {
...
border-width: 1px 1px 1px 1px;
border: solid;
border-color: #000000;
...
}

The border property is used to define all aspects of the border: the border you want could be defined like so:

border: solid 1px #000000;

The default border color is the text color (most likely black), the default style is none, and, importantly, the default width is medium (which is several pixels wide).

What happens with your code is:

1. You are setting a 1px border with "border-width," which by default is black and not displayed.
   
2. You then set a solid border with "border", which is, by default, black and medium width, overriding the border set by "border-width."
   
3. Finally, "border-color" sets the border to be black (if it isn't already).
   

Note that if you switch the order, so that "border" is declared first, there is not problem.

You could use "border-style" to set the border style. However, the best and most concise way would just to put:

border: solid 1px #000000;

It saves two lines of code, and you won't have this mix up.