WEB2pointO

CSS hack for IE6 and IE7

Bala — Sun, 02 Mar 2008 04:51:04 +0000

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,

Define a property for Firefox - normal manner
Define the same property for IE7 with * Prefix
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?

Bala — Tue, 14 Aug 2007 05:33:59 +0000

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

Bala — Thu, 10 May 2007 08:24:16 +0000

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

Applying Style for the File Button

Bala — Wed, 09 May 2007 10:27:13 +0000

Everyone who works in the front end will be aware of the , 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

We have to handle IE and FF seperately, so a code for IE is placed seperately in this.
I thank Nirmal, for helping me out in this. The credit goes to him

Div.style in Firefox renders error

Bala — Wed, 25 Apr 2007 12:10:12 +0000

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.

Internet Explorer Hacks and Tips

Bala — Thu, 12 Apr 2007 04:06:26 +0000

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

Bala — Tue, 10 Apr 2007 08:24:59 +0000

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

Page Branching

Page branching is similar in that you first use if() or some
other kind of test to determine the user’s browser. However, in this case
you send the user to an entirely different page based on the result of the
test:

if (browser A)

{  location.replace(browserA.html)

else if (browser B)

{  location.replace(browserB.html)

else

{  location.replace(others.html)

Page branching is useful when the different browsers require substantially
different scripts or HTML. For example, if your script can be implemented only
in Netscape 4 using quite a few tags, then it’s
probably a good idea to put the Netscape 4 code and tags in a different page.
The downside to this approach is that you end up with (at least) two sets of
HTML and JavaScript code to maintain, which is nobody’s idea of a good
time. For this reason, most site designers use page branching only while
it’s absolutely necessary.

CSS Tricks and Tips

Bala — Thu, 05 Apr 2007 09:57:26 +0000

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

The first selector is for all browsers and defines the basic box. The second selector is for conforming browsers who we hope to get the padding/ width calculation right. And the third selector is for older versions of Internet Explorer which we “hope” get the calculation wrong (per the W3C guidelines), so we help out a little by using a backslash preceding a selector letter that’s in the range from g-z.

Css Colors:
Everyone working with CSS must be bugged withe color codes, one best way what i do is, I will open Photoshop->color palette and will fetch the values from there. But some times, typing these cods are real headache, here is one shortcut for color codes, but this code works with xxyyzz formats only. The trick is for codes with “xxyyzz” formats you can use “xyz”. Sounds kool?

Media Independent:
Now days people use so many ways so access net, through computer, mobile, PDAs etc. So you dont know through which means your vistor is accessing you. But you have to deliver your web content such that it is compatible with all these. But creating seperate content for each is not a welcome move, rather you can change you CSS accordingly, how to do that. Here you go.

If you don’t add “projection” to the default media mix, Opera users will be in trouble.

Center IT:
we often want to have a “page”- or “content”-class div to center everything. One way to do so is to use “margin-left: auto; margin-right: auto; position: relative”. Wecan even use absolutely positioned layers inside this div.

Quick but no so neat round corners:
If you want to have a very quick way to give something rounded corners, and you don’t really care if the effect is lost on some browsers, you can use a definition like the following: “-moz-border-radius: 8px”.

Opacity:
To make a div layer (or mostly anything else) blend in with the background, you can use the following property-value pairs:

-moz-opacity: .5;
filter: alpha(opacity=50);

The first is for Firefox, the second for Internet Explorer. This effect can also create neat shadows – just use an empty shadow layer (that is, a div of the class “shadow”), give it a slight offset, a black background, and put it behind another box.

PS: You want to access a “moz” value in JavaScript? Use something like this (note the upper-case “m” and “o”):

var elm = document.getElementById(”myElm”);
myElm.style.MozOpacity = .5;

You can drop the “-moz-” prefix in all modern versions of Firefox.

Resources : Google code labs, Glogoscoped, W3org

GWT Overview Presentation : A startup for GWT Beginners

Bala — Mon, 02 Apr 2007 12:15:05 +0000

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

Bala — Sat, 31 Mar 2007 17:18:21 +0000

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.

Google Web Toolkit Features:

Open Source
Readymade,Dynamic, reusable UI components
RPC
Browser history managementdebugging
Browser compatible
JUnit integration
Internationalization
Interoperability
Fine-grained control

IDE for GWT:
There are so many IDEs available for GWT. To list a few
Googlispe
VistaFei
DesignerPro

GWT architecture:
GWT has four major components: a Java-to-JavaScript compiler, a “hosted” web browser, and two Java class libraries.

–>GWT Java-to-JavaScript Compiler
The GWT Java-to-JavaScript compiler translates the Java programming language to the JavaScript programming language. The GWT compiler runs the GWT applications in web mode.

–>GWT Hosted Web Browser
The GWT Hosted Web Browser allows us to run and execute your GWT applications in hosted mode, the code runs as Java in the Java Virtual Machine without compiling to JavaScript. The GWT browser embeds a special browser control (an Internet Explorer control on Windows or a Gecko/Mozilla control on Linux) with hooks into the JVM.

–>JRE emulation library
GWT contains JavaScript implementations of the most widely used classes in the Java standard class library, including most of the java.lang package classes and a subset of the java.util package classes. The rest of the Java standard library isn’t supported natively within GWT.

–>GWT Web UI class library
The GWT web UI class library is a set of custom interfaces and classes that let your create web browser “widgets,” like buttons, text boxes, images, and text. This is the core user interface library used to create GWT applications

All these features will make your life so easy that you will love to play with GWT. I have given a very basic overview about GWT, as we move on, we will go deep about IDEs and everything.