Help - Search - Members - Calendar
Full Version: Image Bleeding
Movable Type Community Forum > Using Movable Type > Default Stylesheets
patch
I am having a problem of images extending beyond the entry body in the blogbody dividers of each entry. When an image is longer than the supplied text for the entry, it appears on top and extends below the border specified in blogbody:

CODE
.blogbody {
 font-family:verdana, arial, sans-serif;
 color:#666;
 font-size:x-small;
 font-weight:bold;
   background:#000;
   line-height:140%;
                               text-align: justify;
   border-left:1px solid #009900;      
   border-right:1px dotted #009900;
   border-bottom:1px dotted #009900;    
   padding:10px;
 }


In addition, I use a class I call "imageviewbox" to define borders around the image itself from within the entry:

CODE
                IMG.imageviewbox {
                              float: left;
                              border: none;
                              margin-right: 7px;
                              margin-bottom: 0px;
                              padding: 5px;
                              }


This archive page provides great example of this phenomenon (I realize the images are not appearing, I have just moved servers and the links need ot be updated. The phenomenon occurs regardless if the image is displayed or not).

It is as if only the actual HTML of the image source used when building the entry is considered in defining the height of the entry.

How can I force the blodbody divider, or MTEntry or whatever it might be, to consider the image as a portion of the entry?
patch
I see now that this does not occur if I simply insert the image in the entry, but rather only when invoking the 'imageviewbox' class.

(?)
terreus
This will happen in some browsers if there is not enough text to flow around the image witht he float style. A quick fix for this is to add
CODE
<br style="clear:both;" /><br clear="all" />
at the end of the post. One or other on their own will not work, you have to use both. Not ideal, but it works.
patch
Awesome. Thanks.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2010 Invision Power Services, Inc.