Expressing IT

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.

• 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

This ones old school , but as usual it is my memory supplement …
So is disabled=”true” and disabled=”false” same?Yes
… Don’t believe, well! thats the way it is … here is some quick explanation…
“disabled” is an attribute of any form element/field and hence can accept any value by its nature.

As long as this attribute is present, the element will be disabled regardless of its value. for eg.
<input type=”text” value=”This is disabled” disabled>
<input type=”text” value=”This is disabled” disabled=”disabled”>
<input type=”text” value=”This is disabled” disabled=”true”>
<input type=”text” value=”This is disabled” disabled=”false”>

All of the above will make the this form field “DISABLED”.

Simply not providing the attribute “DISABLED” keeps the Field “ABLED” … like below

<input type=”text” value=”This is not disabled” />

Remember “Any value (or no value at all) of the disabled attribute, the browser will render it disabled” . To keep things clear in our minds W3C recommends that we use disabled=”disabled” in these situations.

This is difference though when we use this attribute in javascript …

document.form.element.disabled = true; //the element will be disabled
document.form.element.disabled = false; //the element will be enabled

The above arguments are also true for these attributes and elements :

• checked (radio button and checkbox)
• selected (option)
• nowrap (td)

If you are css person, you would know the pain in getting your layouts working cross-browser. IE8 is yet another spanner in the works for us developers. Anywaz! if you hit upon this issue, Like I did yesterday, where your perfectly working CSS in IE7 (and earlier) and  Firefox  has suddenly started throwing tantrums in IE8 , TRY This … It nicely seemed to fix my problems for the moment ….

Using Meta declaration, we can specify the rendering engine we would like IE8 to use. So to force IE8 to render as IE7 … Insert the following Meta Tag into the head of your document:-

<meta http-equiv=”X-UA-Compatible” content=”IE=7″ />

By default IE Meta would be:-

<meta http-equiv=”X-UA-Compatible” content=”IE=8″ />
which would make IE8 render the page using the new standards mode.

If required, this syntax could be used to accomodate for other browsers as below:

<meta http-equiv=”X-UA-Compatible” content=”IE=8;FF=3;OtherUA=4″ />

MORE About DOCTYPES :

IF you are yet unfamiliar with the sort of animal called “Doctype” … here is some quick read
What are DOCTYPES? What are BROWSER QUIRKS & STRICT Mode?
Setting the DOCTYPE in XSL

For a more in depth understanding about DOCTYPES , try visiting these links…
A List Apart : Fix Your Site With the Right DOCTYPE!
A List Apart : Beyond DOCTYPE: Web Standards, Forward Compatibility, and IE8

Note: Though many of us HTML/CSS people have been neglecting the importance of DOCTYPE decleration in our documents , Setting the right DOCTYPE , is usually the answer to most cross browser issues.

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 728 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 728 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 …

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