My Monkey Do

A Log of Coding Solutions

firefox

Relative positioning of table rows and row groups is now supported. This site may need to be updated because it may depend on this feature having no effect.

by

Firefox displayed this warning in the Firebug console.  This warning indicates an absolutely positioned does not consider a table element relatively positioned so it may not appear as expected.  A better explanation is here:

https://www.sencha.com/forum/showthread.php?289315-Relative-positioning-of-table-rows-and-row-groups-is-now-supported.-This-site-may-nee

and solution to fix is here:

http://stackoverflow.com/questions/5148041/does-firefox-support-position-relative-on-table-elements

HTML 5 Flash Fallback Video Player w/ RTMP

by

There are a ton of video player that use HTML5 with flash fallback.  A few years ago I found one named JW Player.  This was a great player that was fully featured.  Keyword being “was”.  I was developing a website that would be using this player, but for the time being I used the free version of the player because I was hoping for a promo code to show up.  As I was developing the site, the company that owns JW Player upped the price from a simple $79 fee to a yearly $99 fee.  This was a big jump in price and developers complained a whole lot, including myself.  (i got the CEO to respond! woohoo!)  but no changes came of it (as of now anyway).

 

When One Door Closes…

Onto a search for a new javascript player that could do HTML5, Flash fallback, and RTMP streaming when flash is used.  A few players I found were jPlayer, videoJS, MediaElement.js, Flowplayer.  Flowplayer costed about $99(to remove the watermark) plus I wasn’t sure if I needed to purchase the flash player for flash fallback.  Confusion is not good to a potential buyer.  jPlayer was the most popular of the free ones, but I couldn’t get the RTMP to work with my video for some reason.  I got the sample to work, but not mine, weird.  videoJs scared me because I saw a post were the flash fallback used Flowplayer which means I could not use it commercially without purchasing.  Would’ve been a legal disaster if I used it and didn’t pay for it.  MediaElementJs was the only one I had no opinion.  It was actually the least popular of all the open source players.  But then I saw that it would be in WordPress core 3.6!  Case closed.  MediaElement.js would be the replacement.

 

Another one Opens

As it turns out MediaElement does not get Firefox to fallback to flash if I use a mp4 video file.  It simply errors out.  It does however, support the webm format.  The WebM format is sponsored by Google and is supposedly the next industry standard for web videos so it would be a good thing if I converted to it.  I found a free converter called Miro Video Converter to convert my mp4 to webm format.  In the end I have a video player that will be integrated into WordPress, a more standard video format, smaller footprint for HTML5 users (mp4 size: 163mb webm:78mb), and no money spent… but a whole lot of time spent looking for this… oh well, the client wins at least.

 

The Old

JW Player, mp4 format

The New

MediaElementJS (WordPress 3.6), webm format, Miro Video Converter

Google font WOFF in Firefox

by

Problem

In a website that gets fonts from Google’s CDN, the browser window loading icon continuously runs.  In Firebug you can see that the WOFF file from google is the culprit.

 

Solution

Turn off Firebug.  Apparently it’s a problem with Firefox/firebug that causes this issue.  Once you turn off firebug the website loads and no loading icon is shown.  The issue may be related to this, but not sure:  http://code.google.com/p/fbug/issues/detail?id=4649

 

keywords: google woff firefox error

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 


Firefox Table Row Height


 by  
Problem


In Firefox and Chrome, having a table with an image of height 1 causes the row height to be 6px.   Code as shown below:


 


<table height=”1″>

<tr>

<td><img src=”images/spacer.gif” width=”170″ height=”1″ alt=””></td>

<td><img src=”images/spacer.gif” width=”163″ height=”1″ alt=””></td>

<td><img src=”images/spacer.gif” width=”334″ height=”1″ alt=””></td>

<td><img src=”images/spacer.gif” width=”153″ height=”1″ alt=””></td>

<td><img src=”images/spacer.gif” width=”180″ height=”1″ alt=””></td>

</tr>

</table>


 


Solution


After setting all styles that I could think of (padding, margin, height, vertical-alignment, line-height) and every element to have a height attribute of 1, nothing worked.  Turns out all that is needed is a “display:block” for the img element:


<table height=”1″>

<tr>

<td><img style=”display:block;” src=”images/spacer.gif” width=”170″ height=”1″ alt=””></td>

<td><img style=”display:block;” src=”images/spacer.gif” width=”163″ height=”1″ alt=””></td>

<td><img style=”display:block;” src=”images/spacer.gif” width=”334″ height=”1″ alt=””></td>

<td><img style=”display:block;” src=”images/spacer.gif” width=”153″ height=”1″ alt=””></td>

<td><img style=”display:block;” src=”images/spacer.gif” width=”180″ height=”1″ alt=””></td>

</tr>

</table>


keywords: firefox table height 6

source:  http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/Q_24084464.html