6 of my images (png and animted gif on hover) fail to load on IE8 only, I've tested on most browsers on mac and windows and IE8 is the only one where the images don't load. They actually appear on IE7, I've been checking the web for solutions or similar problems but I can't seem to find the right solution.
Here's the link to that page: http://tinyurl.com/8ydbp6y
heres the html of that specific section
<ul class="about-icons">
<li id="about-love"><img src="images/about/icon-thankyou.png" onmouseover="this.src='images/about/icon-thankyou.gif'" onmouseout="this.src='images/about/icon-thankyou.png'"/></li>
<li id="about-japan"><img src="images/about/icon-japan.png" onmouseover="this.src='images/about/icon-japan.gif'" onmouseout="this.src='images/about/icon-japan.png'"/></li>
<li id="about-icecream" class="no-margin-right"><img src="images/about/icon-icecream.png" onmouseover="this.src='images/about/icon-icecream.gif'" onmouseout="this.src='images/about/icon-icecream.png'"/></li>
</ul>
<br/>
<div id="about-whymochiko" ><img src="images/about/whymochiko.png" alt="Why Mochiko"/></div>
<br/>
<ul class="about-icons">
<li id="about-flavors"><img src="images/about/icon-flavors.png" onmouseover="this.src='images/about/icon-flavors.gif'" onmouseout="this.src='images/about/icon-flavors.png'"/></li>
<li id="about-ingredients"><img src="images/about/icon-ingredients.png" onmouseover="this.src='images/about/icon-ingredients.gif'" onmouseout="this.src='images/about/icon-ingredients.png'"/></li>
<li id="about-milk" class="no-margin-right"><img src="images/about/icon-milk.png" onmouseover="this.src='images/about/icon-milk.gif'" onmouseout="this.src='images/about/icon-milk.png'"/></li>
</ul>`
Thanks in advance!
edit
I checked IE8 image reports and apparently it adjust the width and height of my images to 0px. I have no idea why that happened :| and I have no idea how to fix it
I think this might be a bug in IE with JavaScript. A possible solution would be to have the image loaded then toggle the animations visibility using JavaScript instead?
Related
I'm using a drawer-panel from the core_elements, to display a side menu and a main part.
<core-drawer-panel>
<div drawer>
<core-menu selected="0">
<core-item icon="favorite" label="Menu Label"> </core-item>
</core-menu>
</div>
<div main>
<ng-view></ng-view>
</div>
</core-drawer-panel>
This work perfectly using both Dartium and Chrome, but in Firefox the views connected to ng-view get messed up. Removing the core-item helps to recover the layout in Firefox, but having a menu is convenient. Replacing the menu with a standard <ul> helps until you put a link in the list.
The following works fine:
<core-drawer-panel>
<ul class="menu">
<li><core-icon icon="favorite"></core-icon>Menu Label</li>
</ul>
...
While adding a link anywhere in the drawer-panel messes up the layout in Firefox.
Why would this behavior occur? Adding a ng-click to the item results in the same layout problems, as when using a link.
I am using a responsive image slider which I am trying to put inside a colorbox however firstly when the colorbox pops up, it opens a blank tiny content box, I want the image slider to appear within the colorbox. The content opens up fine in the colorbox live on my site so can't understand why I can't replicate this in the fiddle.
Secondly, it seems that colorbox doesn't adapt it's size as the browser window is shrunk, is this something that can be changed? I tried setting max-height and max-width in colorbox.js to 100% but that doesn't make any difference.
I have spent most of yesterday trying to sort this but had no luck so far so any help you could give would be appreciated.
The HTML:
<a class="colorbox-link fade_hov" href="#port1">Click to open colorbox</a>
<div style="display: none;">
<div id="port1">
<div>
<div id='ninja-slider'>
<ul>
<li><div data-image="http://www.yourdesignpartner.co.uk/dev/wp-content/themes/colorroom/ninja-slider/img/md/1.jpg"></div></li>
<li><div data-image="http://www.yourdesignpartner.co.uk/dev/wp-content/themes/colorroom/ninja-slider/img/md/2.jpg"></div></li>
<li><div data-image="http://www.yourdesignpartner.co.uk/dev/wp-content/themes/colorroom/ninja-slider/img/md/3.jpg"></div></li>
<li><div data-image="http://www.yourdesignpartner.co.uk/dev/wp-content/themes/colorroom/ninja-slider/img/md/4.jpg"></div></li>
<li><div data-image="http://www.yourdesignpartner.co.uk/dev/wp-content/themes/colorroom/ninja-slider/img/md/5.jpg"></div></li>
</ul>
</div>
</div>
The CSS and JS is linked to externally in this Fiddle THIS FIDDLE Here is the fiddle without the colorbox which, as you can see, is responsive.
So I just need a way of being able to click a link which opens up the slider in a popup window, if there are any other options or perhaps a mobile responsive lightbox available please let me know.
Used fancybox instead of colorbox which it seems is fully responsive to mobile so problem solved.
I've been working on a website locally, creating the web page using Dreamweaver and the latest version of Bootstrap (v 2.3.2). I've been testing it in different browsers and the images seem to load correctly in all of the other browsers (Chrome, Firefox, and Safari). When I go into Internet Explorer 8, some of the PNG files I created load correctly while others don't load at all.
Here is how it looks in Chrome:
Here is how it looks in IE8:
I read through many solutions. The first here, where I went into the Developer tool and did an image report. In the report, as seen below, shows it can read the ALT tags but can't seem to read or think the image link is broken:
Knowing this, I tried finding a more in-dept solution, including this post. Thinking it could possibly be the way the picture was created, I tried multiple ways of creating the images (including changing the format of the file to RGB 8-bit in Photoshop and copying/pasting the vector images from Illustrator to Photoshop) and then removing the browser cache every time I would modify the images and restart the browser. None of it seems to work!
I was wondering if there was something else I could possibly try?
The code I'm currently inserting these images are through the HTML:
<div class="span4">
<div id="applicationInfo">
<p>Application #:<br />
PI: <br />
Status: <br />
Disposition:
</p>
</div>
<ul>
<li>PI / CoPI Information<img src="images/incomplete.png" /></li>
<li>Project Information</li>
<li>Funding Information</li>
<li>Proposal Summary<img src="images/complete.png" /></li>
<li>Proposal Narrative</li>
<li class="current">Current Research Summary<img src="images/complete.png" /></li>
<li>Budget</li>
<li>Publications List</li>
<li>Supplemental Information</li>
<li>Save <span class="small">(without submitting)</span></li>
<li>Submit</li>
</ul>
</div>
This post helped a lot! What helped was making sure to have the images saved as RGB 8-bit or 16-bit. I usually have it defaulted at 16-bit to give more color.
Best of luck to anyone looking for this answer!
I would like to have a page with both an image gallery and a slideshow. The slideshow should be started when I click the link, the normal ColorBox should be used when I click one of the images.
What I do now is group all the images with a rel. For the slideshow link I use the following code:
<a rel="slideshow" href="#">Display slideshow</a>
In the configuration for colorbox I define rel as the rel I use for the images. This works almost, the problem I have with this is that I get an extra empty page at the beginning.
How can I start a slideshow of an image gallery, using a text link?
I searched for how to do this for a long time, and finally found the answer on - where else - the F.A.Q for Colorbox. The example is worded a bit differently though so it wasn't as easy to find as you might think. Especially if you're asking question in these terms, like I was.
<div style="display:none;"> <!-- optionally hide this div -->
<a rel="gallery" href="/slideshow/one.jpg">Caption 1</a>
<a rel="gallery" href="/slideshow/two.jpg">Caption 2</a>
<a rel="gallery" href="/slideshow/three.jpg">Caption 3</a>
</div>
<a id="openGallery" href="#">Display slideshow</a>
<script type="text/javascript">
var $gallery = $("a[rel=gallery]").colorbox();
$("a#openGallery").click(function(e){
e.preventDefault();
$gallery.eq(0).click();
});
</script>
http://jacklmoore.com/colorbox/faq/#faq-click
I have tried all the suggestions on here I just can't seem to get mine to pop-up in front of my stylesheet in IE. Works in firefox and chrome. Here is a very basic example of my layout.
the website is gulfstreamdata dot com . If you add anything to the cart and then in the top-right click on "expand" it drops down whats in your cart, but in IE it pops-under the template. :(
<div class="vmCartModule" style="position:relative; z-index:900; ">
<div id="dropdown" style="position:absolute; z-index:901;">
</div>
</div>
I tried making both z-index values the same and i tried making the outer div higher. Tried about everything I could think of in IE developer tools to no avail.
Anyway since it is positioned in a position you know, maybe you could detach it from the parent div, and move it after its actual parent div, so it will be drawn on front (also removing the z-index values).
<div class="vmCartModule">
</div>
<div id="dropdown" style="position:absolute; z-index:1;">
</div>
you shouldn't have problems in positioning it relative to the body, since it's on top right of the site.
EDIT
If it pops under your template, move that div to the bottom of your website, maybe right before </body>. I had the same issue with many menu and sub menus and it always worked perfectly.
Do this:
<div id="dropdown" style="position:absolute; z-index:901;">
//your content
</div>
<div class="vmCartModule" style="position:relative; z-index:900; ">
//your content
</div>
See demo in IE8 : http://jsfiddle.net/WtWqX/8/