Expressing IT

As usual, one of the many some strange problems with IE and this one must ranks in TOP 10 of IE Quirks.

PROBLEM STATEMENT (This was my problem, maybe you have similar misbehaviors):
I have many DIV’s in the page with class “sectionhead” , which is nothing but title of a section on the page. So I have some style looking like this

.sectionhead{font-size:18px; background:#cfcfcf; padding:5px;}

The div is a light grey bar with some black text. What happens in IE is some of these section headers are displayed ok, but some are invisible, UNTIL, you scroll the page or click something on the page etc. Sometime they tend to disappear when you click the ‘alt’ key when you page down or scroll with the scroll bar. They sometimes seem to reappear when you reload (f5) the page. I short a perfectly simple DIV with some simple style behaves BAD.
What could cause such an erratic behavior? Well! Frankly, NO IDEA!!!

POSSIBLE SOLUTION:
Again don’t ask me why, but in many instances this problem tends to vanish when you add position:relative to the mis behaving elements style, like this

.sectionhead{font-size:18px; background:#cfcfcf; padding:5px; position:relative }

Weird but what to say? God Bless me from IE!

AND DO SHARE WITH US, IF YOU HAD SIMILAR PROBLEMS.

Not that there are only a few LIGHTBOX’s that you can find when you google. The issue with most of the lightboxes that I found was that they all seemed to use one or the other heavy weight JAVASCRIPT frameworks like JQUERY, PROTOTYPE, MOOTOOLS and the likes. They are all cool and swanky looking. But If your requirement is “BUT I WANT A SIMPLE AND LIGHTWEIGHT LIGHTBOX SCRIPT FOR MY SITE”, then here it is;

Some nice features of this lightbox

1. Very light
   a. 4kb of Scripts when packed (8 kb unpacked)
   b. 2 kb of CSS
   c. Few lines of HTML for the lightbox container
2. Simple to understand and implement
3. Can have multiple Lightboxes on the same page.
4. The same lightbox container is used to show, different content (which is separately included as hidden divisions in the page), depending on the link/option that is clicked.
5. Automatically centers itself, taking into consideration all factors such as, Window height and width (screen resolution), page scroll amount and the height of the contents of the lightbox
6. Tested in IE 7 & FF

View Demo |
Download Lightbox Source Zip (Downloaded 1687 times)

jo.js , jo_pack.js[packed version] :- a simple set of JAVASCRIPT OBJECTS [JO], which contains element, window and document positioning scripts. You can open JO.JS if you wish to get your hands dirty with some Advanced Javascripting, creating abstract functions, extending element properties and such. If you not too much in Javascripting , Leave it alone.

lightbox.js, lightbox_pack.js[packed version]:- Contain light box manager scripts. If you are page designer , also responsible with implementing the lightbox on the page, you need to understand the LightBoxManager . LightBoxManager basically contains just two functions showLightBox and closeLightBox.

lightbox.css :- If you know CSS , you can play around with lightbox.css to customize the look-n-feel lightbox.css

index.html: Sample implementation of the lightbox with two different content

lb_underlay_bkg.png :- This is light/simi transparent image that is used the background for the lightbox underlay [Underlay is the layer below the lighbox, which prevents the user from clicking any other entity on the page, while the lightbox is open]. You can use any image or even a solid color for this purpose, depending upon the page design and the requirement.

icon_lb_close.gif : – The image for close lightbox handle on the top right of the light box. Can use any image as per design

View Demo |
Download Lightbox Source Zip (Downloaded 1687 times)

Please let us have your comments and feedback …

This post might be a good example for the phrase “Teaching grandma to suck eggs” … Cause this is just BASIC CSS Stuff. But for those , like the oblivious me, this might be a blessing in disguise. I always thought (I could loose my job for saying this), it was ONLY possible to keep some part of the HTML page content STATIC (meaning, its position remains AS IS on Window Scroll), using some smart scripts, Doing all those scientific calculations to find dynamic position, trapping Window.scroll events and setting timeouts etc.

Never thought it could as simple as this …. Here in the CSS/HTML below , I have four static blocks, one fixed to each extrimities of the page, TOP, RIGHT, BOTTOM and LEFT … needless to say … you can choose any one or more if need be …

CSS
.static{display: block; z-index: 10; color: #ffffff; overflow-x: hidden; overflow-y: hidden; position: ixed;
}
#contents{ margin: 100px 150px 0px 160px; border:1px solid #e6e6e6 }

#wrap-t { top: 0px; background:#33CC66;  width: 100%; height: 55px;}

#wrap-l { top: 80px; background:#FF9966; height:300px; width:150px; border:2px solid #e6e6e6;}

#wrap-b { bottom: 0px; background:#3333CC;  width: 100%; height: 55px;}

#wrap-r { top: 80px; background:#6666FF; height:300px; width:140px; border:2px solid #e6e6e6; right:0; }

HTML
<div id=”contents”> You main page contents </div>
<div id=”wrap-b” class=”static”>
  Static Content on Page  bottom
</div>
<div id=”wrap-t” class=”static”>
  Static Content on Page  Top
</div>

<div id=”wrap-l” class=”static”>
  Static Content on Page  left
</div>
<div id=”wrap-r” class=”static”>
  Static Content on Page  right
</div>

View a wroking sample here

Many a times we feel the need to write browser specfic hacks (though it is not a good practice, we UI developers have to resort to such evils until the great Browsers Wars comes to a truce). Earlier , I had mentioned in this article For your IEs Only, how to write a CSS snippet that would be visible to IE browsers < IE7 only.

Yesterday, I had a case, where I wanted to write some FireFox specific CSS snippets. Well! I am not sure if there is a CSS code for this but there is a HTML. THERE IS A CATCH THOUGH, this piece of HTML doesnot pass HTML validation. But , anywaz! If you are stuck badly or as such, have no-regards for validation (sometime we have to be cruel), you could use the following to declare a link to a FF only stylesheet or even just code the CSS within this block. The code is

<comment> Put your FireFox only HTML/CSS/Scripts here </comment>

e.g.
    <comment>
         <style>
             /* Styles for FF only  */
             fieldset{border:1px solid #dddddd;}
          </style>
     </comment>

I”m happy for the moment …

Oh Well! In the earlier post a few days back regarding Opacity in IE8 ,I forgot to mention an important point that “IE 8 strict mode doesn’t allow for CSS opacity“.
For those who donot understand what I mean by strict mode , here is quick tutorial.

A work around to this (Before IE dev team realise that they have paved way for re-work routines all over the world, for web-sites using Pop-up lightboxes with some opacity, and put back support for OPACITY) is to use a semi transparent image …preferably in PNG format (I have had bad experience getting transparent GIF images to work as they were supposed to). Create a PNG image of the color and percentage of transparency you like , in you favourite image editor and use it as a background image for your lightbox overlay.

i.e.
Instead of something like this

.lighbox_overlay{
background-color: #ffffff;
z-index:1001;
-moz-opacity: 0.6;
opacity:.60;
filter: alpha(opacity=60);
}

Do this….

.lighbox_overlay{
background:url(bkg.png) repeat;
}

TO TRY IT, CLICK HERE! | TO DOWNLOAD, CLICK HERE!

If you are viewing this page in IE8 , then  you must be seeing a full opaque white background behind this post. Yesterday , my collegue pointed this out to me (As I am one of those people  who adapt to changes slowly and steadily… especially browsers. Might say, Im a coward, but so be it …. Being a UI developer, I’m always shit scared of new browser versions … you know what Im tlaking about, right?)

Digged around for while, trying to find a solution to fix it and then what …
This time our ALL TIME FAVOURITE browser  has done it all over again by dropping all support for CSS opacity. The non-standard `filter: alpha(opacity=##)` CSS attribute has been removed , Nice ,  but they also totally forgot to add CSS3 opacity support (like how all the other browser’s nicely have kept it in).  So, for the first time since GOD told us about CSS opacity ( since IE 5.0 , I guess)   , a web browser won’t support CSS opacity.
And now for the cream on top: Official word from IE 8 team? It’s “by design” and “we will consider this in a future version of IE”.

PS: Try this page in FF, swear it looks neat!

When I read  this article on A List Apart “ Faux Absolute Positioning
by Eric Sol “, I was nothing less than IMPRESSED.  I was also depressed majorly , cause,  honestly I was wondering , why cant I come up with something fabulous as this.

Usually, when we create CSS layouts, we use “POSITION” or “FLOATS”  , or a very bad combination of both. Eric Sol and his team define a next to perfect technique of a new type of CSS layout technique , which they have christened as  “Faux Absolute Positioning” after the faux columns technique that simulates the presence of a column. 

You know that problem all of us CSS developers have with disintegrating layouts (The unexpected content changes that cause entire columns to wrap ,  when we use floated layouts ) … Well! Seems History!!!!
This layout technique  is still very young, and has to trashed out by all those CSS gurus out there, before it becomes an un written standard.   I’m happy to use it NOW! … and am already into  middle of converting my earlier problematic/floating un-necessarily layouts  into FAP layout already… and am glad to say the “we are already using Faux Absolute Positioning for this blog site as well ” … GO try it , NOW!

Kudos Eric!!

If you  have ever made ( or making one) a Vertical Menu using list items( li) tags and CSS, you  might encounter, this yet another bug in Internet Explorer, where IE 6 inserts these gaps between list items that contain block level elements, i.e. if there is any whitespace between the list items in the markup.  Thanks, but no thanks , the IE version 7  seems free from this bug.
If like me , and many more, you  belong to this  band of frustrated developers , who still have to get their new layouts , working in IE6 too, then this might prove useful . Have a look…

Sample markup:

<ul id=”menu”>
<li ><a href=”#”>Home</a></li>
<li ><a href=”#”>About</a></li>
<li ><a href=”#”>Services</a></li>
<li ><a href=”#”>Portfolio</a></li>
<li ><a href=”#”>FAQ</a></li>
<li ><a href=”#”>Contact Us</a></li>
</ul>

You might create some CSS , similar to one below, to transfrom the above  markup into a vertical menu ….

Sample CSS…
#menu {
margin: 0;padding: 0;background: #FF9900;
list-style-type: none;width: 150px;
}
#menu li {margin: 0;padding: 0;}
#menu  a {display: block;
color: #555555;
text-decoration: none;
padding: 0 15px;
line-height: 2.5; border-bottom:1px solid #FFF;
}

The results you will see…

Solution for this bug…(modified/added CSS in bold italics)

#menu {
   margin: 0;padding: 0;background: #FF9900;list-style-type: none;width: 150px;
  float: left; /* this contains floated list items */
}
#menu li {
    margin: 0;padding: 0;
   float: left;      /* This fixes the */
   width: 100%;  /*  whitespace bug in IE6 */
}
#menu a {
   display: block; color: #555555;
   text-decoration: none;
   padding: 0 15px;
   line-height: 2.5; border-bottom:1px solid #FFF;
}

