CMS Made Simple Forums

Content management as it is meant to be
https://forum.cmsmadesimple.org/

AE-module not working in IE

https://forum.cmsmadesimple.org/viewtopic.php?t=71020

Page 1 of 1

AE-module not working in IE

Posted: Sat Aug 23, 2014 10:32 pm
by Cognatus
I use the AE-gallery module at one of my web pages but for some reason, that I can't figure out, does it work well in Chrome and Firefox, but not in IE 11. Any idea why?

http://www.epitafier.se/index.php?page= ... ae-image-0

Re: AE-module not working in IE

Posted: Sun Aug 24, 2014 10:37 am
by velden
Use the IE developer tool (F12) and have a look at the inline css on:

Code: Select all

<div class="ae-image" style="left: 0px; top: 200px; width: 370px; height: 0px;"><img width="854" height="1200" src="uploads/images/Gallery/vapen/B000501.jpg"></div>
The height and top prevent the image (div with image) from being displayed.

In Firefox there are other values for those css properties (height and top). Not sure why. Hope you have a point to start searching now.

Re: AE-module not working in IE

Posted: Sun Aug 24, 2014 11:15 am
by Cognatus
The CSS thats attatched to this gallery template looks like this:

Code: Select all

.gallery .img {
	height: 120px;
	/*width: 120px;   Adjust as you see fit */
	float: left;
	margin: 10px;
	text-align: center;
}

.gallery .img a {
	display: inline-block;
	border: 2px solid #ddd;
	padding: 1px;
}

.gallery .img a:hover {
	border-color: #999;
}

.gallery img {
	border: none;
}

.gallery .pagenavigation {
	height: 50px;
}

.gallery .prevpage a, .gallery .prevpage em {
	display: block;
	width: 50px;
	height: 39px;
	float: left;
	margin: 0;
	text-indent: -1000px;
	background: url(../../images/previous.png) transparent no-repeat 0 0;
}

.gallery .nextpage a, .gallery .nextpage em {
	display: block;
	width: 50px;
	height: 39px;
	float: left;
	margin: 0 6px 0 0;
	text-indent: -1000px;
	background: url(../../images/next.png) transparent no-repeat 0 0;
}

.gallery .parentlink a {
	display: block;
	width: 50px;
	height: 39px;
	float: left;
	text-indent: -1000px;
	background: url(../../images/uppage.png) transparent no-repeat 0 0;
}

.gallery .pagenavigation a:hover {
	background-position: 0 -40px;
}

.gallery .prevpage em, .gallery .nextpage em {
	background-position: 0 -80px;
}

.gallery .pagelinks {
	float: right;
	border-right: 2px solid #666;
}

.gallery .pagelinks a, .gallery .pagelinks em {
	margin-top: 6px;
	padding: 0 6px;
	border-left: 2px solid #666;
	text-align: center;
	font: bold 11px verdana; color: #666;
}

.gallery .pagelinks em {
	color: #000;
}

.galleryclear {
	clear: both;
}

/* AE-GALLERY */

