A website compatible with all IE versions - X-UA-Compatibility

Before HTML5 Boilerplate (H5BP), we created separate CSS files for IE7, IE8, IE9, IE10, IE11, IE12,.............. IE1000. This was the only way to develop websites compatible with all IE versions. With the help of H5BP we saved some numbers of CSS files and server requests. As we defined CSS classes -

.ie7 .classname{....}
.ie8 .classname{....}

H5BP has made our life way better with normlizing CSS and helper classes.

Now, for the sake of endless IE versions and its compatibilities, we can use <meta http-equiv="X-UA-Compatible" content="IE=7"> or content="IE=8". This line of code tells every new version of IE to render our website using defined rendering content e.g. IE7 or IE8 or IE9.

The website will render all pages without any issues in newer versions of IE. And we don't have to make extra efforts for fixing UI in all IE versions. Because, it is fixed in one version of IE, and the X-UA-Compatibility is telling all new versions of IE to render pages using the defined rendering content.

Ah! What a relief!

Hang on! Some expert may comment about latest features included in newer versions of IE. My website won’t support those features because I am rendering it using the older browser rendering engine. What about that? The answer to this question would be - we use jQuery, JavaScript, tricks, and fixes for the features that are not supported in IE7/IE8/IE9. This will continue until the death of IE9, because IE9 doesn't have much support to CSS3 and HTML5.

Considering the death of IE6, I am very sure that it will take more than a decade for the death of IE9. Till then we can surely use fixed compatibility mode. No client is gonna spare us from ignoring his website compatible with at least IE9.

At the end, if we check IE9, it is not a very great version of IE. It's very close to IE7.

Background Image Resize, Text Shadow & Opacity in IE7 & 8

These are very useful properties that everyone wants to have them working in IE7 and 8. CSS filter property does all the magic.

Download source file here

Additionally here is one perfect solution for many CSS3 properties for IE browsers. This is also nominated in .net magazine awards 2011 as 'Innovation of the year' - CSS3 PIE
 

HTML Blinking Text in IE

The html <BLINK> tag does not work in IE browsers. In case if it's a requirement that we need to make it work in IE browsers then jquery would be the best solution for it.

Download source file here

jquery Rounded corners in IE7 and IE8; no images

It's been a very long time since I was looking for foolproof rounded corner solution for IE7 and IE8. curvycorners.src.js comes to rescue. What is does is pretty simple. It checks for '-moz-border-radius: 10px;' in the given CSS class and applies the same rounded corners in IE browsers.

No images. No hacks. Only one compressed js file.

Download source file here

Here is all in one CSS3 rounded corners and many other properties solution for IE7 and IE8. This is also nominated for 'Innovation of the year' in .net magazine awards 2011.
CSS3 PIE (Progressive Internet Explorer): http://css3pie.com/documentation/getting-started/

CSS3 PIE - Supported CSS3 Features: http://css3pie.com/documentation/supported-css3-features/

Detecting browser versions and Operating Systems with jquery

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="jquery.client.js"></script>
Download clients.js here

