float:none overriden by float:left

Question

Hey all this is my first post here and I am reasonably new to the world of CSS. I have 2 pieces of code

.subCatImg.subCatImg
{
float:none;
}

Which controls one specific image, and this piece of code which controls several other objects:

img.StoreProductImage {
float:left;
padding-right:5px;
margin:0px 5% 10px 5px;
}

For some reason even though .subCatImg has higher specificity it's float continues to be overridden by img.StoreProductImage - I assume it is because it is float:none and therefore is overridden by left however even adding clear:both continues to default to float:left. Any thoughts?

I should also add - if I change float:none to right or left it does work

score 0 · Accepted Answer · answered Apr 12 '13 at 01:20

Are you sure the specificity is higher? img is a block element vs class selector. You could just say

.subCatImg img.StoreProductImage{
    float:none;
}

this assumes the image is a child of .subCatImg

Float right may appear to be working because it is applying both left and right to the element since both cases will match the element.

Is .subCatImg.subCatImg declared above the other one like you posted here?

float:none overriden by float:left

1 Answers1