Do you have a CSS outline or background color that won't seem to go away? The solution may not be undefining something, but defining it negatively. A website that I maintain has a default image style with a double outline effect. This effect is achieved by giving every image in the content section a white background that is made visible by 2 pixels of padding and a thin black outline. The CSS looks like this.
img { margin: 0; padding: 2px; border: 1px solid #000000; background-color: #FFFFFF; }
In a few instances however, I want to place a series of images without this outline and background. In order to do this I just need to define a new class style to apply to the element that contains these un-bordered images. (<div class="noborder" ><img src="test.gif" /></div>) Common sense might suggest something like this:
.noborder img { margin: 0; padding: 0; }
In this case, common sense would be wrong. Sure, I've removed the background and outline from the definition, but I haven't removed it from my image. The original style applies to all images, and would still control this image. The background color and border would still be applied. The background color would not be visible around the edges of the image due to the change in Padding from 2px to 0, but it would still be there. If I was using a GIF with a transparency, the background color would show through. The solution is not to make it undefined in the new style, but to define it negatively.
.noborder img { margin: 0; padding: 0; border: none; background-color: transparent; }
By making the border none, and the background color transparent, I've actively given them not border and no outline. Rather than letting the image inherit the background from the default img style, I've negatively defined those elements, giving any image within this DIV no border, and no background.
