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!

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

A few months earlier we saw , how we could include a piece of CSS that would be visible to IE6 only(For your IEs Only ). There are other ways to achieve this as well. Simply include a separate CSS, specific to your target IE. this could be achieved with what is called as Conditional Comments.

Conditional Comments is a way to detect the browser type and version. Browser detection is performed to ensure that the content presented to the browser specific. Browser detection can be done using many different techniques. This method has several advantages over earlier methods, that included style switching using javascript. To list important few, would be;

• Scripting is not required
• Cross-browser

How do we do this?

Do something in IE 5 only
<!--[if IE 5]> Welcome to Internet Explorer 5. <![endif]-->

Do something in All IE versions
<!--[if IE]>
<link href="css/ie.css" rel="Stylesheet" type="text/css" />
<![endif]-->

Do something in All IE versions newer that IE 5
<!--[if gte IE 5]>
<script type="text/javascript"><!--
alert("Congratulations! You are running Internet Explorer 5 or greater.");<br />
// --></script>
<![endif]-->

For more conditional vartiations , read this info on MSDN :
About Conditional Comment

If you have been writing CSS for  while, you would have experience those times when you literally pull your hair  when your CSS layouts looked fine in all the new browsers ( I mean browsers later than IE6) , but IE 6 throws a  tantrum. You struggle hard to adjust your CSS but it doesn’t work … Well! Try These  HACKs…

1. Underscore Hack :-
By definition, CSS 2.1 specification allows underscore (“_”) in CSS identifiers. But many browsers still seem to ignore any identifies proceeded with an underscore but IE. This IE’s bug/feature thus becomes a very clear way to set CSS properties for IEs only. so remember, A CSS property written with the underscore on the start is visible for Internet Explorer (all versions but IE 7)

#box {
min-height: 300px;
height: auto;
_height: 300px; /* all IE versions less than version 7 */
...
}

View demonstration of this underscore hack

Also, The min-height hack for IE6 uses the underscore hack, check out

2. Hash(#) Hack :-
Like the underscore hack, this one is too is for IEs oly, with a good difference, property identifiers preceded with # on the start is visible for All IE versions , IE7 included and is invisible for any other standard browser.

.obj_container {
display: table-cell;
vertical-align: middle;
#position: absolute; /* For IE only */
#top: 50%; /* For IE only */
#left:50%; /* For IE only */
}

This hack has been used nicely to demonstrate a cross browser vertical align solution, have a look at this article to find our more

3. CSS for IE6 only:-
#my_bad_behaving_div {
/*something for all browsers*/
}
/* Lets use the * html hack so only IE6 reads the rule */
* html #my_bad_behaving_div{
/*something for IE6 only*/
}

These hacks seems heaven sent, when  nothing else works… If any of these hacks saves your life  someday,  dont forget to treat me to a coffee:)

Eg.
Specifying a CSS property like this,

margin:5px 0;

actually means,

margin:5px 0px 5px 0px;

That first margin property means:

top and bottom margin = 5px ¦¦ left and right margin = 0px

so the ‘longer shorthand’ would be

margin:5px 0px 5px 0px; (T, R, B, L)

you could even use 3 values

margin: 5px 0 5px;

which means

top = 5px ¦¦ right and left = 0px ¦¦ bottom = 5px

Internet Explorer automatically adds padding to buttons in HTML forms.
This space stretches according to the length of the button’s text.

The solution is  add overflow to its style …. i.e.

.button {
overflow:visible;
padding-left:10px !important;
padding-right:10px !important;
… any other style for this button…
}

OR

< input type="submit" value="Internet explorer respects my padding" style="overflow:visible;  padding-left:10px !important; padding-right:10px !important;" >;

Simple … To correct this problem use display:inline.

div {float:left;margin:40px;display:inline;}

If you have a floated element such as a div and you place margin-right or margin-left on that element, Internet Explorer 6.0 will double that margin value, messing up the html/css layout. To fix this simply add display:inline; to your floating element.