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.