Hi everyone!
I have an issue with the images in my blog when view it in IE (IE 8 to be precise) - they are stretched vertically. In Safari, Google Chrome and Firefox everything looks fine.
I've spent couple of weeks already to figure out the solution. I noticed that when I send my posts via e-mail, the system somehow fixes this problem automatically and posts look nice everywhere, but when I download images in "New post" field through "Add media" icon - they don't. I wouldn't mind to send posts via e-mail all the time... but the last time it just didn't work - no images displayed at all.. I tried twice - same result.
So, the search on forums led to a couple of solutions - put compatibility code and put specific code for images. To my surprise my theme (I'm using Chateau) already has these codes. Below is the code for images, which is supposed to work exactly the way I want.
/* Images */
.post-entry img {
border: 1px solid;
border-color: #ddd #ccc #ccc #ddd;
height: auto;
left: -4px;
max-width: 100%;
padding: 3px;
position: relative;
-moz-box-shadow: 4px 4px 12px #ccc;
-webkit-box-shadow: 4px 4px 12px #ccc;
box-shadow: 4px 4px 12px #ccc;
}
img[class*="align"],
img[class*="wp-image-"] {
height: auto; /* Make sure images with WordPress-added height and width attributes are scaled correctly */
}
img.size-full {
max-width: 100%;
width: auto; /* Prevent stretching of full-size images with height and width attributes in IE8 */
}
As you may guess, it doesn't work properly for some reasons.
Can anyone please advice me how to fix it?
The blog I need help with is getvelvet.org.
designsimply