27 June, 2011

Extra padding on < button >

I just had a problem with firefox. When I tried to run have a code like this

<button><span>My Button</span></button>

Firefox added 3px of left margin to the buttons. after a little bit of a search found that this snippet of code can solve the issue

button::-moz-focus-inner {border: 0;padding: 1px 0px 0px 0px;}

Found this here, http://www.aheadcreative.com/removing-unwanted-button-padding-in-firefox/

23 June, 2011

It has been 5 months

Oh nooooo!
I missed my blog for the last 5 months. I havent posted anything after january, so anyway I am back following up some nice ideas to write up.

25 January, 2011

Enable @font-face on Google Chrome

Its just so easy to enable @font-face or remote font support in chrome. This is what I did one Mac.

open up a terminal and run this, and it enables the font-face support for chrome browser.

/Applications/Google Chrome.app/Contents/MacOS/Google\ Chrome --enable-remote-fonts

fonts wont be crappy after this ;)

18 January, 2011

if iPhone 4 doesnt switch on

I had this problem today, and was pissed off as my iPhone is so new to break. Anyway after going thru the net I found some solution and it worked for me.

What I did was to press the power / sleep button and the home button simultaneously for 10 seconds and the apple logo appeared which means the phon started.

thought to share this and it will be helpful for you.

17 January, 2011

Vertical text

I would keep this blog post short enough which explains a way to display text vertical on any browser.
So the problem which I tried to address is that I had to display some text vertically for some website project I did.
With HTML 5, CSS 3 this is no problem at all, but it has to look the same in IE as well.

Alright this is my HTML.

<span class="time"><span>January 17, 2011</span></span>

So for CSS3 supported browsers, (which are running on Gecko and Webkit) I used this.

-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);

For IE I had to use a separate CSS which is intentionally works to render text vertically, I could use the features
of filters. The BasicImage filter which is capable of rotating any DOM element which has a layout solved the issue.
This was my CSS for IE.

<!--[if IE ]>
<style type="text/css">
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

the rotation param works like 1,2,3 with respective to 90, 180, 270 degrees.

This solved my problem.