I am using the MediaElement.js Wordpress plugin in order to play MP3s on my homepage.
But on Internet Explorer 8 I have trouble with the plugin.
Instead of the play button and the volume button, it only shows a blocky rectangle.
I have tested on two different computers with the same result.
You can test it here: http://www.alatarmusic.com/noise-reduction/
It works fine with Firefox and with Safari on my iPhone. And I know, that other sites show up fine in my Internet Explorer. For example, the player on MediaElementJS.com looks correct. It seems, something is wrong with my homepage?
But what could be the reason for this?
Was having the same issue in IE7 as well as IE8:
The fix for me was making sure the filter style was reset:
filter: none;
Your style-sheet contains the following CSS:
.post .content button{background:linear-gradient(top,#ffffff 0%,#e9e9e9 100%);-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#e9e9e9')";
Beautified:
.post .content button {
background: linear-gradient(top,#ffffff 0%,#e9e9e9 100%);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#e9e9e9')";
}
The last property, -ms-filter, is a proprietary CSS extension by Microsoft, which is only parsed by Internet Explorer.
The color #ffffff is white, and the color #e9e9e9 is light gray.
Because the effect does only work in Internet Explorer, only IE users will see a light-colored rectangle instead of a play button.
Setting the filter to none gives back the button:
This markup does probably effect other buttons in your Wordpress blog, so removing it might not be an option. Instead, you can add filter:none to the CSS for .mejs-button; e.g.:
.mejs-button{
filter: none;
}
Related
I am having a strange issue with an img that only renders when the browser gets resized or dev tools are opened. The img has srcset and sizes attributes, and is inside a polymer template. It displays normally whithout the attributes, or outside of the Polymer shadow dom. The issue came up with Chrome 39, I believe, and is restricted to Google Chrome, where there are no polyfills at work anymore.
There are no errors in the console, naturally, status is 200 ok there. I am having no issues in Firefox or IE. My polymer version is 0.5.0, and I reported the issue at the Polymer github page, but maybe there is something else to it.
Lex
OK, I think I may have fixed this, though it is a bit silly that I had to do it this way. Originally I had written these with the combined declaration:
background: url(image-name.jpg) top center fixed;
When I write it long form it seems to work just fine.
background-image: url(image-name.jpg);
background-position: top center;
background-attachment: fixed;
If I have more time to look into it, I'll comment in any info I find on why this may be.
I am currently redoing a site home page, and during testing, I am getting gaps of specific images missing in Internet Explorer 9. I have never seen that before.
Any idea what is causing this?
My account is new, so I cannot post a screen shot. Here is the link:
http://i.stack.imgur.com/rlhi4.png
EDIT: I have fooled around with it some more, and it appears when I remove border-radius: 5px; the images display fine. Any way to get border-radius to display correctly in IE 9?
This issue was being caused by my video card being overloaded. It was running at nearly 100% capacity doing something else, so it was causing issues rendering websites with Internet Explorer.
I'm extremely new to Media Queries so I was playing with the min-width: attributes with my Firefox 12.0 and noticed that it just wasn't working. After some playing around and after experimenting with this lovely website
http://barrow.io/lab/media-query-viewport/
I found out that the minimum min-width that my Firefox supports on my machine (it's an XP box) is 615px. Why? I'm trying to play with Media Queries so that I can make a website that works well on many devices as well as desktops. This includes devices that are 480 and 320 pixels wide. With Firefox not allowing me to test the smaller widths it's going to seriously affect my development.
Is there any kind of a work-around for this other than trying a different browser?
Thanks.
EDIT: Now that my Firefox has gone through a few upgrades (now at v22) this is not longer a problem. I'm glad it got fixed.
As of this: http://support.mozilla.org/en-US/questions/772847#answer-125895,
Firefox supports no more than 480 width, so if you want to test for 320 px, you must use a different browser. I would point out that if you want to test smartphones on your site, you should be using smartphone browsers on smartphone hardware... not just desktop browsers set to really small resolutions, which is what it sounds like you were trying to do.
There's a simple workaround: load the site in an iframe of your desired width.
Oh, and as for why, the behavior you observe is due to the Firefox user interface not shrinking down below a certain width for some reason. Often due to extensions mucking with the UI.
Use the Web Developer toolbar extension and you can see a selection of common screen sizes by selecting Resize > View Responsive Layouts
Here is the simple solution
install chromEditPlus Plugin from here http://webdesigns.ms11.net/chromeditp.html
And then Goto Tool-> ChromEdit Plus-> ChromEdit
select userChrome.css pannel
copy and pate below code Save then restart
#namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */
#main-window:not([chromehidden~="toolbar"]) {
min-width: 200px !important;
}
Thus solved the Problem this made your windows minimun to 200px
Thanks
When creating a shortcut to a website on Windows Phone 7, the icon it creates is a snapshot of the website instead of any sort of icon that I want it to display. For example, with iOS I can sepcify
<link rel="apple-touch-icon" href="Logo.ico" />
and it uses that icon for the home screen image.
I've tried
<link rel="shortcut icon" href="Logo.ico" />
which seems to work in IE but not IE mobile.
Has anyone successfully created a home screen icon for windows phone 7 / IE7 mobile?
I assume you are referring to pinning a web page to the start screen.
This is by design. You cannot change it.
I think the intention is that you can see a better idea of where you will be taken to when tapping it. This is particularly true if you pins multiple pages from the same site (which would have the same icon otherwise).
If it was possible to set a custom icon, it would need to be 173x173 pixels which wouldn't be the same as any other platform. There would therefore be A LOT of sites/pages which didn't have this specified. If the fallback was to use the default favicon image this is typically only 16x16 (or 32x32) pixels and so would not look good on the 173x173 pixel tile.
All you need is a .css file, a 256x256 image.
.logo {
display:none;
}
#media screen and (max-width: 480px) {
.logo {
display:block;
text-align:center;
width:auto;
padding-top:32px !important;
padding-bottom:32px !important;
}
}
And right before the first html output make a div with logo class and your 256x256 image.
tested on Nokia Lumia 800
Even tough Matt Lacey is right, there is a way you can do this.
It is not a very good way, but Google and others are using it.
Create a HTML-Page that has nothing on it except your tile-icon. This page redirects to your actual website.
Now of course everyone has to pin the HTML-page to the start. You can tell your visitors to pin the HTML-page with a button or something similar.
OR
Create an overlay with JavaScript for your website for every windows phone user that wants to pin your website to the start (determined by a button "pin to start" on your website).
More information on that one:
http://www.russellbeattie.com/blog/creating-a-pinnable-windows-phone-7-tile-for-your-website-like-google
I'm also searching for a better way to create a tile for my blog in WP8 right now but apparently there is no straightfoward way.
I'm debugging a website for missing images. The website heavily uses GWT hence the source code is not so verbose. I started debugging it with firebug and found out that the tags are all greyed out in the firebug DOM source. If I edit the image tag in firebug console, say by adding just a space, then the image tag is not greyed anymore hence showing up on the page.
Can someone here please point out why the image tags are greyed out in firebug and how to resolve this issue.
Note: there are other images in the page which are working just fine, even they are generated using GWT in the same way.
Most likely - the image is hidden (via CSS probably). Click on the tag to see the styles applied to it - most likely you'll see display: none or something of similar effect.
As to why the image(s) are hidden - either the CSS rules got mixed up and resulted in such behaviour (Firebug should help with the investigation) or it's part of the application logic (hide the progress bar when not needed, etc).
In my case my image was grayed (greyed) out in firebug due to the image having its height and width to 0 px so effectively it was hidden on the screen. so i deduce that grayed out means its not visible on the screen.
I had the same issue with social networks icons, and it was also Ad-Blocker (under Firefox) causing it.
The alternative text of the icons had alt="Facebook" (Twitter, Instagram) in it. Changing that to alt="Facebook_xxx" was enough to solve the issue.
I was having the same problem. Firebug was showing my container element, which had an img, as grayed out. The element was displayed in Firefox (and other modern browsers), but not in IE8.
Knowing I was setting display:none; and later in the script making it block, wasn't my issue... adding a missing width and height in the style was the fix for me.
For me, it was a matter of explicitly setting the width and height on my div (that holds my img) inside the container div. I did not have width and height on my absolutely positioned div. As soon as I added that the grayed out was solid in Firebug. Also fixed my missing div problem in IE8! (Which was what set me on the debugging path in the first place)
IE8 likes width and height set, where all other modern browsers didn't care and still displayed the div. Firebug showed the element grayed out, but Firefox the browser displayed the div element just fine.
#slidesContainer {
position: relative;
width: 871px;
height: 275px;
padding: 8px 8px;
overflow: hidden;
}
#slidesContainer div {
position: absolute;
width: 871px;
height: 275px;
display: none;
}
As an FYI for other people, I was having this problem and couldn't figure it out - Firebug correctly greyed out the invisible images. I am running the AdBlock Plus add-on and it was hiding the images because they were in a folder called ads. The giveaway was that the images has classes added with random string e.g. class="auwhaezfynjjayjvlasn". I changed the name of the ads folder and voila, visible and not not greyed out in Firebug any more.
Another FYI - my FILE was named xxx-ads.swf and the file would NOT display in Firefox or Chrome but worked fine in Safari, IE and Opera.
I am running Adblock plus in Firefox and Chrome.
It seems to me that as a general software practice, Adblock is trying to be too smart in it's detection. Cost me about 2 days of debugging. Grrrr.
Thanks goodness i finally found this forum.