Had read this in some blog … thought it was nice to catalog this for future ref …. also could be an important interview question that you would asked some day ….

Write a snippet of CSS that will display a paragraph in blue in older browsers, red in newer browsers, green in IE6 and black in IE7

#content p{color:blue}
html>body #content p {color:red}
* html #content p{color:green}
html>body #content p {*color:black;}

Had this strange issue , where a piece of Javascript worked fine in all the browser  ans as usual bar IE …  Simple it was, but since the script was not written by me, It took a while to debug this “Object doesn’t support this property or method” error that only IE was throwing up. Probably! If  I were to write the script, I wouldn’t have got this error at all , as do not mix my variable names with field Ids:).

Problem: Object doesn’t support this property or method (on line 3)

function funzoneSP(){
    document.getElementById('video_id').style.visibility="hidden";
    shortdesc = document.getElementById('shortdesc').value;
    ....
}

Solution:
The error is generated on the thirdrow in the example above(Line 3… “shortdesc = document.getE….”). I tried all sort of stupid things , that I dont is even worth the mention here and finally guess what!  just changing the shortdesc var to something else got rid of the error. Basically! The variable name had to different from the fieldID

For a few hours now I have been looking at solutions to run/test my static HTMLs in the Eclipse/Android emulator.  Have not been totally successful yet…. what I mean by “Totally” is the HTML gets loaded OK but all the CSS and JS, i.e. the visual expression is  not seen. In developer words, the CSS is not applied to the page…

Thought it would a few   fellow newbie Android  UI developers , If  I noted the snippet down that I used to  display the  HTML .

AND Android gurus, PLEASE add your comments to help us novices in mobile application UI developers further!

Sorry! but Im assuming that you  know how to create a  Android Mobile Application in Eclipse.

Create this as your activity; This will read the file ‘index.html’ from your project assets/ folder.

public class Test extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        WebView webview = new WebView(this);
        setContentView(webview);
        try {
            InputStream fin = getAssets().open("index.html");
                byte[] buffer = new byte[fin.available()];
                fin.read(buffer);
                fin.close();
                webview.loadData(new String(buffer), "text/html", "UTF-8");
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
}

Re-Cycling is Buzzword and In Web Development it means no different.  It conserves energy, in terms of effort!

Over years of writing CSS and creating HTML from designs,  I have followed a few best practices, in pursuit of saving time and energy in what we commonly term as “Re-Inventing the Wheel”.  Time and time again, I have told myself, that I must create a few templates , some standard re-usable CSS  that I would use  OUT OF THE BOX in my future work. Though not completely but  I did manage to achieve some of goals.

In furthering, Re-Use of CSS , I had a  look at the few CSS frameworks that are commonly available to us and  decided to put them to use,  as these are tried and tested  and created by much experienced developers , than myself . More importantly “AVOID RE-INVENTING”.

Though common knowledge  to veterans,  I have tried to pen some key concepts/best-practices/thoughts that has gone into creating these frameworks, to make RE-CYCLING of CSS possible. Hope this will help some CSS developers who are just about to and recently boarded the CSS bandwagon!

Keys Re-cycling of CSS :

Use Naming  Conventions

This has to be the most important factor in making the CSS/HTML re-usable. Giving consistent names to page elements enables re-use of page components and their styles with little or modifications. In line with this argument,  Even HTML5 , in a major change change over its predecessors ,  is to introduce some structural tags  viz.  <article>, <section>, <header>, <aside>, and <nav> [What will HTML5 bring?].  Even with HTML 4(or lower),  it is best to name standard sections of your page consistanly like in the simple example below…

Remember,  Most pages on your project , end up having the same core structural elements. Identify these common core page elements ….

<div id="container">
   <div id="header">...</div>
   <div id="nav">...</div>
   <div id="sidebar">...</div>
   <div id="footer">...</div>
  </div>