<script type="text/javascript">
$(function() {

//Firefox 3.6
var version=jQuery.browser.version;
if (jQuery.browser.mozilla) {   
    var verarray=version.split('.');
    if(verarray[0]=='1' && verarray[1]=='9')
    {
        /*var head= document.getElementsByTagName('head')[0];
        var addCSS= document.createElement('link');
        addCSS.href = 'css/CSIdentity.ff3.5.css';
        addCSS.rel = 'stylesheet';
        addCSS.type = 'text/css';
        head.appendChild(addCSS);*/
        $(".nav li:first-child").css({"padding":"10px"})
    }   
}   
//Mac Safari 5
var dos = $.client.os;
var dbv = $.client.browser=="Safari";
if(dos == "Mac" && dbv && (navigator.appVersion.indexOf('5.') != -1)){
    $(".nav li:first-child").css({"padding":"20px"})
}
//Mac Chrome
var dbvch = $.client.browser=="Chrome";
if(dos == "Mac" && dbvch){
    $(".nav li:first-child").css({"padding":"24px"})
}
//Mac Firefox 3.6
if(dos == "Mac" && jQuery.browser.mozilla){
    var verarray=version.split('.');
    if(verarray[0]=='1' && verarray[1]=='9')
    {       
        $(".nav li:first-child").css({"padding":"26px"});
    }   
}
//FF 4.0
if(dos == "Mac" && jQuery.browser.mozilla && version == "2.0"){
    $(".nav li:first-child").css({"padding":"28px"});       
}
//FF 5.0
if(dos == "Mac" && jQuery.browser.mozilla && version == "5.0.1"){
    $(".nav li:first-child").css({"padding":"30px"});
}

//Windows Vista FF
if(navigator.oscpu == "Windows NT 6.0" && jQuery.browser.mozilla && version == "2.0"){ 
    $(".nav li:first-child").css({"padding":"32px"});
}
if(navigator.oscpu == "Windows NT 6.0" && jQuery.browser.mozilla && version == "5.0.1"){ 
    $(".nav li:first-child").css({"padding":"8px"});   
}
if(navigator.oscpu == "Windows NT 6.0" && jQuery.browser.mozilla && version == "6.0.2"){ 
    $(".nav li:first-child").css({"padding":"6px"});   
}

Awesome Set of Call to Action Web Buttons - Free PSDs

Click on the image to find out more

jquery rounded corners in IE 7-8

Please, use this plugin only if you REALLY want to have rounded corners in IE 7 and 8, because using jquery plugins to display CSS3 effects in old IE browsers wont be a wise choice.

We always try to keep our website light-weight possible and we don't want to make our website heavier only for the sake of IE.

Download source file here

How to remove button's/link's dotted line on focus in firefox?

Links
a:focus{
    outline: none;
    -moz-outline-style: none;
}

/*for firefox:
    vendor specific selectors don't work with comma(,) separated class names
    we can not keep all three selectors in one line -
    .button::-moz-focus-inner, a:focus, input[type="submit"]:focus, input[type="button"]:focus
*/
.button::-moz-focus-inner{
  border: 0;
}

/*for IE8 */
input[type="submit"]:focus, input[type="button"]:focus
{    
  outline : none;
}

Input type file width problem in IE and Firefox

<input type="file" size="46" style="width: 300px;" />

Note : Width works for Internet Explorer and size works for Firefox.

CSS, jquery alternate row color compatible with IE7 and IE8

CSS
.tableClass{
}
.odd { background-color: blue; }
.even { background-color: white; }

jQuery
$(function() {   
    //
    $('.tableClass tr:even').addClass('even');
    $('.tableClass tr:odd').addClass('odd');
});

jquery to find out max height of <li> (column)

var max = -1;
$(".ulClassName li").each(function() {
var h = $(this).height();
max = h > max ? h : max;
       
$(this).css({'min-height': max});
});
alert(max);

Seperate CSS files for Firefox versions

Have you come across UI issues in different versions of Firefox? This was the very first time for me to have version issues with Firefox. However, we can call different CSS files for different versions of firefox using jquery/javascript -

var version=jQuery.browser.version;
     if (jQuery.browser.mozilla) {  
           var verarray=version.split('.');
           if(verarray[0]=='1' && verarray[1]=='9' && verarray[2]=='2')
           {
                var head= document.getElementsByTagName('head')[0];
                var addCSS= document.createElement('link');
                addCSS.href = 'css/CSIdentity.ff3.6.css';
                addCSS.rel = 'stylesheet';
                addCSS.type = 'text/css';
                head.appendChild(addCSS);
           }   
     }

HTML5 and ASP.net

Instead of developing websites using HTML4/XHTML why not opt HTML5? Afterall we must follow the current trends or else we will stand far behind in this overnight changing world. Steve Jobs from Apple Inc. says- “The world is moving to HTML5”.

Many devs just throw comments saying 'HTML5 tags' are not compatible with ASP.net framework. Because in Visual Studio Microsoft has given thousands of ready components/properties that the devs don't have to remember. Speaking as a dev when it comes to 0 and 1, nothing is impossible. Here comes ASP.NET MVC 3 applications to rescue -

http://rachelappel.com/html5ify-your-asp.net-mvc-3-applications

http://mvchtml5.codeplex.com/

http://visualstudiogallery.msdn.microsoft.com/d771cbc8-d60a-40b0-a1d8-f19fc393127d/

http://kazimanzurrashid.com/posts/the-missing-html5-template-of-asp-dot-net-mvc3

Death of IE7

After burying IE6 successfully now it’s an awful turn of IE7. The worthless efforts I do to make my websites work properly in IE7 is coming to an end. Only 5% users are using IE7, which means soon enough Microsoft will send out funeral invitations, but this time for IE7 - http://www.w3schools.com/browsers/browsers_explorer.asp.

IE7 makes us give up many easy and tempting practices. We find something new every day and try to implement in our project. It works well in other all browsers but not in IE7, then what – client needs this to work in IE7 as well so? OK, let it be, find something that is compatible with IE7 too (IE7 please, stop doing this – your time is coming to an end, so at least be good).

We know we have several hacks for IE7. But hacks are not appropriate solutions for these issues. W3C will not validate our page/CSS if we use hacks for IE7.

I expressed my feeling here in brief because my latest project’s browser requirements are Internet Explorer8+. What a relief!

Superb admin panels for web applications

Great time saver. Bookmark this page - http://www.ourtuts.com/34-outstanding-admin-panels-for-your-web-applications/

How to make CSS3 { transition } to fade out?

Download source file
More info on: http://css3.bradshawenterprises.com/


<style type="text/css">
h1{
color:#7F0000;
-moz-transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
cursor: pointer;
}
h1:hover {
color:#666;
-webkit-transition: all 500ms;
-moz-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}
</style>


<h1>It works!</h1>

Slides from jQuery Mobile: Building Tools for a Changing Web - Mobilism

An easy explanation of jquery mobile utilization, below are those slides. Watch and implement.

CSS, jquery dropdown nav bar

Download source file

Details later ;)

The world is going through the deepest change in history

This 2 minute video will inspire+uplift you right now: Robin Sharma

CSS float: Vs display: inline-block; no whitesapce

Most of us have banged our heads against monitors when there was an issue with the CSS 'float'property. It’s become obvious these days to see most query hits on CSS float property. Since we want columned structure in UI, we have to use 'float' property unless we choose to use tables.

Recently I faced the same issue, but this time the issue was with the mobile website. To fix the issue I used 'display: inline-block;' property and it worked just the way I exppected, except........ IE7(wicked). As usual IE7 prefers eating stuff differently (rather in weird/uncommon way). To educate IE7 about 'inline-block' property I had to add these two properties -

'*display: inline;'
'zoom:1;'

Then I validated this page with W3C validation service and the result was Green! One more advantage of using inline-block is that you don't have to use unnecessary 'clear: both' DIV in your markup, whereas it's must with float property.

A fact to keep in mind: Every time you use ‘display: inline-block;’ property for columned structure, never forget to include ‘vertical-align:top;’ in your CSS, because browsers tend to position the LIs/DIVs/SPANs at the bottom. Also, browsers add some white space after every inline-block element (LI). To fix this issue we need give 'letter-spacing:-4px;' to the UL (parent element), and to LI we need to add 'letter-spacing:0px;'.

Browsers are kind of rivals of CSS float property. To avoid these unexpected issues let's not use ‘float’ property and start using 'display: inline-block'.

Demo: http://jsfiddle.net/3SHc8/

body, div height 100%

body, div height 100%?

This question has a very simple answer, here goes the code –

<style type="text/css">

html, body {
height: 100%;
}

</style>

You must define ‘html’ element along with body and write ‘height: 100%’ property in it. Once you have this, “doctype version” doesn’t matter, it works just fine.

Bonus - A complete & descriptive list of HTML5 elements

Enjoy!!

How great leaders inspire action

Why Apple is very innovative?

Say hello to Blackbird and goodbye to alert()

A hassle-free way to display messages on webpages. This can be a great help if you want to tell the user about how he/she can use your application, or if they want to fill up forms you can display some prior information such as: 'all fields are mendatory' without disturbing UI and using the actual page space.

 Demo & Download

jquery iPhone style checkbox

It’s been more than a decade we are using Windows XP and its appearance style as it is. Since we are living in the iPhone era and most of us are very attracted to the flashy UI of it. In efforts to deliver the best to our clients, we always tend to implement new things. We are using jQuery from last four years; jquery is helping us create websites livelier with animations.

We have given our users the same XP looking form elements, but with the help of jquery we can surely make form elements much fancier. For instance the checkbox element –

Demo & Download

Amazing graphics... great reference for any designer.

You wont stop bookmarking this page if you are a designer.
Go check it.

jquery hotkeys / easing keyboard usability

jQuery Hotkeys is a plug-in that allows you easily add and remove keyboard handlers/events anywhere in your code supporting almost any key combination.

 Demo & Download

Build winning teams by Robin Sharma

A few testimonials about this program:

“There have been so many learnings in the last 2.5 days that even if I am able to implement a fraction, it will take my company to a completely new level.”
Vishal Jain, CEO, GLOBAL HEALTHCARE RESOURCES

“I’m blown away by the value I have received from this program.”
Bodhi Kenyon

“An excellent program for anybody looking to grow leaders in an organization.”
Manoj Chugani, POINT BREAK

“A life changing experience.”
Cedric Komar, MERCK

Cool jQuery tooltip

A flexible and easy jquery tooltip that allows you to change its appearance and position.

Demonstration 
Download 

Equal width to select input and text input

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Equal width to select input and text input</title>

<style type="text/css">
.page{
margin: 0 auto;
width: 400px;
padding: 20px;
border: 2px solid #abc;
}

input, select{
width: 200px;
margin: 0 0 10px 0;

box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;

}

</style>

</head>

<body>

<div class="page">

<input type="text" value="textbox" />

<select>
<option>Please choose</option>
<option>Please choose Me</option>
</select>

</div>

</body>

</html>

Document/DIV height in percent (%)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!--<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">-->
<!--<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">-->
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style type="text/css">
.myDiv{
    border: 2px solid #abc;
    height: 100%;
    width:100%;
}
</style>

</head>

<body>

<div class="myDiv">Some text</div>

</body>
</html>

Using image name as its title value

Adding title and alt values to every single image on website is not a easy job to anyone. We UI developers add title values to images that carry some meaning along, for the sake of SEO and better usability. However we leave the title and alt attributes empty for the images that are only used for makeup purpose ;).

