Unwanted white pixels in buttons

[bloke]

Hello. I've been playing with css for about a week now and after tearing my hair out and calling it a stupid language a number of times, have eventually solved all my problems.

However todays problem I thought I'd ask about.

There are 3 or 4 white pixels at the corners of my css image changing navigation buttons that I didn't put there. They don't show up when viewed in photoshop or when I use Javascript rollovers. I can't find any help anywhere else either.

Here's my script

body {
background-color: #9EA76C;
margin: 0px;
padding: 0px;
text-align: center;
}

#container {
background-image: url(images/bar.gif);
background-repeat: repeat-y;
margin: 0 auto;
width: 800px;
left: 0px;
top: 0px;
position: relative;
background-color: #9EA76C;
text-align: left;

}

#navigation {
height: 369px;
width: 206px;
left: 23px;
top: 168px;
position: absolute;
margin: 0px;
padding: 0px;




}


#banner {
position: absolute;
height: 100px;
width: 453px;
left: 80px;
top: 25px;
background-image: url(images/Logo-target-language-curved.gif);
background-repeat: no-repeat;
}
#contenttop {
position: relative;
left: 295px;
top: 160px;
width: 480px;
padding-top: 22px;
background-image: url(images/blocktop.gif);
background-repeat: no-repeat;


}
#contentcentre {
background-color: 763721;
position: relative;
width: 480px;

}

#contentbottom {
background-color: transparent;
background-image: url(images/blockbottom.gif);
background-repeat: no-repeat;
position: relative;
width: 480px;
height: 34px;

}
#footer {
height: 110px;
width: 700px;
background-image: url(images/panel.gif);
background-repeat: no-repeat;
position: relative;
left: 80px;
top: 200px;
}

.contact {
background-image: url(images/contactbuttonover.gif);
background-repeat: no-repeat;
height: 58px;
width: 200px;
}

.contact a{
background-image: url(images/contactbutton.gif);
background-repeat: no-repeat;
height: 58px;
width: 200px;
background-color : transparent;
}

.contact a:hover{
background: none;
margin: 0px;
padding: 0px;
}

.home {
background-image: url(images/homebuttonover.gif);
background-repeat: no-repeat;
height: 58px;
width: 200px;
}

.home a{
background-image: url(images/homebutton.gif);
background-repeat: no-repeat;
height: 58px;
width: 200px;
display: block;
background-color : transparent;
}

.home a:hover{
background: none;
}

.course {
background-image: url(images/coursebuttonover.gif);
background-repeat: no-repeat;
height: 58px;
width: 200px;
}

.course a{
background-image: url(images/coursebutton.gif);
background-repeat: no-repeat;
height: 58px;
width: 200px;
display: block;
}

.course a:hover{
background: none;
}

.business {
background-image: url(images/businessbuttonover.gif);
background-repeat: no-repeat;
height: 58px;
width: 200px;
}

.business a{
background-image: url(images/businessbutton.gif);
background-repeat: no-repeat;
height: 58px;
width: 200px;
display: block;
}

.business a:hover{
background: none;
}

.who {
background-image: url(images/whobuttonover.gif);
background-repeat: no-repeat;
height: 58px;
width: 200px;
}

.who a{
background-image: url(images/whobutton.gif);
background-repeat: no-repeat;
height: 58px;
width: 200px;
display: block;
}

.who a:hover{
background: none;
}

.learn {
background-image: url(images/learnbuttonover.gif);
background-repeat: no-repeat;
height: 58px;
width: 200px;
}

.learn a{
background-image: url(images/learnbutton.gif);
background-repeat: no-repeat;
height: 58px;
width: 200px;
display: block;
}

.learn a:hover{
background: none;
}


Thanks in advance. (How's the script? Amateur?)

[Fang]

Sounds like certain areas of the image should be transparent or the same as the background.
Need to see the site.

[bloke]

the images have transparent backgrounds. if i put the exact same images on the page using <img src...... there is no problem. its only when i use css to change the button.

the site isnt on line at the moment.

thanks for replying.

[Fang]

Are you changing the background color? If so it could be that not enough of the image is transparent.
We really need to see the problem to help.

[bloke]

ok. here is the page. i know its a small problem but things would look a lot nicer without it.

http://www.liveandlearncr.com/index.htm

[Fang]

Not enough of the image is transparent or not matched to the background color.

[PeaTearGriffin]

What is your dither set to? And is the matte color the same color as your bg?