CSS hack for IE6 and IE7

Everyone know what a underscore hack is, but it fails in IE. Before getting into the Underscore hack, we need to know how it works,

If a property say height is prefixed with _ or - IE6 will assume that as a valid property but FF will ignore it, so for any IE6 specific style we can use _ or -. But in IE7 that bug was fixed, so if any property is followed by _ or -, IE7 will ignore it similar to Firefox.

Dont lose, still IE is not that robust, if you place a ‘*’ before the property, it considers, now that is something to smile about and thinking deeper. So if a property is prefixed by a *, it will be considered as a valid property, but we can a small problem here, even IE6 will take this as a valid one. So summing up everything we have

	*	_ or -
Firefox	Invalid	Invalid
IE6	Valid	Valid
IE7	Valid	Invalid

Analyzing the above table, if we want something specific to IE 7, then it should be prefixed with * and considering the fact that IE6 will also understand that, we must override that for IE6. We can override that with _ or - property. So here is the solution,

1. Define a property for Firefox - normal manner
2. Define the same property for IE7 with * Prefix
3. Define the complementary property (margin left and margin right) for IE6

Deciding the complementary property needs some amount of logical input. So for example, for a margin issue, this is what we gona have.

• For Firefox, margin-right: 10px;
• For IE6, _margin-left: 8px;
• For IE7, *margin-right: 2px;

That is all we need to do. Now we will see the same in all the brwosers, this is pretty ugly hack, but we dont have a better solution

What is WEB 3.0?

To know what could be Web 3.0 the next Generation of WEB, this article will be of great use.

Kick Starting Web 3.0 

This is what is called WEB 2.0

So many people ask, what is WEB 2.0? Can you explain?
There is no answer for this, WEB 2.0 is something similar to LOVE, you cant explain,but you have to Feel it, you ahve to Show it. I found  a nice video in Google, which talks about this. Have a Look at it

Powered by ScribeFire.

Applying Style for the File Button

Everyone who works in the front end will be aware of the <input type=”file”> , the function of this button is that, it will fetch you the file browser, so that you can chose the file for your Upload. Unfortunately, you can have images for these buttons, unlike we have for other Submit kind of buttons. So what can be done for this? There are two solutions,

1.You can find out the code behind of this File button and can implement that procedure in Onclick of this image button.
2.You can have an image Button over a File Button and you can invoke the Click event of the File button from the onclick event of this image buttton. For this you have to play with the z-index property.

we will have a look at the second method, as the first one is very simple.

How to do this?
Change the z-index of the File Button, make it as negative(or a lesser value than image button). I have included the code here, check it out here

Div.style in Firefox renders error

Div.Style property is not recognised by FireFox. Internet Explorer accepts it and renders the corresponding function, where FF couldnt do that. I was breaking my head with this, then finally the solution is found to be, referring the Div(or any element) by its Id, rather than using it directly.

Eg. Code that works properly in IE

Javascript
Function(){
….
divId.style.display = “none”;
….
}

Eg. Code that works properly in both IE and FF

Javascript
Function(){
….
document.getElementById(divId).style.display = “none”;
….
}

Firefox cant recognize the object correctly, we need to refer that by DOM techniques.

Powered by ScribeFire.

Internet Explorer Hacks and Tips

Odd Toolbar Behavior

Did you ever get your Toolbars in IE set just right only to reboot and you lose your settings? Many times when Toolbars are added or removed the Registry entry that controls these settings does not get updated or has become corrupt. You can download a small reg file to reset (to default) and correct this behavior.

• Download: ResetBrowserToolbar .reg [right-click and select: "Save Target As"
  To use: right-click and select: Merge - Ok the prompt and reboot.

Missing Status Bar

The above reg file will correct this behavior, if your status bar disappears when opening a new IE browser window. However make sure that option is selected - right-click the top Toolbar and select: Status Bar. If you are still having problems verify the below Registry entries exist and are correct:

[HKEY_CURRENT_ USER\Software\ Microsoft\ Internet Explorer\Main]
“Show_StatusBar”=”yes”
“Show_URLinStatusBar”=”yes”

For more on this check out Technical Tempest

CrossBrowser Issues

The best way to eliminate the cross browser issue is to detect the Browser and to make our CSS act acccordingly. There are so many ways to handle different Browsers. We have

• Inline Branching
• Page Branching
• Custom Objects

First we will have a look at the Inline and Page Branching.

Inline Branching

Using an if() statement or some other
control structure to check the browser and then performing the action based on the browser is called Inline Branching.
For eg, the getElementById() method is a good way to test
whether a browser supports the W3C DOM.

if (!document.getElementById) {

 return

}The rest of the code

if the browser returns undefined from
document.getElementById, then the script exits without moving on to the
rest of the code, which would likely generate errors or possibly even cause the
browser to crash. This is the most drastic scenario, but it’s necessary in
this case because the code is pure W3C DOM, so there’s no way to create the
equivalent in another object model.

If the result returns true then we should perform certain action, if false then the other

if (browser x) { 

 Code that’s specific to browser x

}

else if (browser y) {  

Code that’s specific to browser y

}

else {

  Code for all other browsers

} 

CSS Tricks and Tips

Today is CSS Naked Day, so I would like to share some CSS tips and tricks which I have learnt. First I would like to share about CSS Padding.

Cross Browser Padding:
This is one issue where most of the developers get struck.
In the CSS box model, “padding” is the distance from a box edge to its inner stuff, whereas “margin” is the distance to stuff outside the box.Now, when you give something a specific width, say “200px” (200 pixels), and you add a padding of “10px”, this means that the box has a width of 220 pixels (200 + 10 at the left side and + 10 at the right side). Probably not the most intuitive, and the programmers of older versions of Internet Explorers got it wrong and will not add the padding to the overall box size (so in IE5, the width is 200 pixels, even if there’s a 10 pixel padding).
There are so many tricks for this issue,one such is

.navigation
{
padding-left: 5px;
padding-right: 5px;
}

.navigation
{
width: 200px;
}

.navi\gation
{
width: 220px;
}

GWT Overview Presentation : A startup for GWT Beginners

In sequence with the Previous post I have here by given a small presentation for GWT Overview, I guess this wil be very helpful for beginners. This presentation contains a brief Overview of GWT, its features and other basic descriptions. Here is the Presentation. gwt_forblog.ppt

GWT : Google Web Toolkit : AJAX framework based on JAVA

I think it is high time for me start writing about GWT, since I have been working in it for the past 3 months.

What is GWT?
Google Web Toolkit (GWT) is an open source Java software development framework that makes writing AJAX application.

What GWT does?
Are you allergic towards javascript and still you want to create AJAX apps? Then this is the right path you should take. GWT is a framework which allows you to write applications in normal Java language and it will take care of the rest.

AJAX without JavaScript: How is that possible?
No AJAX app can exist without JS, what GWT does is it will convert Java which we code into Javascript. GWT lets you avoid many of these headaches while offering your users
the same dynamic, standards-compliant experience. You write your front
end in the Java programming language, and the GWT compiler converts your Java classes to browser-compliant JavaScript and HTML.