CSS 4 MP

When an image is inserted in a reply in the guest book or in any other thread of the site, if the image exceeds the width allowed by the layout of your theme then this will cause the layout becoming stretched in the horizontal dimension: the raight rail goes beyond the right border of the browser's window and it will appear the horizzontal scroll bar and normally the layout will come messed.
You can get the same problem when in the comment you paste a long URL; generally this happens with any text made by a string that does not contain a blank space and it results also longer than the allowed width for your replies.

Here is what I know for solving the issue

First code - introducing scroll bars

The property overflow
This is the simplest natural thing for solving the issue.
The gift of this code is that is good in ALL the browsers and that it is simple.
Just note I cannot test it in mac world - I hope the behavior is the same that in Mozilla Borwsers (Firefox) and with ie7 too. Any feedback will be really appreciated.

/* Comments in the Guestbook in main page */
#home_guestbook .replybox, #home_guestbook .replyboxread {
overflow: auto;
width: 490px;
height: auto;
}
#home_guestbook .quotet {
overflow: auto;
width: 300px;
height: auto;
}
/* Comments in all the threads of the site */
.replybox, .replyboxread {
overflow: auto;
width: 490px;
height: auto;
}
.quotet {
overflow: auto;
width: 300px;
height: auto;
}
/* ie hack */
.replybodytext {
padding-bottom: 0 !important;
padding:0 5px 8px 5px;
}

First code - Variation - Fixed Heigth

It will works in any browser - Just you fix the height so that all the comment will have the same height ; when the comment is longer than the height then the browser will display the vertical scroll bar

/* Comments in the Guestbook in main page */
#home_guestbook .replybox, #home_guestbook .replyboxread {
overflow: auto;
width: 490px;
height: 300px;
}
#home_guestbook .quotet {
overflow: auto;
width: 300px;
height: 200px;
}
/* Comments in all the threads of the site */
.replybox, .replyboxread {
overflow: auto;
width: 490px;
height: 300px;
}
.quotet {
overflow: auto;
width: 300px;
height: 200px;
}

Second code - Resizing Images

The property max-width
this property says that any thing in the content of the box containing this property is exceeding the value assigned to max-width will be reduced to the max-width width; the bad thing is: max width is NOT recognized in Internet Explorer 6 (the most diffuse browser at this moment) and it works in IE 7 only in combination with display:block.

There is a chance for IE to use a propretary javascript code embedded in the css for simulate this property...but it seems does not work here in MP (cause of the limitation to the javascript use)
So for having the code realistically working in the site it is need to use both the methods: max - width and overflow, and the layout will be different depending by the used browser: with all compliant browsers you get the image resized; with ie 6 and previous versions you will get the scroll bar such as in the previous code.

/* Comments in Guestbook in main page */
#home_guestbook .replybox, #home_guestbook .replyboxread {
overflow: auto;
width: 490px;
height: auto;
}
#home_guestbook .quotet {
overflow: auto;
width: 300px;
height: auto;
}
#home_guestbook .replybox .replybody img, #home_guestbook .replyboxread .replybody img, #home_guestbook .replybox .replybody a img, #home_guestbook .replyboxread .replybody a img {
width: auto;
height: auto;
display: block;
max-width: 420px;
max-height: 400px;
}
#home_guestbook .quotet .replybody img, #home_guestbook .quotet .replybody a img {
width: auto;
height: auto;
display: block;
max-width: 270px;
max-height: 400px;
}
/* Comments in all the threads of the site */
.replybox, .replyboxread {
overflow: auto;
width: 490px;
height: auto;
}
.quotet {
overflow: auto;
width: 350px;
height: auto;
}
.replybox .replybody img, .replyboxread .replybody img, .replybox .replybody a img, .replyboxread .replybody a img {
width: auto;
height: auto;
display: block;
max-width: 420px;
max-height: 400px;
}
.quotet .replybody img, .quotet .replybody a img {
width: auto;
height: auto;
display: block;
max-width: 200px;
max-height: 400px;
}
/* ie hack */
.replybodytext {
padding-bottom: 0 !important;
padding:0 5px 8px 5px;
}

Important NOTES for all the codes

It is long I know - But it is interesting to read all this notes to better understand all the code

• In the code I have assigned a value for the width in the comments and a smaller value for the width in the quote comments
  the bad thing of the code
  is that YOU HAVE TO FIND THE RIGHT WIDTH (and evenctually the right max-width) FOR YOUR THEME WITH TRIALS - no other way
  quote must have a smaller width for not exceeding the width of the reply box containing that; being width and heigth of the quote box smaller than the box of the containing reply box you avoid to get in the reply box it self the scroll bar cause of the quote's overflow.
  normally they are all set to auto and for this not working in ie.
