<div>Cheers Emil, Ah yes you're right Images with captions get a dynamic width specified in the wrapping div:<br></div><div><div id="attachment_2787" class="wp-caption alignnone" style="width: 310px">...</div>
<div><div id="attachment_2787" class="wp-caption alignnone" style="width: 190px">....</div><div><br></div><div>prevents that issue, so width:auto is fine to use with images that get captions, since it's limited to the parent div's size, just not for images without captions.<br>
</div><br><div class="gmail_quote">On 9 October 2011 12:00, Emil Uzelac <span dir="ltr"><<a href="mailto:emil@themeid.com">emil@themeid.com</a>></span> wrote:<br><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex;">
<font color="#333333"><font size="2"><font face="arial,helvetica,sans-serif">Update, can't update this in codex because it does not apply to WP Generated Styles... but you see my point.</font></font></font><div><font color="#333333"><font size="2"><font face="arial,helvetica,sans-serif"><br>
</font></font></font></div><div><div class="im"><font color="#333333"><font size="2"><font face="arial,helvetica,sans-serif"><br clear="all"></font></font></font><div><b><font face="arial, helvetica, sans-serif">----</font></b></div>
<div><font face="arial, helvetica, sans-serif"><b>Emil Uzelac</b> | ThemeID | T: 224-444-0006 | Twitter: @EmilUzelac | E: <a href="mailto:emil@themeid.com" target="_blank">emil@themeid.com</a> | <a href="http://themeid.com/" target="_blank">http://themeid.com</a></font></div>
<div><font color="#999999" face="arial, helvetica, sans-serif">Make everything as simple as possible, but not simpler. - Albert Einstein</font></div><br>
<br><br></div><div><div class="h5"><div class="gmail_quote">On Sat, Oct 8, 2011 at 7:58 PM, Emil Uzelac <span dir="ltr"><<a href="mailto:emil@themeid.com" target="_blank">emil@themeid.com</a>></span> wrote:<br><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex">
<font color="#333333"><font size="2"><font face="arial,helvetica,sans-serif">Actually I lied sorry: </font></font></font><div><font color="#333333"><font size="2"><font face="arial,helvetica,sans-serif"><br></font></font></font></div>
<div><font color="#333333"><font size="2"><font face="arial,helvetica,sans-serif"><div>#content img {</div><div><span style="white-space:pre-wrap"> </span>max-width:98%;</div><div><span style="white-space:pre-wrap"> </span>height:auto;</div>
<div>}</div><div><br></div><div>Is for wide images, I will note that in codex shortly.</div><div><br></div><div><br></div></font></font></font><div><div><b><font face="arial, helvetica, sans-serif">----</font></b></div>
<div><font face="arial, helvetica, sans-serif"><b>Emil Uzelac</b> | ThemeID | T: <a href="tel:224-444-0006" value="+12244440006" target="_blank">224-444-0006</a> | Twitter: @EmilUzelac | E: <a href="mailto:emil@themeid.com" target="_blank">emil@themeid.com</a> | <a href="http://themeid.com/" target="_blank">http://themeid.com</a></font></div>
<div><font color="#999999" face="arial, helvetica, sans-serif">Make everything as simple as possible, but not simpler. - Albert Einstein</font></div><br>
<br><br></div><div><div><div class="gmail_quote">On Sat, Oct 8, 2011 at 7:48 PM, Emil Uzelac <span dir="ltr"><<a href="mailto:emil@themeid.com" target="_blank">emil@themeid.com</a>></span> wrote:<br>
<blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex">
<font color="#333333"><font size="2"><font face="arial,helvetica,sans-serif">Hi Dion,</font></font></font><div><font color="#333333"><font size="2"><font face="arial,helvetica,sans-serif"><br></font></font></font></div><div>
<font color="#333333" face="arial, helvetica, sans-serif">Correct and this was tested on all major browsers and classes are compatible with Theme Unit Test data. Please feel free to test this out, I haven't seen any issue with IE8, or any other IE browsers. IE6 was not tested. You can see <a href="http://themeid.com/demo/highlander/2008/09/03/images-test/" target="_blank">http://themeid.com/demo/highlander/2008/09/03/images-test/</a> and go over all 4 pages. Nothing is written in stone, suggestions, correction or possible bugs are always welcome. I am using the same thing for my Shell Theme, as well as any Theme designed for my clients. So far no complaints, but hey you never know right? :)</font></div>
<div><font color="#333333" face="arial, helvetica, sans-serif"><br></font></div><div><font color="#333333" face="arial, helvetica, sans-serif">Cheers,</font></div><div><font color="#333333" face="arial, helvetica, sans-serif">Emil</font></div>
<font color="#888888">
</font><div><div><font color="#333333"><font size="2"><font face="arial,helvetica,sans-serif"><br clear="all"></font></font></font><div><b><font face="arial, helvetica, sans-serif">----</font></b></div>
<div><font face="arial, helvetica, sans-serif"><b>Emil Uzelac</b> | ThemeID | T: <a href="tel:224-444-0006" value="+12244440006" target="_blank">224-444-0006</a> | Twitter: @EmilUzelac | E: <a href="mailto:emil@themeid.com" target="_blank">emil@themeid.com</a> | <a href="http://themeid.com/" target="_blank">http://themeid.com</a></font></div>
<div><font color="#999999" face="arial, helvetica, sans-serif">Make everything as simple as possible, but not simpler. - Albert Einstein</font></div><br>
<br><br></div><div><div><div class="gmail_quote">On Sat, Oct 8, 2011 at 7:34 PM, Dion Hulse (dd32) <span dir="ltr"><<a href="mailto:wordpress@dd32.id.au" target="_blank">wordpress@dd32.id.au</a>></span> wrote:<br>
<blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex">
<div>I haven't tested it, but looking at that link, you've used width:auto on the img, which you've probably done to make sure the image doesn't end up larger than it's parent container? Since it's within the .wp-caption it might be contained to the caption, but I'm not sure without testing it out.. <br>
</div><div><br>
</div><div>There's a trac ticket(<a href="http://core.trac.wordpress.org/ticket/18775" target="_blank">http://core.trac.wordpress.org/ticket/18775</a>) for a user who's theme included something similar, and it removed the ability for the user to use the "Scaling" functions (ie. insert image at 70% size), the width:auto overrides the HTML width attributes, causing the image to always be at full width.</div>
<div><br></div><div>The TwentyEleven theme even has that problem (It was introduced as a fix for IE8 where images would overflow) - Unfortunately there are no css classes which you can use to detect that scaling.</div><div>
<br></div><div><b>tl;dr:</b> Using width:auto in classes that post images can lead to the Image scaling functionality of WordPress not working</div><div><br></div><div>I thought it would be worth noting that for the theme developers among the list.</div>
<div><div>
<div>
<br></div>
<br><div class="gmail_quote">On 9 October 2011 11:20, Emil Uzelac <span dir="ltr"><<a href="mailto:emil@themeid.com" target="_blank">emil@themeid.com</a>></span> wrote:<br><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex">
<font color="#333333"><font size="2"><font face="arial,helvetica,sans-serif">Nicely done! I modified this while back as well <a href="http://codex.wordpress.org/CSS#WordPress_Generated_Classes" target="_blank">http://codex.wordpress.org/CSS#WordPress_Generated_Classes</a>, fully working example that covers Theme Unit Data, including the wide images etc.</font></font></font><div>
<font color="#333333"><font size="2"><font face="arial,helvetica,sans-serif"><br></font></font></font></div><div><font color="#333333"><font size="2"><font face="arial,helvetica,sans-serif"><br clear="all"></font></font></font><div>
<b><font face="arial, helvetica, sans-serif">----</font></b></div><div><font face="arial, helvetica, sans-serif"><b>Emil Uzelac</b> | ThemeID | T: <a href="tel:224-444-0006" value="+12244440006" target="_blank">224-444-0006</a> | Twitter: @EmilUzelac | E: <a href="mailto:emil@themeid.com" target="_blank">emil@themeid.com</a> | <a href="http://themeid.com/" target="_blank">http://themeid.com</a></font></div>
<font color="#888888">
<div><font color="#999999" face="arial, helvetica, sans-serif">Make everything as simple as possible, but not simpler. - Albert Einstein</font></div></font><div><div><br>
<br><br><div class="gmail_quote">On Sat, Oct 8, 2011 at 10:59 AM, Edward Caissie <span dir="ltr"><<a href="mailto:edward.caissie@gmail.com" target="_blank">edward.caissie@gmail.com</a>></span> wrote:<br><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex">
Nicely done, Kirk.<br><br>We probably should have added something like that before. It's great to have a fresher set of eyes looking at things. Thanks.<br><br><br clear="all">Cais.<div><div><br>
<br><br><div class="gmail_quote">On Sat, Oct 8, 2011 at 11:23 AM, Chip Bennett <span dir="ltr"><<a href="mailto:chip@chipbennett.net" target="_blank">chip@chipbennett.net</a>></span> wrote:<br><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex">
Looks good!<div><div><br><br><div class="gmail_quote">On Sat, Oct 8, 2011 at 10:05 AM, Kirk Wight <span dir="ltr"><<a href="mailto:kwight@kwight.ca" target="_blank">kwight@kwight.ca</a>></span> wrote:<br>
<blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex">
Ah, that makes more sense already. I've added a small note to the <a href="http://codex.wordpress.org/Theme_Review#WordPress-Generated_CSS_Classes" target="_blank">Codex</a> for clarification.<div><div>
<br><br><div class="gmail_quote">On 8 October 2011 10:23, Chip Bennett <span dir="ltr"><<a href="mailto:chip@chipbennett.net" target="_blank">chip@chipbennett.net</a>></span> wrote:<br>
<blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex">Kirk,<div><br></div><div>They're required because they're added/used by WordPress.</div><div><br></div><div>The only ones that are allowed to be "blank" are .sticky and .bypostauthor. The intent here is that the Theme developer consider these classes in the design intent for the Theme. We consider *not* styling them to be valid design intent, but want to have a modicum of assurance that the developer has *considered* them.</div>
<div><br></div><div>The others are all required to be styled *appropriately*: .alignleft, .alignright, .aligncenter, .wp-caption, .wp-caption-text, .gallery-caption</div><div><br></div><div>Hope this helps!</div><div><br>
</div><div>Chip<br><br><div class="gmail_quote"><div><div>On Sat, Oct 8, 2011 at 9:16 AM, Kirk Wight <span dir="ltr"><<a href="mailto:kwight@kwight.ca" target="_blank">kwight@kwight.ca</a>></span> wrote:<br>
</div></div><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex"><div><div>
Can anyone point me to sources explaining the thinking behind the required CSS classes? I'm wondering why these particular classes are required, and why they can be empty when present. I'm sure there must have been extensive discussion at some point, but I've checked the list archives and can't find anything definitive.<div>
<br></div><div>Thanks,</div><div>Kirk</div>
<br></div></div>_______________________________________________<br>
theme-reviewers mailing list<br>
<a href="mailto:theme-reviewers@lists.wordpress.org" target="_blank">theme-reviewers@lists.wordpress.org</a><br>
<a href="http://lists.wordpress.org/mailman/listinfo/theme-reviewers" target="_blank">http://lists.wordpress.org/mailman/listinfo/theme-reviewers</a><br>
<br></blockquote></div><br></div>
<br>_______________________________________________<br>
theme-reviewers mailing list<br>
<a href="mailto:theme-reviewers@lists.wordpress.org" target="_blank">theme-reviewers@lists.wordpress.org</a><br>
<a href="http://lists.wordpress.org/mailman/listinfo/theme-reviewers" target="_blank">http://lists.wordpress.org/mailman/listinfo/theme-reviewers</a><br>
<br></blockquote></div><br>
</div></div><br>_______________________________________________<br>
theme-reviewers mailing list<br>
<a href="mailto:theme-reviewers@lists.wordpress.org" target="_blank">theme-reviewers@lists.wordpress.org</a><br>
<a href="http://lists.wordpress.org/mailman/listinfo/theme-reviewers" target="_blank">http://lists.wordpress.org/mailman/listinfo/theme-reviewers</a><br>
<br></blockquote></div><br>
</div></div><br>_______________________________________________<br>
theme-reviewers mailing list<br>
<a href="mailto:theme-reviewers@lists.wordpress.org" target="_blank">theme-reviewers@lists.wordpress.org</a><br>
<a href="http://lists.wordpress.org/mailman/listinfo/theme-reviewers" target="_blank">http://lists.wordpress.org/mailman/listinfo/theme-reviewers</a><br>
<br></blockquote></div><br>
</div></div><br>_______________________________________________<br>
theme-reviewers mailing list<br>
<a href="mailto:theme-reviewers@lists.wordpress.org" target="_blank">theme-reviewers@lists.wordpress.org</a><br>
<a href="http://lists.wordpress.org/mailman/listinfo/theme-reviewers" target="_blank">http://lists.wordpress.org/mailman/listinfo/theme-reviewers</a><br>
<br></blockquote></div><br></div></div></div>
<br>_______________________________________________<br>
theme-reviewers mailing list<br>
<a href="mailto:theme-reviewers@lists.wordpress.org" target="_blank">theme-reviewers@lists.wordpress.org</a><br>
<a href="http://lists.wordpress.org/mailman/listinfo/theme-reviewers" target="_blank">http://lists.wordpress.org/mailman/listinfo/theme-reviewers</a><br>
<br></blockquote></div><br>
</div></div><br>_______________________________________________<br>
theme-reviewers mailing list<br>
<a href="mailto:theme-reviewers@lists.wordpress.org" target="_blank">theme-reviewers@lists.wordpress.org</a><br>
<a href="http://lists.wordpress.org/mailman/listinfo/theme-reviewers" target="_blank">http://lists.wordpress.org/mailman/listinfo/theme-reviewers</a><br>
<br></blockquote></div><br></div></div></div>
</blockquote></div><br></div></div></div>
</blockquote></div><br></div></div></div>
<br>_______________________________________________<br>
theme-reviewers mailing list<br>
<a href="mailto:theme-reviewers@lists.wordpress.org">theme-reviewers@lists.wordpress.org</a><br>
<a href="http://lists.wordpress.org/mailman/listinfo/theme-reviewers" target="_blank">http://lists.wordpress.org/mailman/listinfo/theme-reviewers</a><br>
<br></blockquote></div><br>