Hello,
I have a small piece of CSS that shows a colored block. If I put it inline like this it works fine:
<div style="margin-left:auto;margin-right:auto;text-align:center;border:1px solid black;height:10px;width:15px;margin-top:1px;background:#ffa70d;"></div>
But if I put it in an external CSS like this, it doesn’t display correctly; it just shows up as a black line. It seems to be ignoring the width in every browser I try it in. Any ideas? This div will be shown hundreds of times on a page so therefore I want to put the styling in a CSS file to cut down on bandwidth.
I reference the following as:
<div class="status notstarted"></div>
.status
{
margin-left: auto;
margin-right: auto;
text-align: center;
border: 1px solid black;
height: 10px;
width: 15px;
margin-top: 1px;
}
.notstarted
{
background:#ffa70d;
}
.failure
{
background:#f32f2f;
}
Thank you!