Expressing IT

At several occasions, while doing  page layouts with popup divisions/ lightboxes/ Tips etc  we come across situations where  some Form SELECT  objects happens to be under these POPUP Divisions , by design and it shows through…. YUK!!!

Well! you could easily FIX this by adjusting your Z-INDEX values appropriately for FF and IE7 . But Good Old ( pun intended) IE6  doesn’t  behave as intended…. The SELECT BOX show through , even after you apply some drastically high  Z-INDEX values to your PopUp Division… Bummer!!!!

There are NO FIXES for this problem , but there are , I believe,  more than a few way to work-around this problem , But Im here to tell you the simplest solution that I use, which works fine for me, in most of the cases ….

“HIDE THE ROUGE SELECT BOX WHEN YOU SHOW THE POPUP”

Simply in your script snippet where you show your popup, add a piece of script to set the visibility of the SELECT Box to “Hidden”

document.getElementById(‘my_select’).style.visibilty = “hidden”;

And remember to set it back on CLOSE of your PopUp Division

document.getElementById(‘my_select’).style.visibilty = “visible”;

where “my_select” is the ID of the irritation SELECT Box

Hope this helps…

PS. There are ofcourse other options like dynamically positionining an IFRAME ( same size as you PopUp) under the Popup DIV … This works well too , but with an addition of loads of DOM Elements, SCRIPTS and Headache . I have used this solution too, and  If you do need any help with this option, do let me know. Will be glad to help!

For ages, I have thinking to consolidate all the BEST Practices , I have been reading every now and then. Finally! I did get down to put it to pen. I realized that It is going to be mammoth task creating this mammoth document , so I decided to dedicate an entire category to it, so I could keep adding stuff about best practices as and when i encounter them…

Well! the content here will be a amalgamation of my personal UI development Best Practices with those written by the standard developers like Yahoo , Google etc.

Watch this space and keep browing the Best Practices Category

A CSS Reset is/are CSS to set a number of element styles to a specific baseline that creates consistency across various browsers.

We all  have been the through the nightmares of writing cross-browser CSS’s.  So when we start writing our CSS , It is a practice to reset it first to remove/reset any cross browser inconsistencies.  CSS Resets , are simple few lines of CSS that you begin your CSS with , giving you a clean base  to start building your  upon.

The CSS resets that I normally tend to use looks like this

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
margin:0;
padding:0;
}
html {font-size: 76%;}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset, img {
border:0;
}

ol, ul {
list-style:none;
}

h1, h2, h3, h4, h5, h6 {
font-size:100%;
font-weight:normal;
}

Reset the browser font size
Also note the reset that has been applied to browser font size in the following line …

html {font-size: 76%;}

The above CSS resets the browser font size to 10 pixels, and this makes it possible to work with relative font sizes (which is every important from a WAI compliance prespective)
For e.g., in the following definition, font-size in a span is set to 10 pixels and that in the paragarph is set to 14 pixels…

span {font-size: 1em;}
p {font-size: 1.4em;}