Reset Default Styles ( CSS Resets) : Whether you use a framework or write your own , you must provide CSS Resets  [What are CSS Resets?], as they reduce or sometimes  eliminate  visual inconsistencies that  occur between various browsers.  In simple words the CSS Reset Mechanism  sets the styles of HTML Element  to  zero or null values, thus overriding any  browser default values they may poses.  This provides a clean slate to set the   properties of  these elements void of any User-Agent Defaults [CSS2.1 User Agent Style Sheet Defaults]. All the CSS  frameworks do have of reset mechanism. If you are writing you own CSS Resets, a word of caution is that if you happen to forget to reset a key property,  It could lead to cross-browser issues, that are very difficult to debug. Remember,  Keep a copy of the reset styles and drop them into each new project you create.

 body, div, dl, dt, dd, ul, ol, li,
 h1, h2, h3, h4, h5, h6,
 pre, form, fieldset, input, select, textarea,
 p,blockquote, table, th, td
 {
   border:0px;
   margin:0;
   padding:0;
 }

Set Defaults (Baseline Styles) to Elements :

After you have set ( to zero or null)  the default Values of certain attributes  of certain HTML Elements, It is necessary to apply some styles across every instance of these elements. These default setting could vary as per the design or according the best practices you follow.

Most CSS frameworks, always introduces some new defaults,  in addition to resetting default browser styles.
These defaults being void of the User-Agent Defaults(  stripped away by the CSS Reset), these will be consistent across browsers .

Remember, Baseline styles are used to  set  styles that are going be used design-wide. eg .

html { font-size: 77%; font-family: Arial, sans-serif; }
strong, h1, h2, h3, h4, h5, h6 { font-weight: bold; }

Abstract Styles for Common HTML Components and Common Classes :

Most project consisting of several pages will have common HTML elements used across the site, for e.g.  Some sort of forms, alerts and errors ,  Custom Popups, LightBoxes etc.  Since such components are used over again across projects, It will be useful  to  provide a set of classes associated with predefined styles for these components  and  you can save yourself a lot of time.

Apart from defining reusable styles definitions for the common HTML Components , we could abstract styles classes  pertaining to typography, color or even  layout.  I myself tend you use … common classes like Clearfix, Font08, FontGrey, AlignL, DisplayB etc.

