• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

My Monkey Do

A Log of Coding Solutions

  • Home
  • Web Hosts
  • Tools
  • About

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.

May 19, 2016 by Webhead

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

Filed Under: Coding Tagged With: css, firebug, firefox

Line in Firefox background

October 23, 2014 by Webhead

Problem

When scaling the FireFox and having a background image size set to 100%, the bottom of the image sometimes shows a line on the bottom showing the background behind it.

Solution

Firefox seems to have a problem with background-size: 100%.  instead use background-size: 99.99%;

 

http://stackoverflow.com/questions/18423884/flickering-line-under-background-image-in-firefox-on-resize

Filed Under: Coding Tagged With: css, firefox

HTML 5 Flash Fallback Video Player w/ RTMP

April 24, 2013 by Webhead

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

Filed Under: Off the Shelf Tagged With: firefox, google, html 5, open source, wordpress

Google font WOFF in Firefox

February 8, 2013 by Webhead

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

Filed Under: Coding Tagged With: debug, firebug, firefox, google

Opacity in multiple browsers

July 11, 2012 by Webhead

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 

Filed Under: Coding Tagged With: css, firefox, IE crap

Firefox Table Row Height

April 30, 2012 by Webhead

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

Filed Under: Coding Tagged With: css, firefox, html

Primary Sidebar

Topics

apache apple block editor chrome cms css debug eCommerce embed firebug firefox git gmail goDaddy google hosting htaccess html html 5 IE crap image iPad iPhone javascript jquery linux localization macOS mac os x ms sql mysql open source optimize php php 7.2 rest api seo svg tinymce woocommerce wordpress wpengine xss yii youtube




Categories

  • Coding
  • Off the Shelf
  • Plugins
  • Random Thoughts
  • Server Stuff
  • Tools
  • Uncategorized