How about adding these makeup images its name as title value? Instead of leaving them without any value(content). I would say it would be better for the same purpose of SEO and usability. jQuery is making UI development world pretty easy these days. Here goes the code -

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Setting image names as its title values</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">

$(function(){

$('img').load(function(){
if($(this).attr('title') == ''){
$(this).attr("title", function() {
var takeSRCName = $(this).attr('src').split('/').pop();
return takeSRCName;
});
}
})
//
})

</script>

</head>

<body>

<h1>Adding images its name as title values - Only to those who don't have title values defined to it.</h1>

<p><img src="images/jeneliaD'souza1.jpg" width="181" height="279" alt="" title="defined title - jenelia1" /></p>

<p><img src="images/jeneliaD'souza2.jpg" width="188" height="267" alt="" title="" /></p>

<p><img src="images/jeneliaD'souza3.jpg" width="192" height="262" alt="" title="defined title - jenelia3" /></p>

<p><img src="images/jeneliaD'souza4.jpg" width="183" height="276" alt="" title="" /></p>

</body>
</html>

DIV vertically center align content in IE7 and IE8

Before jquery we struggled a lot to get div content vertically center in all browsers. But the wait is over; now we can have div content vertically centered with the help of a small jquery function.

Here is the Demo –

HTML-izing UI for Dot Net environment

