Sorry for the confusion - my webpage is displaying images, but the CSS styling is not being applied to any of them. I've tried adding a class, inline styling in the HTML (with style=""), and using jQuery's .addClass or .css, but none of these methods are working.
Here is the HTML where the images are being displayed:
<div class="Hats2">
</div>
And here is the jQuery code I am using to display the images:
$(function() {
var products = []
$.getJSON('test.json', function(data) {
$.each(data.products, function(i, f) {
var tblRow = '<div class="Hats"><img src=' + f.imUrl + '></div>'
$(tblRow).appendTo(".Hats2");
})
})
})
I also have three lines of CSS that try to change the size of the images under the class 'Hats'. I've applied this class to both the img element itself and the div it's in (like it is now).
.Hats {
width: 200px;
height: 200px;
}
But no matter what I try, the CSS doesn't seem to have any effect. I've attempted different stylings like border-radius, but nothing works. Could it be because I'm assigning the class through jQuery? I'm really confused about why the styling isn't working. Here is my json file in case that helps:
{ "products": [
{
"title": "Hat",
"imUrl": "http://ecx.images-amazon.com/images/I/41pRaO7fFSL._SX395_.jpg"
},
{
"title": "Hat2",
"imUrl": "http://ecx.images-amazon.com/images/I/41z9Fhv41lL._SY300_.jpg"
},
{
"title": "Hat3",
"imUrl": "http://ecx.images-amazon.com/images/I/41y-UNn0QLL._SX342_.jpg"
}
]
}