Controlling Size of Pictures (and picture links) in Comment Space

[Modified 5 Sep 07; online icon code change by myspace.]

Controlling the picture size, when the picture is a link, and having the solution work in both FF and IE.

The simple solution (which does not work well for comment images which are links in IE) is this:

<style>
{!-expand width of inner comment space to 100% of friendsComments-!}
table.friendsComments {width:100% !important; }
table.friendsComments table {width:100% !important; }
table.friendsComments table table td {width:0px !important;}

{!-Control size of pictures and links in comments -!}
table.friendsComments table table td img {max-width:100%; _width:300px;}
{!-prevent friends pictures from expanding to 300px in IE -!}
table.friendsComments table table td a img {_width:90px;}
{!-prevent object sizes from messing with column widths -!}
table.friendsComments object {max-width:300px; _width:300px;}

{!-make ugly online icon small-!}
table.friendsComments div img{width:50px;}
</style>

The weakness is that in IE ALL of your comment images, which are also links, size to the same size as the friends picture. This means small (unless you want your friend pictures large.

A more Complex Solution
[NOTE do not use this solution right now. It has multiple comment conditions it does not work well with, and the chances of someone leaving you such a comment are actually quite high. It need to be wrapped in div, with overflow set to hidden. In this case it hides an area with no content anyway, so it is moot (unless someone leaves you a very long text comment without reasonable whitespace).
I plan to fix this next weekend, no time right now.
Or you can use it, and wrap your own div around it or not. ]

[July 13 2007: added a line to prevent the center tag from messing this up in IE]
[July 30 2007: fixed for issue of multiple images floating left in same comment.]
[July 30 2007: Noticed issue with browser needing to sometimes be refreshed to apply the needed style, after following a link and returning. As a result of this I now only apply the complex sizing logic to link images. There is no reason to add the extra "risk" and complexity to images which do not require it.]

Use this solution only if it is important to you that link images, in your actual comments, be allowed to expand to a larger size than your friend's picture.
If you are content to have ALL link images small (friend's pictures and images left in your comments) the solution above is better.)

Problem: IE does not understand max-width (or max-height).
IE sort of understands percent sizing. If I hard set the width of a column, and then set an img width to 100%, it will not make the img wider than the width the column is set to.
However it will sometimes widen the column, as if the image needed all that space.

for example:
Set column width to 300px
Set img width to 100%
Put in an img which is 700px wide.
What happens?
The img sizes to only 300px, but the column still widens to the full 700px (or at least thinks it is that wide as it builds the page).
So while it does control the image size, the column doesn't understand (at least initially), and expands anyway.
I was able to fix this problem through the use of float, however the fix seems to fail to take sometimes, until the browser is refreshed.
This has been tested in limited situations.

<span class="off">
! START CODE to Control Size of Images in Comments.  Allow link images to expand to larger than friend picture.
! If you change the table width (now 450) change the picture width (now 350) to at least 100 less.   
</span>

<style>
{!-set width of comment space, hide width overflow-!}
table.friendscomments {width:450px !important; }

{!-allow inner table and cells to expand to full width-!}
table.friendscomments td, table.friendscomments table {width:100% !important}

{!-so IE knows how wide 100% is-!}
* html table.friendscomments table table td {width:350px !important;}
{!-FF likes this better,  Does IE override the above? sort of-!}
table.friendscomments table table td {width:auto !important;}

{!-force right column at least this wide in IE-}
table.friendsComments .blacktext10 {width:350px !important; }

{!-set comment img width FF-!}
table.friendsComments table table td img {max-width:100% !important;}

{!-set comment img width IE-!}
* html table.friendsComments table table td img {width:350px !important;}
* html table.friendsComments table table td a img {width:100% !important;}

{!-cause content to float left, solves issues with center tag and more -!}
* html table.friendsComments table table td * {position:relative; clear:left; float:left;   }

{!-I hate this thing, you can size it instead of removing it-!}
table.friendsComments div img {display:none;}

</style>
<span class="off">!-END block to control size of images in Comments-!</span>

Example of a Page Where I have this working