Bootstrap 3 Destroys Default Andorid Browser Video Controls

Well despite every single link I could find on Google saying this is now fixed in Bootstrap 3 it really isn’t!

So here is the offending code on line 1669 of bootstrap.css v3.1.1!

[css]
input[type="range"] {
display: block;
width: 100%;
}
[/css]

Basically the video position scrubber bar was just 0px in width causing all buttons to be bunched together and a new volume slider to appear…. pretty damn random!! I hate Android and video by the way, thought I would just get that out there.

Now no matter what combination of display I tried I could not override this setting. The only way to fix this was by editing the core css file and removing display: block; completely.

Am I the only one who tested video in the default Android browser when using Bootstrap 3? Evidently so according to Google… Man what a waste of 3 hours of trial and error!

Fixing Blank HTML Emails in Random Clients (Hotmail)

Well this is an odd error that I better remember. It seems even from using the standard http://htmlemailboilerplate.com/ there is some offending code that causes random email clients to fail to render your HTML email at all, tested in Hotmail especially. I only found this out as we started getting complaints from users that our emails were blank… great!

Anyway I finally managed to track down that removing the following code fixed the issue.

[code]
<!– Targeting Windows Mobile –>
<!–[if IEMobile 7]>
<style type="text/css">

</style>
<![endif]–>

<!– ***********************************************
****************************************************
END MOBILE TARGETING
****************************************************
************************************************ –>

<!–[if gte mso 9]>
<style>
/* Target Outlook 2007 and 2010 */
</style>
<![endif]–>
[/code]

To be honest I wasn’t even using any of that code but just left it in for simplicity sake. It seems perhaps any HTML conditional statements causes some email clients to ‘freak’ out and render the email blank…. Remove them and all seemed to be good after.

How to remove those dotted lines that appear when clicking links in Firefox

I don’t know why I didn’t twig that this could probably be fixed with CSS, I always thought it was just the pains of different browsers and you couldn’t do anything.

Well I was wrong this little bit of CSS will get rid of the dotted line border that appears when clicking any links in Firefox. This is especially useful as I regularly use ‘oveflow: auto’ on a containing div. The dotted line problem can cause a horizontal scroll to appear when clicking links as the extra border that is added increases the width by 2px which causes nested elements to over hang, and result in the horizontal scroll bar appearing.

[sourcecode language=”css”]
a:active, a:focus, a:visited{
outline: none;
-moz-outline-style: none;
}
[/sourcecode]