Image disappears using float

I have been banging my head against the keyboard all morning. I have my css code for images set like Codex says to for float and centered. However on this post:

https://joscafe.com/2005/07/07/29th-regiment-coc/

When I tried to use alignright or alignleft as instructed, the text floats like it’s suppose to but the image is blank. I can move the mouse of it and the alt tag shows up, but the picture is like transparent! Any ideas? I have since removed the align class from the image so it continues to show.

Here is my css for imgs:

img {
border-style: none;
}

a img {border:0}

p img {
padding: 0;
max-width:100%;
}

img.centered {
display:block;
margin-left:auto;
margin-right:auto;
}
img.pic {
background:#fff;
border:1px solid #ccc;
}
img.alignright {
padding: 4px;
margin: 0 0 2px 7px;
display: inline;
}

img.alignleft {
padding: 4px;
margin: 0 7px 2px 0;
display: inline;
}

.alignright {
float: right;
}

.alignleft {
float: left;
}