A couple of days back I had a long argument with my .net expert friend at work. She is very talented girl indeed. I call her J. :) After working on so many PHP projects and reading about usability, accessibility, web standards etc. When it was to a time to develop HTML markup for .net project, I developed my best markup ever. I used UI LIs, Divs & played with only paddings and margins in CSS. I thought that was a superb markup.

When I delivered my code to developers the No. 1 thing they stuck on was – The repeating UI. For repeating UI I had used UI LI elements because it works perfectly and is the best way of HTML-izing. In .net developers cannot use UL LI for repeater, but they can easily repeat stuff with TABLEs (evil). The reason behind it is MICROSOFT (a headache). In visual studio 2008 or maybe in 2010 they have not given any better way of repeat UI with UL LI elements.

Since developers already don’t want any trouble and obviously they don’t care about final markup. Whether it is tables or divs, doesn’t matter to them. In visual studio of .net environment Microsoft does a lot of spoon-feeding. All the developers need to do is drag the readymade component, change/add some attributes, probably use some development logic and their work is done (In short Microsoft is making .net developers lazy and careless). When you I ask developers – why can’t they use some better HTML markup? They say – visual studio doesn’t support it, sorry! Don’t bother us.

Alright! Let’s start with the solutions to these issues –

1. If it is repeating UI. Create table based html because at the end developers are gonna make you do that.

2. Whenever there is any button which is intended to submit/post some info – use input type button or submit. Never go for a href.

3. They use <a href=””></a> only when they want to use any URL links like – http://www.abc.com/ etc.

4. Never argue with .net developers, because they are not doing anything wrong it’s the Microsoft’s technology that is making them do wrong stuff. :)

I love working in PHP environment. The reason is they don’t change any HTML; they use whatever I give them. Cool! Isn’t it?

