WordPress.org

Make WordPress Core

Opened 9 years ago

Closed 9 years ago

#17650 closed defect (bug) (fixed)

Twenty Eleven - Image Post Format in IE8

Reported by: nickbohle Owned by: iandstewart
Milestone: 3.2 Priority: normal
Severity: normal Version: 3.2
Component: Bundled Theme Keywords: has-patch
Focuses: Cc:

Description

Dear all,

my site is proudly powered by WordPress 3.2 and the Twenty Eleven theme. Today, I had the chance to view my site in IE8 and I noticed that the image post format is not displayed correctly.

An image, displayed correctly in FF and IE8, looks totally stretched in IE8... From landscape to portait. Please see the attachment file for more details.

Nick

PS: I've searched the existing tickets and found nothing similar.

Attachments (3)

IE8_Image_post_format_display.png (22.0 KB) - added by nickbohle 9 years ago.
Image_post_format_display_in_IE8
2011-image-post-format.png (11.8 KB) - added by markmcwilliams 9 years ago.
17650.diff (377 bytes) - added by rosshanney 9 years ago.

Download all attachments as: .zip

Change History (16)

@nickbohle
9 years ago

Image_post_format_display_in_IE8

#1 @nacin
9 years ago

  • Milestone changed from Awaiting Review to 3.2

#2 follow-up: @markmcwilliams
9 years ago

When you add some text below your image, with the Image Post Format, you don't get a break between the text finishing before the post details start (as can be seen in my above screenshot!) Do we need some padding in this area?

@rosshanney
9 years ago

#3 follow-up: @rosshanney
9 years ago

  • Keywords has-patch added

IE 8 seems to respect the max-width, but not adjust the image height accordingly if the image is wider than the container. Attached patch adds width:auto to the image style rules. Even though this should be the default, explicitly declaring it seems to fix the issue in IE 8.

This isn't specific to the image post format.

#4 @rosshanney
9 years ago

  • Keywords needs-patch removed

#5 in reply to: ↑ 3 @nickbohle
9 years ago

Replying to rosshanney:

IE 8 seems to respect the max-width, but not adjust the image height accordingly if the image is wider than the container. Attached patch adds width:auto to the image style rules. Even though this should be the default, explicitly declaring it seems to fix the issue in IE 8.

@Ross: Thanks for the patch!

I've tested the fix and it works fine.

#6 in reply to: ↑ 2 @iandstewart
9 years ago

Replying to markmcwilliams:

When you add some text below your image, with the Image Post Format, you don't get a break between the text finishing before the post details start (as can be seen in my above screenshot!) Do we need some padding in this area?

The Image Post Format in Twenty Eleven is intended for use for content consisting of single images. The image caption is great for adding a short line of text.

#7 follow-up: @iandstewart
9 years ago

width:auto will correct the poor image scaling in ie8 but, unfortunately, it has the unintended effect of seeming to disable user edits to the size and height with the visual editor controls. That is, if you scale an image using those controls width:auto hides that scaling.

#8 @iandstewart
9 years ago

Reducing the $content_width to 550 and making sure captioned images in Image and Standard posts have similar padding would prevent this issue from cropping up though it would mean you couldn't post "full-size" images unless they were captioned.

#9 in reply to: ↑ 7 @rosshanney
9 years ago

Replying to iandstewart:

width:auto will correct the poor image scaling in ie8 but, unfortunately, it has the unintended effect of seeming to disable user edits to the size and height with the visual editor controls. That is, if you scale an image using those controls width:auto hides that scaling.

Ah, indeed. I knew it seemed too simple!

Further Googling suggests that there isn't any CSS-only fix for this. TwentyTen also has the same problem (and, I suspect, many other themes too).

#10 @westi
9 years ago

  • Component changed from Themes to Bundled Theme

#11 @westi
9 years ago

  • Owner set to iandstewart
  • Status changed from new to assigned

#12 @iandstewart
9 years ago

I wonder if

.size-full {width: auto;}

would solve this. I'm guessing that users uploading full-size images intend for those images to be full-size and aren't using the Visual Editor controls to re-size those images. Especially with theme editor styles making it very apparent WYRG-ing. I imagine Visual Editor re-sizing is only happening with smaller, or non-full-size, images.

#13 @iandstewart
9 years ago

  • Resolution set to fixed
  • Status changed from assigned to closed

In [18165]:

Twenty Eleven: prevent stretching of full-size images reduced in size with CSS in IE8; Props rosshanney and nickbohle; Fixes #17650

Note: See TracTickets for help on using tickets.