NaN - think twice before using parseInt

As most of you know the javascript return value of parameters like width and height are returned with units trailing. So testing for an image

<img src="test.jpg" />

with

alert(getElementsByID("myImg").width)

will return 120px for instance.

One way to convert the return value to an integer is with method parseInt.

For

alert(parseInt(getElementsByID("myImg").width))

Firefox/Gecko returns 120 (fine)

IE will return NaN (quite different)

Why, doesn`t IE understand how to parse the return value. Of course it does.
I missleaded you. The first alert statement will return "auto" in IE because the img statement lacks width and height parmeters. Parsing "auto" to int will not work. IE is correct in here. Firefox takes the calculated image size and will return the original 100% scaling proportions.

 

Take care what you are parsing.

 

CSS Madness

Define some divs with classes or ids and take a look.

Chances are good you will see:

CSS IE

Nothing wrong. The rightmost box doesn`t look as strange - in IE.

CSS IE

Ok, this is easy you may say. IE handles padding, border and margin different from Mozilla. Right.
But what about background-color and font style...

 

/* CSS Document */
.testbox{background-color: #999;
	color: #222;
	border: 1px solid #CC9933;
	padding:5px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 9pt;
	width: 400px;
	height: 200px;
	margin-right: 5px;}

.testboxnoborder{
	background-color: #99B;
	color: #222;
	border: 0px;
	padding:5px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 9pt;
	width: 400px;
	height: 200px;
	margin-right: 5px;}}

.teststrange{
	background-color: #A88;
	color: #222;
	border: 0px;
	padding:5px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 9pt;
	width: 400px;
	height: 200px;
	margin-right: 5px;}

 

The answer for this behaviour is the double-bracket at the end of the second declaration.
IE (in this case version 7.05) ignores it. But Mozilla will leave alle further CSS declarations in the dust.
Strange effects will happen. Every style you use in the doc that was defined before the double-bracket will work, every style you define after the mistake will be ignored.
Just imagine a typical CSS file with hundreds of classes.

 

 

To be continued...

During work

Search for a window,
look out, every 6th hour or so.

 

10 cups of espresso per day
are a reasonable amount for
a medium sized human

 

Talk to strangers - every non-digital,
non-virtual, living person is suited