Wednesday, November 2, 2011

How do I make a favicon appear for my site in IE7?

There are two ways. The first is to put a file in the root of your domain called favicon.ico. The second is to use a tag with the rel="shortcut icon" value and the href value set to the URL for the Icon you wish to display.

Browser Compatibility Information on the Internet

It is the prime source for browser compatibility information on the Internet


http://quirksmode.org

Tuesday, November 1, 2011

Animated Sliding Menu With Pseudo Selectors and CSS3

HTML


<div id="menu">
<ul>
<li><a href="#" class=Home</a><a href="#">See Us</a></li>
<li><a href="#" class=About</a><a href="#">Meet Us</a></li>
<li><a href="#" class=Contact</a><a href="#">Email Us</a></li>
</ul>
</div>


CSS


*{ margin:0px; padding:0px;}
#menu {
height: 100px; width: 670px;
overflow: hidden;
margin: 50px auto;
text-align: center;
}

#menu ul li {
float: left;
margin: 0 5px;
list-style-type: none;
}

#menu ul a:nth-of-type(even) {
background: #000;
color: white;
}

#menu ul li:hover :first-child {
margin-top: -100px;
}

#menu ul a {
display: block;
background: #e70f23; color: #fff;
height: 100px; width: 200px;
font: lighter 2em/100px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
text-decoration: none;
-webkit-transition: margin .4s ease-in-out;
-moz-transition: margin .4s ease-in-out;
-o-transition: margin .4s ease-in-out;
-ms-transition: margin .4s ease-in-out;
transition: margin .4s ease-in-out;
}

The Subtleties of CSS3 Transitions

It’s very simple. You hover over the link, and the font-size animates (or transitions) from 40px to 100px. You hover off the link, and it transitions from 100px down to 40px.

Now let’s try it like this:

a:link, a:visited {
font-size: 40px;
}

a:hover {
font-size: 100px;
-webkit-transition: font-size 1s ease;
-moz-transition: font-size 1s ease;
-ms-transition: font-size 1s ease;
o-transition: font-size 1s ease;
transition: font-size 1s ease;
}

Tuesday, September 6, 2011

10+ useful code snippets to develop iPhone friendly websites

When developing websites, you have to care about different browsers, as well as mobile devices such as iPhones or iPods. In this article, let’s have a look at the 10+ most useful code snippets (Javascript, PHP, CSS, etc) for developing iPhone friendly websites, quickly and efficiently.

http://www.catswhocode.com/blog/10-useful-code-snippets-to-develop-iphone-friendly-websites

Test your site in iphone

http://iphonetester.com/

Test our Apps in Apple iPad !!

Now we can test our applications in Apple iPad !! But make sure that we have to change HTTP_USER_AGENT for browser

http://ipadpeek.com/

Reliable Cross-Browser Testing, Part 1: Internet Explorer

http://coding.smashingmagazine.com/2011/09/02/reliable-cross-browser-testing-part-1-internet-explorer/