How to resolve - IE 6 ignores img "width" properties

Question

In this post:

http://humus101.com/?p=1734

We've got 4 images set (in the img property) to a width of 246 pixel.

In chrome it looks fine. In IE6 it doesn't.

Any suggestions on how to solve this?

Answer 1

I solved the problem.

In the style.css

I needed to make the following change

#content img {
    margin: 0;
    height: auto;
    max-width: 640px;
    /*width: auto;*/
}

I now wonder how to make that stay for all the following theme updates...

Answer 2

The height attribute of the image is missing. So I would not wonder about differences in display between browsers, because HTML 4 specs do not clearly define how to deal with such a situation.

How to deal with that? Hook into the theme / wp core and patch the code that next to the width attribute, the height attribute is calculated and used as well.

Answer 3

If 640 px is the width you want. I would go into wordpress and set that up as one of the sizes for the images; and then when you want to insert one into a post, select the that size.

Under Settings->Media you can set the Medium and Large sizes. I would change these to what you want; then use this plugin http://wordpress.org/extend/plugins/bulk-image-resize-utility/ which will resize the images you have.

What wordpress will do is create new images with these dimensions. What this does for the user, is they are only downloading the size of the image that the are seeing, which helps page load time.

You might have to go back into your post and edit the images to use the medium or large size.

Answer 4

#content img {
    margin: 0;
    height: auto;
    max-width: 640px;
    width: auto;
}

The above puzzles me terrible, I did remove width: auto; in TwentyTen theme, it worked - but as for the child tbeme option, how does one leave out the line in child theme, but is still used via parent theme, its weird!

I though the child theme style sheet replace use of TwentyTen theme.