My Monkey Do

A Log of Coding Solutions

IE crap

SVG height not scaling properly on IE 10

by

Problem

IE 10 shows a skewed svg image who’s width is set to a specific value and height is auto.

 

Solution

The problem is the width and height in the SVG file is set and IE is following those specs if you don’t set it.  So if you’re image is 100×100 and you set only the width to 50px, the height will remain at 100px.  The solution is to remove the width and height attributes in the <svg> tag.

Caveats

A solution on a github gist suggests that removing the width and height attributes force the image to occupy the full width of its container in non-IE browers.  All my current images with SVG are supposed to fill the width so this isn’t a problem for me.
Link to the gist: https://gist.github.com/larrybotha/7881691

Careful with supporting all versions of IE 8

by

Problem

Internet Explorer 8 is still mildly popular and so probably needs to be accommodated for on websites.  However, like different versions of Chrome and Firefox, IE8 also has different versions.  There are about 6 different versions of IE8 in the wild.  2 of which I have run into personally.  1 version, on Windows 7 uses the IE8 standards document to show websites while another version runs on Windows XP to show IE7 standards document.  Until 2008, IE8 used to default to render using IE7!  What the hell?  Anyway, the real problem is IE7 does not support a lot of CSS that we use today since, you know, it’s over 10 years old.

Solutions

A good starting point is to use the IE-edge meta tag within the head:

<meta http-equiv="x-ua-compatible" content="IE=Edge"/>

Another good starting point is to use the modernizr.js script.

IE8 using IE7 does not support box-sizing.  Using modernizr and some handy dandy javascript, we can adjust the dimensions of elements.

Modernizr.addTest("boxsizing", function() {
return Modernizr.testAllProps("boxSizing") && (document.documentMode === undefined || document.documentMode > 7);
});
jQuery(document).ready(function($) {
if( $('html').hasClass('no-boxsizing') ) {
$('.no-boxsizing, .no-boxsizing *').each(function(){
var fullW = $(this).outerWidth(),
actualW = $(this).width(),
wDiff = fullW - actualW,
newW = actualW - wDiff;

$(this).css('width',newW);

var fullH = $(this).outerHeight(),
actualH = $(this).height(),
hDiff = fullH - actualH,
newH = actualH - hDiff;

$(this).css('height',newH);

});
}
});

IE8 using IE7 has no table-cell

One solution is to use

*float:left;

Or, as one stackoverflow person found, use !ie7.. sorry, forgot to save the link.  but anything with !ie7 will only apply to ie7 and below.  (the ie7 part can actually be any non-valid text like !ieisold)

float:left !ie7;

To vertically align images, try this:  http://stackoverflow.com/questions/10998614/ie7-vertically-align-middle-not-working

To test your work out on multiple versions of IE without you having to actually have Windows installed:

http://www.browserstack.com/

Font not showing properly in IE 8

by

Problem

I’m using a google font that works fine in the menus, but seems to have a shadow of some sort in the content.  I set the font color to white and i still see some sort of outline.  I have tried to set outline, text-shadow, font-variation, border, even ms-filter’s dropshadow to 0, none, not enabled.  And nothing works.

 

Solution

The problem was the ms filter DXImageTransform.Microsoft.Shadow.  This was set on the div container.  I didn’t know it would apply to the fonts within it!  I had to pretty much take it off for IE 8 using style sheet conditionals:

-ms-filter: “progid:DXImageTransform.Microsoft.Shadow(enabled=false)”;

Trying to add that to a container within the container with a shadow cause a black background or black line (which i’m assuming is the shadow).  So the only solution was to set it on the container that previously set it.

IE Doesn’t see padding on hover

by

Problem

Internet Explorer 8 (I no longer even look at IE 7) seems to not be able to see the padding on an anchor tag within a ul > li > a structure.   Using jQuery I have a hover event on the li, however it only works on the bottom 1px of the li.

 

Solution

I tried adding position:relative and zoom:1, as some have suggested but that doesn’t work.  I then just tried to put a background in the anchor tag to see if IE even recognizes that the anchor tag has padding.  It did recognize the padding and once the background was in the hover also worked.  Turns out IE needs a background set?  I found another person who had this problem and the solution was to set the background to a transparent image of 1×1 px.

 

http://stackoverflow.com/questions/12197999/ie-not-including-margin-and-padding-in-hover-without-background-set

Z-Index, iFrames, and IE

by

Problem

I’m using the Apprise jQuery plugin to show a fancy alert box on a webpage.  The problem is I also have the embedded iFrame code from YouTube on the page.  When the fancy alert box shows in Internet Explorer, it shows behind the video.  It works in all other browsers.

 

Solution

The solution is to add the wmode=transparent or wmode=opaque parameter to the youtube url.  Have the iframe point to something like the following:

https://youtube.com/watch?v=xyz%3Fwmode%3Dtransparent

 

Source: http://stackoverflow.com/questions/5281002/z-index-and-iframes

jPlayer doesn’t play in IE9

by

Problem

Using jPlayer to play video works fine in Chrome and Firefox and the iPhone, but does not play in Internet Explorer 9 (IE9).  In IE9 it just shows a black screen and goes back to the first frame.

 

Solution

What seemed to fix the problem was defining  the mime types.  Simply add the following lines to your htaccess if you are trying to play mp4 files:

AddType video/mp4 mp4
AddType video/mp4 m4v

source: http://stackoverflow.com/questions/6175417/jplayer-issue-in-ie9
other help: http://www.jplayer.org/latest/developer-guide/#jPlayer-server-response
keywords: jplayer ie9 doesn’t play