CSS - Indenting Second Line of LI (List Items)

It drives me crazy when I see that next line coming under the Bullet point. Here, margins and paddings are not very helpful.  The text-indent property with minus value helps us to get the next lines properly indented -

ul li{
    list-style-type: disc;
    list-style-position: inside;
    padding: 10px 0 10px 20px;
    text-indent: -1em;
}

Perfect Normalize CSS

Using HTML5 Boilerplate to start your project would be the best choice because it sets the perfect default HTML page for your PC/Mobile project. The H5BP (HTML5 Boilerplate) makes sure that your page is working fine on all devices/browsers.  

The default CSS that comes with H5BP has some issues with browser compatibilities. Don’t worry about that, I have fixed all browser compatibility issues in the CSS and it is attached here. Download and replace it with the default CSS file that comes with H5BP (style.css).

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"});   
}