IE 7/8 stretching background image to 100% width and height

CSS3 does present a superb & hassle-free way of developing web pages, but Microsoft’s IE 7 and 8 browsers don’t support CSS3 properties. It’s a big headache – ain’t it? Microsoft engineers have done a great job with IE8 at least 8 doesn’t act very weird as compared to 7. IE7 has tons of limitations when it comes to CSS based layouts, one of them is stretching background image to 100% width and height regardless of screen resolution.

Instead of calling it limitations I would say IE 7 prefers eating stuff little differently. So we need to go beyond enemy lines here :)

Stretching background image to 100% width and height is possible in IE 7/8 with CSS2 (CSS3 is way better than this. We only need to use ‘cover’ or ‘size’ property of it).

Here is the CSS: 



Use this conditional CSS for IE6: 



The HTML code: 

What is CSS !important?

 CSS styles always work in order they are read by the browsers. For example if I write –
span{
    color: #f00; (red)
}
span{
    color: #0f0; (green)
}

With the example we all know the green color will be applied to all span elements in our document. But what if I want apply the red color to all span elements in my document without changing the order? I will do this –

span{
    color: #f00 !important; (red)
}
span{
    color: #0f0; (green)
}

Now I will have my all span elements in red color. The !important rule takes precedence over later rule.

Okay fine! In what scenario do I need to use this precedence rule? There are many more places where this !important rule can be used. Such as – .net controls. Some dot net controls create their own CSS at run time with some class names. Since the css file is not available to edit because the classes are being generated at run time. In this case we can take the class name, place it into our CSS file and change the properties we want to change with !important. Then the browsers dare not ignore our change because we have set it on priority.

UL – count li elements & display in a horizontal row

How about creating something like the image above with CSS and jQuery without using more ULs/divs than one? Isn’t it interesting? Yes it is. 

Demo 

Tips to write better CSS

Robin Sharma said it very well, he said ”Giving starts the receiving process.” On that note, I’ve decided to share absolute ways of writing CSS for websites.

2011 has already begun and we are very close to hear about W3C’s official approval for HTML5 & CSS3. All major browsers do support all new tags introduced in HTML5 except IE 7/8. IE 7/ 8 don’t recognize unknown tags (tags introduced in HTML5). To help IE 7/8 understand the new tags we need to attach a small javascript file in our pages. You can grab this javascript file here - http://html5shim.googlecode.com/svn/trunk/html5.js

When you have this JS file don’t forget to attach it in a conditional code. The conditional code tells the browsers to load this JS only if the browser is lower version of IE than 9 (which means IE 6/7/8), or else don’t load this file. This conditional code will help us save one server request. If users are viewing your website using firefox, chrome, safari, IE9 etc., these browsers won’t load this file.

<--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

This is enough about HTML5, let’s move on CSS -

The main CSS file of your webpage need to have the reset CSS code at the very beginning. The reset css snippet removes the default styling of browsers so that you will get the full control on all browsers. Here goes reset css –

/* reset CSS */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dd, dl, dt, li, ol, ul, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; font-size: 100%; /*text-align: left;*/}
a img, :link img, :visited img { border: 0; }
table { border-collapse: collapse; border-spacing: 0;}
ol, ul { list-style: none; }
q:before, q:after, blockquote:before, blockquote:after { content: ""; }
textarea { padding: 0; margin: 0; }
a{ outline: none; }
input{ margin: 0; padding: 0; }
html[xmlns] .clearfix { display: block; }

/*Your Website CSS*/

body{
    font-family: Arial, "Lucida Sans", "Lucida Sans Unicode", Helvetica, sans-serif;
    font-size: 72%;
    background: #f7f7f2;
    color: #333;
}
a{
    text-decoration: none;
    cursor: pointer;
    color: #f00;
}
a:hover{
    text-decoration: underline;
}
h1, h2, h3, h4, h5, h6{
    font-weight: normal;
}
h1{
    font-size: 3em;
}
And so on …………..

Another important thing to remember while writing CSS is to combine classes in one line, the classes that are sharing same css attributes. For example the overflow:hidden; attribute –

header, section, .container, .mainPage, aside{
    overflow: hidden;
}
.container{
    margin: 0 auto;
width: 980px;
}

When you write css in this format you save a lot of file size. In the example above 5 different CSS classes are being combined in one line because they all need same css attribute. So instead of copy/pasting same code snippet 5 times you can combine it in one.

Hope this will help you write better CSS.