.ae-gallery {
  width: 370px;  /* set the width of the thumbrow */
  margin-bottom: 30px;
}
.ae-gallery, .ae-gallery * {
  margin: 0;
  padding: 0;
}
  .ae-gallery .ae-image-wrapper {
    width: 370px; /* set the maximum width and height of the big image. Bigger images will be scaled down automatically by the script */
    height: 400px;
    margin-bottom: 10px;
    position: relative;
    overflow: hidden;
    border: 2px solid #ddd;
  }
    .ae-gallery .ae-image-wrapper .ae-loader {
      position: absolute;
      z-index: 10;
      top: 48%;
      left: 48%;
      border: 1px solid #CCC;
    }
    .ae-gallery .ae-image-wrapper .ae-next {
      position: absolute;
      right: 0;
      top: 0;
      width: 25%;
      height: 100%;
      cursor: pointer;
      display: block;
      z-index: 200;
    }
    .ae-gallery .ae-image-wrapper .ae-prev {
      position: absolute;
      left: 0;
      top: 0;
      width: 25%;
      height: 100%;
      cursor: pointer;
      display: block;
      z-index: 200;
    }
    .ae-gallery .ae-image-wrapper .ae-prev, .ae-gallery .ae-image-wrapper .ae-next {
      /* Or else IE will hide it */
      background: url(../ae-gallery/trans.gif);
    }
      .ae-gallery .ae-image-wrapper .ae-prev .ae-prev-image, .ae-gallery .ae-image-wrapper .ae-next .ae-next-image {
        background: url(../ae-gallery/ae_prev.png);
        width: 30px;
        height: 30px;
        display: none;
        position: absolute;
        top: 47%;
        left: 0;
        z-index: 101;
      }
      .ae-gallery .ae-image-wrapper .ae-next .ae-next-image {
        background: url(../ae-gallery/ae_next.png);
        width: 30px;
        height: 30px;
        right: 0;
        left: auto;
      }
    .ae-gallery .ae-image-wrapper .ae-image {
      position: absolute;
      overflow: hidden;
      top: 0;
      left: 0;
      z-index: 9;
    }
      .ae-gallery .ae-image-wrapper .ae-image a img {
        border: 0;
      }
      .ae-gallery .ae-image-wrapper .ae-image .ae-image-description {
        position: absolute;
        bottom: 0px;
        left: 0px;
        padding: 7px;
        text-align: left;
        width: 100%;
        z-index: 2;
        background: url(../ae-gallery/opa75.png);
        color: #000;
      }
      * html .ae-gallery .ae-image-wrapper .ae-image .ae-image-description {
        background: none;
        filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true, sizingMethod=scale, src='modules/Gallery/templates/ae-gallery/opa75.png');
      }
        .ae-gallery .ae-image-wrapper .ae-image .ae-image-description .ae-description-title {
          display: block;
        }
  .ae-gallery .ae-controls {
    height: 20px;
  }
    .ae-gallery .ae-info {
      float: left;
    }
    .ae-gallery .ae-slideshow-controls {
      float: right;
    }
      .ae-gallery .ae-slideshow-controls .ae-slideshow-start, .ae-gallery .ae-slideshow-controls .ae-slideshow-stop {
        padding-left: 5px;
        cursor: pointer;
         display: inline-block;
        text-indent: -500px;
        overflow:hidden;
        width: 14px;
        background: url(../ae-gallery/ae_scroll_forward.png) 0px -3px no-repeat;
      }
      .ae-gallery .ae-slideshow-controls .ae-slideshow-stop {
        background: url(../ae-gallery/ae_stop.png) 0px -3px no-repeat;
     }
      .ae-gallery .ae-slideshow-controls .ae-slideshow-countdown {
        padding-left: 5px;
        font-size: 0.9em;
      }
    .ae-gallery .ae-slideshow-running .ae-slideshow-start {
      cursor: default;
      font-style: italic;
    }
  .ae-gallery .ae-nav {
    width: 100%;
    position: relative;
  }
    .ae-gallery .ae-forward, .ae-gallery .ae-back {
      position: absolute;
      top: 0;
      height: 100%;
      z-index: 10;
    }
    /* IE 6 doesn't like height: 100% */
    * html .ae-gallery .ae-forward, .ae-gallery .ae-back {
      height: 100px;
    }
    .ae-gallery .ae-back {
      cursor: pointer;
      left: -20px;
      width: 13px;
      display: block;
      background: url(../ae-gallery/ae_scroll_back.png) 0px 22px no-repeat;
    }
    .ae-gallery .ae-forward {
      cursor: pointer;
      display: block;
      right: -20px;
      width: 13px;
      background: url(../ae-gallery/ae_scroll_forward.png) 0px 22px no-repeat;
    }
    .ae-gallery .ae-nav .ae-thumbs {
      overflow: hidden;
      width: 100%;
/*padding: 3px 1px;
border: 1px solid #ddd;
background-color: #fff;*/
    }
      .ae-gallery .ae-thumbs .ae-thumb-list {
        float: left;
        width: 9000px;
        list-style: none;
      }
        .ae-gallery .ae-thumbs li {
          float: left;
          padding:0 5px 0 0 !important;
          margin:0 0 0 0 !important;
          list-style: none;
        }
          .ae-gallery .ae-thumbs li a {
            display: block;
          }
            .ae-gallery .ae-thumbs li a img {
              border: 3px solid #CCC;
              display: block;
            }
            .ae-gallery .ae-thumbs li a.ae-active img {
              border: 3px solid #616161;
            }
/* Can't do display none, since Opera won't load the images then */
.ae-preloads {
  position: absolute;
  left: -9000px;
  top: -9000px;
}

Re: AE-module not working in IE

Posted: Wed Sep 17, 2014 9:24 pm
by Cognatus
I have had some time to look into this now and I'm still not capable of figuring out why stuff isn't working as it should in IE. The output for the div that's differing between the browsers is following:

Chrome:

Code: Select all

<div class="ae-image" style="width: 314.333333333333px; height: 400px; top: 0px; left: 27.8333333333333px;">
<img src="uploads/images/Gallery/vapen/B000101.jpg" width="314.33333333333337" height="400">
</div>
IE:

Code: Select all

<div class="ae-image" style="left: 0px; top: 200px; width: 370px; height: 0px;">
<img width="943" height="1200" src="uploads/images/Gallery/vapen/B000101.jpg">
</div>
All times are UTC
Page 1 of 1

Powered by phpBB® Forum Software © phpBB Limited