<font color="#333333"><font><font face="arial,helvetica,sans-serif">I understand what you are trying to do an that's very much appreciated, however the styles are WordPress generated, therefore it should be within WordPress :) Here's that in action </font></font></font><font color="#333333" face="arial, helvetica, sans-serif"><a href="http://themeid.com/demo/responsive/2008/09/03/images-test/">http://themeid.com/demo/responsive/2008/09/03/images-test/</a></font><div>
<font color="#333333"><font><font face="arial,helvetica,sans-serif"><br></font></font></font></div><div><font color="#333333"><font><font face="arial,helvetica,sans-serif">Emil<br></font></font></font><br><div class="gmail_quote">
On Thu, Jul 19, 2012 at 3:54 PM, William Ludwig <span dir="ltr"><<a href="mailto:weludwig@gmail.com" target="_blank">weludwig@gmail.com</a>></span> wrote:<br><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex">
Emil,<div><br></div><div>The HTML I used was from the Theme Unit Test. Â I don't know why a wordpress install would be required to view CSS/HTML.</div><div><br></div><div>If you look the image overflow is present with the original CSS as well. My intent was to clean up the code but keep the same appearance and functionality. Â Adding a max-width to the images is trivial enough but really this wouldn't be the place in the stylesheet to do it. Â You would want your responsive media handling to be more robust than just handling images which kind of takes it out of scope for the snippet I created.</div>
<div><br></div><div>Bill</div><div class="HOEnZb"><div class="h5"><br><div class="gmail_quote">On Thu, Jul 19, 2012 at 3:15 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><font face="arial,helvetica,sans-serif">William,</font></font></font><div><font color="#333333"><font><font face="arial,helvetica,sans-serif"><br></font></font></font></div><div><font color="#333333"><font><font face="arial,helvetica,sans-serif">Thanks but the tests are not complete without <a href="http://codex.wordpress.org/Theme_Unit_Test" target="_blank">http://codex.wordpress.org/Theme_Unit_Test</a> and there must be WordPress install, not just basic HTML. Please take a look to several screenshots I made for you <a href="http://imgur.com/a/iS16K" target="_blank">http://imgur.com/a/iS16K</a> and scroll down to see the image overflows. </font></font></font></div>
<div><font color="#333333"><font><font face="arial,helvetica,sans-serif"><br></font></font></font></div><div><font color="#333333"><font><font face="arial,helvetica,sans-serif">Thanks,</font></font></font></div><div><font color="#333333"><font><font face="arial,helvetica,sans-serif">Emil<br>
</font></font></font><div><div><br><div class="gmail_quote">On Thu, Jul 19, 2012 at 2:13 PM, Laird Sapir <span dir="ltr"><<a href="mailto:laird@memphismckay.com" target="_blank">laird@memphismckay.com</a>></span> wrote:<br>
<blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex">
<div bgcolor="#FFFFFF" text="#000000">Nicely done, William!!!<div><div><br>
<br>
Shinra Web Holdings wrote:
<blockquote type="cite">I approve of this message.<br>
<br>
<div class="gmail_quote">On Thu, Jul 19, 2012 at 8:39 AM, William
Ludwig <span dir="ltr"><<a href="mailto:weludwig@gmail.com" target="_blank">weludwig@gmail.com</a>></span>
wrote:<br>
<blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex"><div>Yesterday in another thread i
mentioned that the sample CSS at <a href="http://codex.wordpress.org/CSS#WordPress_Generated_Classes" target="_blank">http://codex.wordpress.org/CSS#WordPress_Generated_Classes</a>
was ineffecient and redundant. Â Emil challenged me to produce something
better so I wanted to run it past this group before I submitted it.
 After all you guys are the ones that would be seeing it on submitted
