Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

For some reason images are being displayed as a thin line in IE 8 and earlier and i cannot work out why this could be. I'm using CSS to re-size the images for the homepage, the reason for me using CSS to re-size the images is because the thumbnails are being generated by Wordpress.

This is what it looks like in IE...

IE8 and below - thin images

How it looks in Firefox and all other browsers...

Firefox and other major browsers

The CSS i'm using to size the images...

.home .attachment-home-post-thumbnail {
    box-shadow: none;
    height: 125px;
    margin-right: 8px;
    margin-top: 8px;
    width: 140px;
}

Any ideas?

share|improve this question
1  
With a link to the site I could probably work it out but pure CSS questions are off-topic per the faq. –  s_ha_dum Apr 15 '13 at 21:31
    
The thumbnails being generated by WordPress is no reason to use CSS for re-sizing. Re-sizing images on the client-side is highly inefficient. –  vancoder Apr 15 '13 at 21:44
    
The reason thumbnails are re-sized using CSS, is because i want the sizes to be exactly the same on the homepage and didn't want to hard-crop. So i guess there is a reason to use CSS for re-sizing afterall. If that wasn't enough, i wanted them to display in one specific size on the homepage, but their native sizes within the post. –  Nikki Mather Apr 15 '13 at 22:37
add comment

closed as off topic by s_ha_dum, Johannes Pille, Tom J Nowell, Wyck, toscho Apr 16 '13 at 5:04

Questions on WordPress Development Stack Exchange are expected to relate to WordPress within the scope defined by the community. Consider editing the question or leaving comments for improvement if you believe the question can be reworded to fit within the scope. Read more about reopening questions here.If this question can be reworded to fit the rules in the help center, please edit the question.

1 Answer

The issue was related to width: 100%; being applied by Wordpress to all images. The code below fixes this issue - i applied this only to IE 8 and lower, as these are the browsers that have issues with the code.

img.size-full, img.size-large, img.header-image, img.wp-post-image {
    max-width: none !important;
}
share|improve this answer
add comment

Not the answer you're looking for? Browse other questions tagged or ask your own question.