Twenty Twelve: Proper padding to floating images with caption

[TomasM]

Floating image with caption isn't padded well. We would have to change style.CSS lines

img.alignleft {
	margin: 12px 24px 12px 0;
	margin: 0.857142857rem 1.714285714rem 0.857142857rem 0;
}
img.alignright {
	margin: 12px 0 12px 24px;
	margin: 0.857142857rem 0 0.857142857rem 1.714285714rem;
}
img.aligncenter {
	margin-top: 12px;
	margin-top: 0.857142857rem;
	margin-bottom: 12px;
	margin-bottom: 0.857142857rem;
}

to:

img.alignleft,
div.alignleft {
	margin: 12px 24px 12px 0;
	margin: 0.857142857rem 1.714285714rem 0.857142857rem 0;
}
img.alignright,
div.alignright {
	margin: 12px 0 12px 24px;
	margin: 0.857142857rem 0 0.857142857rem 1.714285714rem;
}
img.aligncenter,
div.aligncenter {
	margin-top: 12px;
	margin-top: 0.857142857rem;
	margin-bottom: 12px;
	margin-bottom: 0.857142857rem;
}

[TomasM]

Looks like we can skip the .aligncenter part and leave only left and right:

img.alignleft,
div.alignleft {
	margin: 12px 24px 12px 0;
	margin: 0.857142857rem 1.714285714rem 0.857142857rem 0;
}
img.alignright,
div.alignright {
	margin: 12px 0 12px 24px;
	margin: 0.857142857rem 0 0.857142857rem 1.714285714rem;
}

[lancewillett]

Hi TomasM,
Could you please add screenshots showing the visual problem, or a URL if you have a live site to see it on?

Also, browser/OS information is helpful in case it's specific to one browser or OS.

[TomasM]

Win8 same on latest FF and chrome.

Before fix: ​http://imgur.com/eUMUCWm,eRVTNJd#1

After fix: ​http://imgur.com/eUMUCWm,eRVTNJd#0

[lancewillett]

Would you be able to post links to a live example (so we can inspect the HTML and CSS). Not sure why you have div in the selector, the theme should already work well with image captions using wp-caption selector to add a bit of padding.

[TomasM]

.wp-caption adds only general padding for the whole element, but as we can see from the original css

img.alignleft {
	margin: 12px 24px 12px 0;
	margin: 0.857142857rem 1.714285714rem 0.857142857rem 0;
}

Rules for the aligned elements apply only if that element is image, caption is not image, so that's why we should add div selector, otherwise we could remove img, selector I would say, so every aligned element would get those rules applied:

For a limited time you can see it here (with original, not fixed CSS):

​http://test.mbccopnetwork.org/urjeet-a-patel-md

[lancewillett]

I see the issue now, thank you. I don't agree with adding div selector, though. Instead, the padding for wp-caption should be improved. So if right-aligned, give a bit more left padding, if left-aligned, a bit more right padding.

Do you want to work up a patch for that? I'm happy to review it and help test.

[TomasM]

Or I guess we could do like this:

.alignleft img {
	margin: 12px 24px 12px 0;
	margin: 0.857142857rem 1.714285714rem 0.857142857rem 0;
}

If we want to apply those rule only for images, but I would say it's better to leave it plain, so people could use .alignleft for any element.

[TomasM]

Sorry, but I don't use any version control software at this moment, will have to leave it for you guys ;)

[TomasM]

I would vote for the plain .alignleft and .alignright:

.alignleft {
	margin: 12px 24px 12px 0;
	margin: 0.857142857rem 1.714285714rem 0.857142857rem 0;
}

It would work for all elements and we would not need to change the wp-caption thing.

[lancewillett]

I would vote for the plain .alignleft and .alignright:

Not a great idea, it'd break a lot of things. People already have workarounds or CSS fixes, so we can't do that broad of an approach.

Thanks for all the screenshot and demo site info, that's really helpful. I'll work on a patch.

[lancewillett]

Add better spacing around aligned captions

[DrewAPicture]

23147.patch works for me.

[lancewillett]

In 23472:

Twenty Twelve: better layout for floated image captions. Fixes #23147.

[TomasM]

Sorry for bugging, but I guess you forgot to put a space between classes ;)

.wp-caption.alignleft

[lancewillett]

Replying to TomasM:

Sorry for bugging, but I guess you forgot to put a space between classes ;)

.wp-caption.alignleft

It's not a mistake, no. Did you test it?

[TomasM]

Yes, it works, but I thought it was WP convention to have spaces between classes.

Sorry, again!

[lancewillett]

Oh, no problem, I'm happy to explain.

In this case, the CSS selector is two class values on the same element: .one.two so they need to be tied together without a space. If it was the case of two elements (one inside the other) it'd need the space.

It's not WP conventions, just plain old CSS selectors. :)

[TomasM]

Now I see that: ​http://css-tricks.com/multiple-class-id-selectors/

I've never heard about this, but I guess it's better later than never :)