My Monkey Do

A Log of Coding Solutions

IE crap

IE and inline-block

by

Apparently IE 8 cannot change the display of a element to inline-block unless it natively is inline.  The fix is to trigger hasLayout on the element before trying to change it.  Below is a code snippet to get elements to behave properly in the annoying world of Internet Explorer.

display:inline-block;
zoom:1;
*display:inline;

source: http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/
keyword: ie 8 inline-block

CSS IE Printing A Lot of Blank Pages

by

Problem

One of the smaller pages on a wordpress site I was working on printed about 75 pages in Interent Explorer (73 of which were blank).  Both Firefox and Chrome printed the normal 1-2 pages.  Only the contact us page had this problem.

 

Solution

Luckily only the contact us page had this problem.  It uniquely had a google maps plugin (the Comprehensive Google Map Plugin).  This google map plugin is very useful and handy, but for printing it was causing the problem in IE.  The global-data-placeholder object that this plugin inserted had the top and left css style as “100000px !important”.  It had a height and width of 0 so it normally does not show.  I kind of remember IE having problems with 0 height and 0 width objects though.  Anyway, I simply made a print_styles.css and set that to not display.

#global-data-placeholder { display:none;}

 

source: http://blogs.unbolt.net/index.php/brinley/2011/07/23/ie-8-prints-page-with
keywords: css ie web page print lots of pages

Opacity in multiple browsers

by 

A collection of opacity syntax for multiple browsers.
.img_transparent_class {
  /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

  /* IE 5-7 */
  filter: alpha(opacity=50);

  /* Netscape */
  -moz-opacity: 0.5;

  /* Safari 1.x */
  -khtml-opacity: 0.5;

  /* Good browsers */
  opacity: 0.5;
}


keywords: css opacity all browsers
source: http://www.naveenos.com/2011/07/css-opacity-in-all-browsers.html 


Vertically Centering Multi-line Text


 by  
Found a great article that demonstrates vertically centering multiline text.  It uses display:table and display:table-cell among some IE hacks.


Found a better post on stack overflow that does this.  The idea is to have an outer div with a specific height and the same line height.  Then a span inside to define your true line height.


keywords: css vertical center text

source: http://css-tricks.com/vertically-center-multi-lined-text/

source: http://stackoverflow.com/a/14850381


WordPress Next Gen Gallery Skinny Thumbnails in IE8


 by  
Problem


The thumbnails for the next-gen gallery wordpress plugin show up very skinny.  However using the nggallery widget with IE8 Webslices seems to work fine.  I tried adding “webslice=1” or some variation of it to include this webslice option for IE8, however, I don’t think it was implemented.



Solution


A great solution that solved my problem was found on the link below.  You just need to add the following to your style.css:


.ngg-gallery-thumbnail {width:160px;padding-right:10px;}


source: http://nuuvidea.com/fix-for-nextgen-gallery-internet-explorer/


keywords: nextgen gallery ie8