Warning: Creating default object from empty value in /home/expressionz/developer.expressionz.in/blogs/wp-content/plugins/download-monitor/classes/download_taxonomies.class.php on line 156

Warning: Creating default object from empty value in /home/expressionz/developer.expressionz.in/blogs/wp-content/plugins/download-monitor/classes/download_taxonomies.class.php on line 156

Warning: Creating default object from empty value in /home/expressionz/developer.expressionz.in/blogs/wp-content/plugins/download-monitor/classes/download_taxonomies.class.php on line 156
Browser Quirks | Expressing IT

Archive for the ‘ Browser Quirks ’ Category

IE Javascript Error : Object doesn’t support this property or method

Friday, February 18th, 2011 By Nikhil

Had this strange issue , where a piece of Javascript worked fine in all the browser  and as usual sans IE :) …  Simple it was, but since the script was not written by me, It took a while to debug this “Object doesn’t support this property or method” error, that only IE was throwing up. Probably! If  I were to write the script, I wouldn’t have got this error at all , as I tend not to mix my variable names with field Ids :).

Problem: Object doesn’t support this property or method (on line 3)


function funzoneSP(){
    document.getElementById('video_id').style.visibility="hidden";
    shortdesc = document.getElementById('shortdesc').value;
    ....
}

Solution:
The error is generated on the thirdrow in the example above(Line 3… “shortdesc = document.getE….”). I tried all sort of stupid things , that I dont is even worth the mention here and finally guess what!  just changing the shortdesc var to something else got rid of the error. Basically! The variable name had to different from the fieldID


get ExpressingIT News by Email Subscribe to ExpressingIT by Email or  Follow Me on Twitter


Aligning radio button with text

Thursday, March 4th, 2010 By Nikhil

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.


get ExpressingIT News by Email Subscribe to ExpressingIT by Email or  Follow Me on Twitter


SevenUp! Encourage the world to get rid of IE6!

Sunday, March 22nd, 2009 By Nikhil

Google starts a movement prompt people to dump IE6 … By bugging IE6 users with a POPUP on page load… may be not a very good idea … but being a UI developer , I have to join this band wagon … one less browser for me worry about … Sorry selfish it is! but I have include this javascript … ( TRY THIS PAGE IN IE6) …
Hey ! and on the brighter note … See it is a display of the POWER of JAVASCRIPT …. it can even bring down a giant (or once it was )

SO … Help rid the world of IE6 with one line of javascript!

http://code.google.com/p/sevenup/


get ExpressingIT News by Email Subscribe to ExpressingIT by Email or  Follow Me on Twitter


Bring Down IE6, Its about time!!!

Thursday, March 19th, 2009 By Nikhil


With another browser to take care from tomorrow! (IE8 comes out of its Beta State tomorrow) … Its really high time IE6 is given its Long Due Mercy Death … United we stand for the fall of IE6 

“IE6 is the new Netscape 4. The hacks needed to support IE6 are increasingly viewed as excess freight. Like Netscape 4 in 2000, IE6 is perceived to be holding back the web.”

Jeff Zeldman, standards guru

And meanwhile  for those  like me who will be flooded with calls of  breaking CSS layouts in IE8,  here is the old work around/fix using Meta Tags (meta http-equiv=”X-UA-Compatible”) you could try…

Mis-behaving IE8 : CSS Layout breakages (Targeting a browser version using Meta Tags in IE8)


get ExpressingIT News by Email Subscribe to ExpressingIT by Email or  Follow Me on Twitter


Mis-behaving IE8 : CSS Layout breakages (Targeting a browser version using Meta Tags in IE8)

Wednesday, December 17th, 2008 By Nikhil

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.


get ExpressingIT News by Email Subscribe to ExpressingIT by Email or  Follow Me on Twitter


Blinking Cursor in Firefox – Accessibility Caret Browsing

Thursday, November 20th, 2008 By Nikhil

In Firefox… sometimes you might have noticed that  the cursor starts blinking on the screen. It might happen when you click on any element on the page , a division or an image etc. This Blinking Cursor in the browser window is actually an ACCESSIBILITY Feature of FireFox called ‘caret browsing’. This features  allows/enables  users to select text on the page with the keyboard ( Which we normally tend to do with the use of our mouse).

Well! if you donot want this feature … simple press “F7” to toggle it to false  and vice-versa ( if you want it ON).  You could also  type “about:config” in the address bar (type in “caret” in the filter box) and simply double click to change the option “accessibility.browsewithcaret” from “true” (turn caret browsing ON) to “false” ( turn caret browsing OFF)


get ExpressingIT News by Email Subscribe to ExpressingIT by Email or  Follow Me on Twitter


NOT For IE Only – CSS Child Selectors don’t work in IE

Friday, October 10th, 2008 By Nikhil

CSS for Non-IE Browsers : Its no news to CSS developers that , CSS Child Selectors like the example below, doesnt seem to work in IE. 

e.g. div > span { some css } , that means “when a span element is a child ( and NOT  a grandchild or great grand child etc.) of a division element” .

But we used this CON to our advantage. Historically, the child selector has been used to hide CSS commands from IE. Simply by placing html>body in front of any CSS command IE will ignore it:

html>body .foo {CSS commands go here;}

This works because <body> is always a child of <html> – it can of course never be a grandchild or great-grandchild of <html>.

Now that IE7 understands the child selector, you have to insert an empty comment tag in directly after the greater than sign. IE7 will then not understand this selector (who knows why!?) and will therefore totally ignore this CSS command:

html>/**/body .foo {CSS commands go here;}

If haven’t already seen these before, have a read through the following as well


get ExpressingIT News by Email Subscribe to ExpressingIT by Email or  Follow Me on Twitter


Disappearing HTML/DIV elements in Internet Explorer [IE]

Saturday, October 4th, 2008 By Nikhil

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.


get ExpressingIT News by Email Subscribe to ExpressingIT by Email or  Follow Me on Twitter


CSS hack: Javascript, CSS, HTML for Firefox only

Tuesday, September 2nd, 2008 By Nikhil

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 …


get ExpressingIT News by Email Subscribe to ExpressingIT by Email or  Follow Me on Twitter


IE 8 strict mode and CSS opacity… Work Around

Tuesday, July 15th, 2008 By Nikhil

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!


get ExpressingIT News by Email Subscribe to ExpressingIT by Email or  Follow Me on Twitter


 Subscribe to ExpressingIT RSS
get ExpressingIT News by Email Subscribe to ExpressingIT by Email
 Follow Me on Twitter