Make WordPress Core

Opened 13 years ago

Closed 13 years ago

#17650 closed defect (bug) (fixed)

Twenty Eleven - Image Post Format in IE8

Reported by: nickbohle's profile nickbohle Owned by: iandstewart's profile 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 13 years ago.
Image_post_format_display_in_IE8
2011-image-post-format.png (11.8 KB) - added by markmcwilliams 13 years ago.
17650.diff (377 bytes) - added by rosshanney 13 years ago.

Download all attachments as: .zip

Change History (16)

@nickbohle
13 years ago

Image_post_format_display_in_IE8

#1 @nacin
13 years ago

  • Milestone changed from Awaiting Review to 3.2

#2 follow-up: @markmcwilliams
13 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
13 years ago

#3 follow-up: @rosshanney
13 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
13 years ago

  • Keywords needs-patch removed

#5 in reply to: ↑ 3 @nickbohle
13 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
13 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
13 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
13 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
13 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
13 years ago

  • Component changed from Themes to Bundled Theme

#11 @westi
13 years ago

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

#12 @iandstewart
13 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
13 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.