themes.</div>
<div><br></div><div>My goal in writing this CSS was to make it
accessable to newer developers, remove repetitive rules, and reduce
selector complexity. Â Visually the new CSS appears the same as the old
CSS (one exception-explained below), but it's half the size and should
be easier to manage.</div>
<div><br></div><div>Thanks for reading this, sorry it's so long.</div><div><br></div><div><br></div><div>My
tests are here, CSS is in the header to make it easier to view. Â HTML
is identical.</div><div><br></div><div>
Original ... <a href="http://wp-themedev.ludwigdevelopment.com/wp-content/uploads/2012/07/new.html" target="_blank">http://wp-themedev.ludwigdevelopment.com/wp-content/uploads/2012/07/new.html</a></div><div>New
... <a href="http://wp-themedev.ludwigdevelopment.com/wp-content/uploads/2012/07/original.html" target="_blank">http://wp-themedev.ludwigdevelopment.com/wp-content/uploads/2012/07/original.html</a></div>
<div><br></div><div><br></div><div>Here is a breakdown what I changed
and why.</div><div><br></div><div>.alignnone - added display:
inline-block so that when .alignnone is applied to either a div or an
image it will display the same. Â This is kind of a judgement call on my
part but I feel that image layout should be consistant whether or not
there is a caption.</div>
<div><br></div><div>div.aligncenter - removed as unnecessary because the
first selector will already catch any divs with .aligncenter.</div><div><br></div><div>a.img.alignright,
a img.alignnone, a img.alignleft, a img.aligncenter - removed,
duplicates of the base alignment class with more complicated selector.</div>
<div><br></div><div>.wp-caption.alignnone, .wp-caption.alignleft,
.wp-caption.alignright - removed, duplicates of the base alignment class
with more complicated selector.</div><div><br></div><div>.wp-caption
p.wp-caption-text - Changed selector to just .wp-caption-text. Â No need
to complicate it. Â It really shouldn't show up outside of a .wp-caption
and if it does someone had to of put it there on purpose and they can
deal with it.</div>
<div><br></div><div><br></div><div>Final CSS</div><div><br></div><div>/*
=WordPress Core</div><div>--------------------------------------------------------------
*/</div><div>.alignnone {</div><div>Â Â display: inline-block;</div>
<div>Â Â margin: 5px 20px 20px 0;</div><div>}</div><div><br></div><div>.alignright
{</div><div>Â Â float:right;</div><div>Â Â margin: 5px 0 20px 20px;</div><div>}</div><div><br></div><div>.alignleft
{</div><div>Â Â float: left;</div>
<div>Â Â margin: 5px 20px 20px 0;</div><div>}</div><div><br></div><div>.aligncenter
{</div><div>Â Â display: block;</div><div>Â Â margin: 5px auto;</div><div>}</div><div><br></div><div>.wp-caption
{</div><div>Â Â background: #fff;</div>
<div>Â Â border: 1px solid #f0f0f0;</div><div>Â Â max-width: 96%; /*
Image does not overflow the content area */</div><div>Â Â padding: 5px
3px 10px;</div><div>Â Â text-align: center;</div><div>}</div><div><br></div><div>
.wp-caption img {</div><div>Â Â border: 0 none;</div><div>Â Â height:
auto;</div><div>Â Â margin: 0;</div><div>Â Â max-width: 98.5%;</div><div>Â
 padding: 0;</div><div>  width: auto;</div><div>}</div><div><br></div><div>
.wp-caption-text {</div><div>Â Â font-size: 11px;</div><div>Â Â
line-height: 17px;</div><div>Â Â margin: 0;</div><div>Â Â padding: 0 4px
5px;</div><div>}</div><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>
<pre>_______________________________________________
theme-reviewers mailing list
<a href="mailto:theme-reviewers@lists.wordpress.org" target="_blank">theme-reviewers@lists.wordpress.org</a>
<a href="http://lists.wordpress.org/mailman/listinfo/theme-reviewers" target="_blank">http://lists.wordpress.org/mailman/listinfo/theme-reviewers</a>
</pre>
</blockquote>
</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></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">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>