[RESOLVED] CSS - positioning an image

I'm looking for the proper css to produce a div like the attachment.

So far I have

Code:

---

.archive
{
BACKGROUND-IMAGE: url(file://C:\Documents and Settings\Mark\Desktop\outdated.gif);
background-repeat: no-repeat;
Padding-LEFT: 32px;
BACKGROUND-COLOR: silver;
BORDER: gray 2px solid;
WIDTH: 200px;
}

---

This is getting close. In IE it is placing the imagae in the upper left corner. In FireFox I'm not seeing the image. I would like to position the image a few pixels in and a few pixels down. Can someone help me with the positioning?

Firefox probably isn't picking up on the spaces too well, so replace them so that your file path looks like this

Code:

---

file:///C:/Documents%20and%20Settings/Mark/Desktop/outdated.gif

---

As for the positioning, maybe you should consider placing the image in the DIV itself or giving a little more space on the top and left to the image itself.

It was the spaces that were the problem with Firefox. This is what I ended up with and it seems to work.

Thanks

Code:

---

.archive
{
BACKGROUND-IMAGE: url(file:///C:/Documents%20and%20Settings/Mark/Desktop/outdated.gif);
background-repeat: no-repeat;
BACKGROUND-POSITION: 5px center;
Padding-LEFT: 35px;
Padding-Right: 5px;
BACKGROUND-COLOR: silver;
BORDER: gray 2px solid;
WIDTH: 200px;
FONT-FAMILY: Arial, Verdana, 'Times New Roman';
FONT-SIZE: 8pt;
}

---