• if you use a liquid layout such as Skyline I'm sorry but I have not idea how to solve the issue.
  Normally in the liquid layout the width take up the whole available width of the window and so it isn't possible to assign a defined value for the width without changing the layout it self, so maybe we could say that in this kind of themes there isn't any problem relative to the stretched layout cause of the nature of the liquid layout
• If u use both the codes for the guestbook and for all the comments then the code for all the threads will work in all the site except the guestbook in home page
  If u use only the code for all the threads, it will work in all the site included the guestbook in main page
  If u use only the code for the guestbook, it won't affect the other threads
  just use a separated code for the guestbook
• Guestbook
  I use a different code for the guestbook cause you could use a different width for guestbook and for all the other replies
  More Note that you could have two different width for the guestbook, depending by the view you choose as single column or couble column for the guestbook
• The property overflow: auto introduce the scroll bar in both the dimension horizzontal and vertical; the scroll bars are visible only when it is needs, that is when the content exceeds the width or the height; effectively I'm using this code only for the horizzontal scroll bar.
  it exist overflow-x and overflow-y for to use separated scroll bar only in respectively horizzontal and vertical dimension.
  Being these two properties part of css3 they are not completely implemented in all the browsers yet.
  Particularly I prefer do not use these last properties cause they are not recognized by Opera Browser; with that browser the content becomes illegible
• The overflow auto does not create the horizzontal scroll bar in IE6 or former if no width is defined (width:auto won't work)
  The overflow auto does not create the vertical scroll bar in IE6 or former if no height is defined (height:auto won't work)
  I don't know the behavior of IE7
  will be appreciated any feed back on this
  I don't know the behavior of Mac's browser
  will be appreciated any feed back on this
• About the IE HACK
  when ie make the horizontal scroll bar
  it does not increase the height for the amount of the scroll bar and in consequence the bottom of the reply box is hidden by the scroll bar so u have to use the vertical scroll bar to see the bottom.
  more .. of course ie add the vertical scroll bar.
  The hack add a padding bottom only in ie 6 or former versions.
  the ie hack at the moment not is a perfect solution
  I'm searching for some better code
• about the height:auto;
  this is the default value; no need to add this line of code. I added that so it is clear where u can to change the height for the replies
• possible value for Overflow Property
  • overflow: visible
    this is the default value [That is the value when it is not explicitly assigned the property for that block]
    the content is not clipped; eventual overflow overlaps near boxes or the box comes stretched
  • overflow: hidden
    The overflowing content is cut off
  • overflow: auto
    browsers will display a scroll bar when it is need
  • overflow: scroll
    it makes the scroll bar every time, also if it is no need
• You could use a defined value for max-height as well ; so all the replies will have a max height; exceeding the value defined for max-height compliant browsers will make the vertical scroll bar too ( just exclude ie6 and older versions from this)
• You could use a defined value for height; at this way all the replies will get the same height; it will work with all the browsers

It exist another code working only in IE / Win and in Safari 1.3+ for to wrap a long string such as an URL

word-wrap: break-word; /*only IE and Safari 1.3+*/

anyway using the overflow: auto for making the scrollbar it is no need to use this last code

Posting images in another guestbook

if you wanna put an image in another guestbook or in any other thread this is the normal code you will use

<img src="image_URL">

If the visited site does not use any trick then starting from the code above if you want to avoid to mess up that layout with a big image you have to built a box with the scroll bar containing the big image; for this you have to use this code one

<div style="overflow:auto; width:400px; height:450px; "><img src="image_URL"></div>

where you have to find empirically (that is with trials and corrections) the right width according to the theme where you put the comment
and you have to choose the height as you like (you could use height:auto; removing at this way the vertical scroll bar in any case)

Posting a Long URL in another guestbook

A long URL will stretch the layout where u put it
To avoid this the code to use is quite similar to the previous;

This_could_be_a_very_long_URL

starting from the text above if you want to avoid to mess up that layout you have to built a box with the scroll bar containing the big image; for this you have to use this code one

<div style="overflow:auto; width:400px;">This_could_be_a_very_long_URL</div>

where you have to find empirically (that is with trials and corrections) the right width according to the theme where you put the comment.

you could add many other usual properties such as background, border, text colour, font size, font family and so on..
at this way you could make a box for any message you make also if there aren't images or URLs into that
just for making some particular effect

for example you could make a comment using a box such as

<div style="overflow:auto; width:400px; height: 100px; padding:10px; margin:10px; color:white; background-color: black; background-image:none; font-size:14px; border:3px solid red;">The text of your comment goes here</div>

and it will look as

I want to thank tejasmidget for the code for wrapping text in IE and for the profitable debate.
and missingbits for the idea bout the max width for resizing the images