css : where are the white background borders on textboxes coming from?

Question

I have the following page:

http://www.jameschang.com/faxlogic/

where the textboxes have these white borders on on their 4 corners in the upper right login section.

I have the following css attributes for those textboxes:

.HeaderLoginField {
    background-image: url(../content/login_field.png);
    float: left;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-size: 12px;
    color: #969696;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    height: 25px;
    width: 160px;
    text-indent: 3px;
    background-color: #0F0F0F;
    background-repeat: no-repeat;
    font-weight: normal;
}

any ideas why this might be happening? I have changed the png images to a gif and they go away however i want to use png. Any ideas why this is happening?

thanks in advance

Answer 1

Its definitely the image you're using, i inspected the element using firebug and when disabled/enabled the background image, the white corners went away!

Answer 2

its the background image, you can make a new image, or get the look you want using css.

Answer 3

It's the graphics: url("../content/login_field.png") which seems to be anti aliased to a white background instead of black. The png could use transparency instead to work regardless of background.

Answer 4

Did you forget to turn on transparency for your PNG file?

Answer 5

If you want to use 8bit (indexed) PNG instead of 24bit PNG, then use black as matte (the matte is the color against which the edges of the transparent image will blend) instead of white, but it's better to use 24bit PNG with alpha transparency, this way it will work on any background.