form input{ border:0px;   background:#ffffff; padding:0px 10px; _padding:0px 0px; height:26px; color:#000000; line-height:30px;  font-size:1.1em; }
form textarea{  border:0px;   background:#ffffff; color:#000000; font-size: .9em; line-height:1.5em; overflow:visible; }

.fbold{font-weight:bold; color:#cccccc;}
.fgrey{ color:#666666;}
.flightgrey{ color:#bbbbbb;}
.clearfix {clear:both;}
.divider{border-top:1px solid #647B06; border-bottom:1px solid #9CC00A; height:0px; }
.displayb{display:block;} .displayn{display:none;}
.alignr{text-align:right} .alignc{text-align:center}
.floatr{float:right; } .floatl{float:left;}

Fixes to common browser quirks

Various browsers implement CSS code and provide varying level of  support for the CSS specifications.  The result of this  …. “Browser Quirks”, that we developers are left to tackle.    Especially, IE6  haunts most CSS coders with a deadline to meet. The good news is experience has  brought  together  possible REUSABLE fixes to these issues  ( Often termed as CSS Hacks) .

Remember ,  Keep these hacks/fixes handy

  /* The following zoom:1 rule is specifically for IE6 + IE7.  */
   * html .clearfix,
   *:first-child+html .clearfix {
          zoom: 1;
     }

Keep Refining Your  CSS

• The habit of re-cycling will not come to you in day. It has to developed. So plan your Re-Cycling . Bear this in mind that you could abstract defaults styles,  typography definitions, Layouts , HTML Element Styles etc.  Try to think ahead.
• Also look back at your past projects, it will help identify styles that you tend  to use often across porjects. Abstract it.
• Remove any unused styles.  This practice will keep your CSS framework from a common symptom called “Bloating” -
• Remove repetitive styles .
• Build a set of styles that are flexible enough to port it across projects.

A Look At CSS Frameworks

Finally.  If you are inspired and intend to use one or more of the CSS frameworks, Heres is quick list of a few popular ones ….

• 960 Grid System : The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are three variants: 12, 16 and 24  columns, which can be used separately or in tandem.  Thought nothing that you cannot create one for your own easily enough,  The framework provides grid templates for print in PDF format, that one can use to sketch your page designs.Bet ,  It would make a professional impression , if you carry a few sheets  when you go to a client for UI requirements gathering. It also provides basic grid templates for popular design software like Fireworks, Flash, InDesign, Illustrator, Photoshop, Visio,  etc. providing a “starter for ten”  to begin your design work.
• Blueprint :  Blueprint provides distinctly classified CSS files for Resets, Grids, Forms, Print, Typography , Plugins for buttons, tabs and sprites etc. It also provides support for IE as a separate include.
• SenCSs : Unlike  the above two, SenCSs ( pronounced Sense) , doesnt have CSS definitions for Layout. It does include  fonts, paddings, margins, tables, lists, headers, blockquotes, forms and more.
• BlueTrip : Its original claim to fame was that , it was  a combination of the best features provided by other others frameworks like Blueprint, Tripoli … from where it gets its name.  Its feature set includes 24-column grid, typography styles , orm styles, print, buttons etc.
• YUI Grids : Brought to you by the Yahooo Developer Network ,  supports fluid-width (100%) layouts as well as preset fixed-width layouts at 750px, 950px, and 974px, and the ability to easily customize to any number. As you can see , Its technically just the layout Components. YUI also provided  HTML/CSS  sets for other page elements
• YAML (Yet Another Multicolumn Layout)
• Emastic

Remember , using CSS frameworks  doesn’t imply that you are  lazy  to create one of your own … It implies that you are smart to learn from others experience & mistakes , SAVE TIME and INCREASE PRODUCTIVITY!!!!

CSS completed 10 years existence this year! Those who have been around for a while , earning their bread (or not) using CSS, then you might aware how we have been starving for  a good selection of fonts.  Even with the lack of fonts designers like those at  CSS Zen Garden have made use of CSS background images to replace fonts  in the pursuit of doing some justice to their designs .  We have also tried Flash/JavaScript® hacks to achieve our design goals.  By no means this is  a wrong way to get the fonts we desire into our web designs, but definitely, it is not the most desirable way.  and over years web designer, like me ,  have fully relied  on ten or so  fonts for their designs.

Recent developments in web standards and font formats make it possible to render HTML text in typefaces other than the same old default fonts.   Comes in  the “@fontface” CSS decleration.

@fontface provids a solution to link  to the actual font file and retrieve it from the web.  Using @fontface , designers can use  fonts without having to freeze the text as background images.  The implementation is very straight forward, as shown below but  as all good things have a CON part to it , NOT ALL browsers support a single “font type “.  If you are planning to use @fontface in site with requiring cross browser support, then you will have to provide sources to various font-types of the same.

1. TrueType – A format designed to look good on-screen. Recommended particularly for Windows browsers (Chrome).
2. OpenType (CFF) – This format is better for print work and does not always look good on Windows.
3. EOT – You need this format if you want to target Internet Explorer. IE will not use any other format. Our EOT’s would be considered “Lite,” since they are neither compressed nor domain-restricted.
4. SVG – This is an XML format supported by some browsers including the iPhone.
5. WOFF – This cross-browser, web-only font format is lightweight (font data is zip compressed) and can be compiled with either TrueType or PostScript (CFF) outlines. It is currently supported by FireFox 3.6+.

Using @fontface

@font-face {
font-family: 'CalligraphyFLFRegular';
src: url('CalligraphyFLF.eot');
src: local('CalligraphyFLF'), local('CalligraphyFLF'), url('CalligraphyFLF.woff') format('woff'), url('CalligraphyFLF.ttf')        format('truetype'), url('CalligraphyFLF.svg#CalligraphyFLF') format('svg');
}

@font-face {
  font-family: "Your typeface";
  src: url("fonts/font_filename.eot");
  src: local("Alternate name"), local("Alternatename"),
    url("fonts/font_filename.woff") format("woff"),
    url("fonts/font_filename.otf") format("opentype"),
    url("fonts/font_filename.svg#font_filename") format("svg");
  }
h2 { font-family: "Your typeface", Georgia, serif; }

As you can see from the above example, to include the chosen font typeface, one has to link to a set of fonttypes for the same typeface. Hence people refer to it as “Font Kit”.
There are Font Kits available that explicitly allows linking with the CSS @font-face property to it under End User License Agreement (EULA).

Useful WebFont Resources :

• Fonts available for @font-face embedding wiki page at http://webfonts.info/wiki/index.php?title=Main_Page
  
• Ray Larabie .  He is a renowned font designer who has made hundreds of interesting TrueType fonts freely available for use on the web. His fonts are elegant, decorative, and playful.
• Dieter Steffmann is another great font designer. He, too, has made many beautiful fonts available for anyone to use.
• Font shop : offers fonts designed specifically for web use.  More than 30 of the most successful FontFont families are now available as Web FontFonts.   FontShop  also has  a detailed WebFont user guide  http://www.fontshop.com/blog/newsletters/pdf/webfontfontuserguide.pdf
  
• Font Squirrel :  Showcases all the fonts that Font Squirrel offers for use with @font-face CSS embedding. Font Squirrel offers an impressive quantity of type, makes it dead simple to pick one out, and handily offers “kits” – the typeface of your choice, in several formats, packaged with demo HTML & CSS that uses very current @font-face syntax. They also offer a way to make your own @font-face kits.  If the typeface you want to use has been licensed appropriately (the ones that come with your computer are not necessarily okay), the generator produces EOT, SVG, and hey! WOFF files.

With my limited skill-set with tools like Photoshop and Illustrator, I can honestly confess that I’m a better developer than I am a designer. But my background with core (server side) development with Java/PHP/COBOL , has been a very positive influence on my UI development skills. What I mean is, while creating my designs,i.e. whenever I do design, I think about how the design can be best converted into HTML-CSS and while doing the HTML-CSS, I give a thought about the backend technology and make reasonably sure that the HTML can be easily implemented into XSL loops or PHP snippets etc.

Over years, I have been thrown head on to designs by UI designers who probably donot have a clue what HTML or CSS is. All these years I have been thinking that I would asking for too much, If I just expect the designer, who is trying to shov his “impossible to code” design down my throat, to understand just a little bit what his design would be converted into. THAT would help right?

Then, I came across this post today … Web designers who can’t code …Thanks Lord! I’m just one of many who feel the same … The above artitle is a bit a long winded .. but worth the read, every word of it.

Thanks Elliot Jay Stocks … I feel relieved!

Here is some excerpts from Elliots article.

Wow, what a day! It started with one little tweet and ended with a discussion that seemed to sweep across the whole web design community. It appears there are some very strong opinions held on the subject of whether web designers should be able to code.
…
So, before we get into this, allow me to quickly recap what I said on this morning on Twitter:

Honestly, I’m shocked that in 2010 I’m still coming across ‘web designers’ who can’t code their own designs. No excuse.

… I should’ve been a little more specific in my tweet. I was talking about designers who don’t have even the most basic HTML and CSS skills to turn a flat design into an actual site. Not people who intentionally choose not to code; those who can’t. And I’m also referring only to front-end code here; of course it’s ridiculous to think that designers should also be amazing back-end programmers …

We get ‘web’ designs sent in Illustrator, 300dpi, impossible to code, no consistency / usability.
~ Amy Mahon

It’s getting late, and I’ve got to wrap this up somehow. I know there will be many who disagree with me, and my intention is not to offend or upset anyone who can’t code, but I hope that some of what I’ve said reflects some of the points that always come up when delving into this debate.

At the end of the day, I don’t lose any sleep over who can code and who can’t. I’m just genuinely surprised to find so many designers that lack front-end skills, as I thought this was a thing of the past.

Also read the comments , there were around 320 comments, as i write … they are worth a read.
Please read Elliots full post here .. Web designers who can’t code

Since the radio button and the text are inline, so the text will align itself to the bottom of the radio button, The the text will appear to be slightly under the radio button.
If you want these to align to the top, you’ll have to place the radio and the text into separate containers like divs or spans ( as appropriate) and they will take care of the alignment. It would be easier to use table cells too, of your design brief permits it.

This won’t look the same in every browser, as every browser displays radios slightly differently, so there’s always going to be size issues no matter what you do.

HTML5 is still a draft. As I write, Work on HTML 5, which commenced in 2004, is still being given shape by a joint effort between the W3C HTML WG and the WHATWG.   The word is that the next gen HTML will have  enhancements and  features, which would new structure and semantics , form controls, APIs, multimedia tags etc..

In simple English … what would it mean to  us UI developers …

• There will addition of some structural tags  viz.  <article>, <section>, <header>, <aside>, and <nav>, which would replace the majority of <div>s used on a web page, making your pages a bit more semantic, but more importantly, easier to read.
  Hey! Just imagine the effort saved in finding that one missing close DIV tag.
  e.g.

<body>
  <header>...</header>
  <nav>...</nav>
  <article>
    <section>
      ...
    </section>
  </article>
  <aside>...</aside>
  <footer>...</footer>
</body>

Instead of

<body>
  <div id="header">...</div>
  <div id="nav">...</div>
  <div class="article">
    <div class="section">
      ...
    </div>
  </div>
  <div id="aside">...</div>
  <div id="footer">...</div>
</body>

• With the advent of  audio and video content like YouTube, the use of embedded multimedia on the webpage has increaded by fold. Taking this into account , Now the plan is to add native support for embedding video and audio into the browser itself,  hence allow users to play, pause, stop, seek, and adjust volume using the builtin DOM APIs for scripts to control the playback.

e.g.

<video poster="poster.jpg">
    <source src="video.3gp" type="video/3gpp"
    media="handheld">
        <source src="video.mp4" type="video/mp4">
</video>
<audio>
  <source src="music.oga" type="audio/ogg">
  <source src="music.mp3" type="audio/mpeg">
</audio>

• Better-defined semantic roles for existing elements  for eg. <strong> and <em> might now actually have different  meanings i.e.  they will behave differently.

There are many more changes/upgrades to the newer version … Will keep updating this post as I come accross any interesting useful ones …. Watch this space

This document may not provide accurate information as the HTML 5 specification is still actively in development. When in doubt, always check the HTML 5 specification here.

Time and over again, When all the other browsers seen to behave as told by the w3c rules , IE spirals you out of the development spirit by throwing a tantrum,  that doesn’t seem to have a fix . Just such a one is this issue in IE7.

Problem Statement:
I  and  so might many of the other  serious web developers have  noticed more than many a times , that when there nested floats in the layout, on hover over some links ( anchor tags) , the containing container seems to shift a few pixels to the right.   I have tried to google solutions for this issue , but have  hardly found any reasonable answer to why and when it occurs ( that might help to prevent this issue from happening)  , hence  I  have never found a clear solution to the problem either…

Possible Solution :
Out of experience , I have notice 90% percent of the times  i.e. ,  that this issue is fixed by adding a zoom property in the CSS definition of the mis-behaving container …

#somediv {
      zoom: 1 ;
}

again the reasons are ambiguous … try this …
Some elements in IE have a “hasLayout” property , which is “true” by default. Many visual CSS behaviors ; for example, an alpha filter only works on an element that hasLayout. and the {Zoom:1} seems to give the target elements the hasLayout property…. USeful? I dont think so…

The zoom property is also seems to supported by Chrome , but  its use  dint seem to make much adverse effect on my layout… try it, If it works for you … if it doesn’t,  bookmark this page under “CSS craps”

• The Document Type Declaration needs to be present at the beginning of a document that uses the HTML syntax. It may optionally be used within the XHTML syntax, but it is not required. The XHTML document does not need to include the DOCTYPE because XHTML documents that are delivered correctly using an XML MIME type and are processed as XML by browsers, are always rendered in no quirks mode.

• In XHTML, tag names are case sensitive and are usually defined to be written in lowercase. In HTML, however, tag names are case insensitive and may be written in all uppercase or mixed case, although the most common convention is to stick with lowercase. The case of the start and end tags do not have to be the same, but being consistent does make the code look cleaner.

BENEFITS OF USING HTML

• Backwards compatible with existing browsers
• Authors are already familiar with the syntax
• The lenient and forgiving syntax means there will be no user-hostile “Yellow Screen of Death” if a mistake accidentally slips through
• Convenient shorthand syntax, e.g. authors can omit some tags and attribute values

BENEFITS OF USING XHTML

• Strict XML syntax encourages authors to write well-formed markup, which some authors may find easier to maintain
• Integrates directly with other XML vocabularies, such as SVG and MathML
• Allows the use of XML Processing, which some authors use as part of their editing and/or publishing processes