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

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.

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