If the above solution doesnot seem to work (for reasons known to IE6 only)… try this method instead

Just add this additional IE6 only styles to your markup …

<!–[if lt IE 7>
<style type="text/css">
#menu li a {display:inline-block;}
#menu li a {display:block;}
</style>
<![endif]–>

Put Stylesheets at the Top

If you want a page to load progressively; that is, we want the browser to display whatever content it has as soon as possible, put the CSS at the top of the page inside the document HEAD. This makes pages appear to be loading faster, as this facilitates progressive rendering of the page. This is especially important for pages with a lot of content and for users on slower Internet connections.

It is a documented fact that to enhance overall user experience, it is important to provide progress indicators and visual feedbacks. To avoid having to redraw elements of the page, in case if their styles change, some browsers, including IE, blocks rendering of the page until the CSS is fully loaded. Because of this, the user is gets to see a blank white page.

The W3 HTML Specifications’ also states that the CSS must me include in the HEAD section of the HTML page. Also note that, In IE @import behaves the same as using <link> at the bottom of the page, so it’s best not to use it.

Avoid Using Browser Specific features

Filters : Use of filter increases memory consumption and is applied per element, not per image, so the problem is multiplied. Also, Filters are IE Proprietary, hence will not work as intended in other browsers. If you want transparent or gradient backgrounds, use 1Pixel with images.
Expressions : CSS expressions are a nice feature to have in CSS, but still is IE specific feature. Also, it is important to note that, these expressions are evaluated when the page is rendered and resized, scrolled and even when the user moves the mouse over the page. Needless to say this could affect the performance of your page. Hence in simple words ,Avoid using CSS expressions, unless you feel its pros’ weighs more than its cons’

Externalise you CSS

Using external CSS will result in faster loading of pages because the JavaScript and CSS files are cached by the browser. Inline CSS in HTML documents get downloaded every time the HTML document is requested. This might actually reduce the number of HTTP requests made but it subsequently increases the size of the HTML document. External CSS are cached by the browser; the size of the HTML document is reduced without increasing the number of HTTP requests.

Please note that, if users on your site have multiple page views per session and many of your pages re-use the same scripts and stylesheets, there is a greater potential benefit from cached external files.

Pack Your CSS File

Packing or crunching your CSS is the practice of removing unnecessary characters from code to reduce its size thereby improving load times.

The CSS can me crunched by removing all the comments and any unwanted characters like white spaces, newlines etc.

Post IE 6 , MSIE has been kind enough to us UI developers by adding a few more CSS properties standard to most other standard browsers. One such usefull property in “min-height”.  Pretty straight forward property that needs no long winded explanation. When a min-height for a division is set, it always retains that set height when the content it houses occupies less than it can hold and importantly ( unlike the plain vanilla “height” property ) scales or in CSS words, it behaves like a division whose “height” is set to “auto”…

For some of us poor developers, who still are required to code CSS that must also work in IE6, un-availability of the “min-height” , could prove a show stopper sometime… Donot despair.  

Fortunately, we have enough quirks in IE , that we would use to out advantage and hack our way through to reach our goal…i.e. make a DIVISION division as though its min-height in IE6

Solution 1 : Using the Underscore Hack [ ...Read more]

.box1 {
min-height: 200px;
height:auto;
_height:200px;
}

HTML : - 
<div class="box1">Some dynamic content with variable height ...</div>

---

 Solution 2: Using the CSS Attribute Selector Hack

.box2 {
min-height:200px;
height:200px;
}
div[class] .box2 {
height:auto;
}

HTML:-
<div class="someclass">
<div class="box2 common">Some dynamic content with variable height ...</div>
</div>
 

 The CSS Attribute Selector Hack takes advantage of the fact the browsers earlier tha IE6 ignored an atribute-selector. Note the requirement of another container division with class=”someclass” . Just the presense of the class attribute for this division, overrides the height back to auto for Opera, Mozilla and MSIE7 and later. IE6, which doesn’t support atribute selectors, ignores it.

View Demo of the min-height hack for IE6