Scroll To Top

Enter a query to search our site. Note that you can use "*" and "?" as wildcards. Enclosing more than one word in double quotes ("CSS Layout") will search for the exact phrase.

PVII Knowledge Base

1. Select a product ...
2. Select category ...
3. Search the Knowledge Base...

Question #295

In Image Rotator Magic some of my images are different heights. Must I edit my images or is there a CSS tweak I can use?

The Answer

Prepared Mar. 2010 by Al Sparber, PVII

IRM is an image/banner rotator and as such works best when all images are the same height. If one or more images are different, the widget will display the image, but the transition will be abrupt and any content below your widget will move up or down with the image. If you do not want to resize your images in an image editor, you can assign a height to the IRM image container. This will cause the browser to crop the image to the height you set.

Locate this rule in your IRM style sheet:

.p7IRM01 .p7IRMdv {
padding:0px;
border: 0;
position:relative;
margin: 0;
overflow: hidden;
}

The selector name will begin with either .p7IRM01 or .p7IRM02 depending on the style theme you are using.

Assign a height. It is usually best to set the height based on the shortest image in your set. If the shortest image in your set is 140 pixels high, set the height to 140px:

.p7IRM01 .p7IRMdv {
padding:0px;
border: 0;
position:relative;
margin: 0;
overflow: hidden;
height: 140px;
}

Back to the questions list