adsense code "break" the site in Firefox 3.6

I have adsnese code in a website, and today I found it broke the website in Firefox 3.6. When I open the site, right after it loads, it redirect to a blank page.

After pinning down, I found it was caused by adsnese code. It may not be wrong by adsense code, because I put it in a stickey div, so then the ad can stay after page scroll. However, Firefox 3.6 just does not like it.

OK, OK, I moved it from the stickey div.

Div does not float right in IE

straging layout in IE8

IE is strict someitmes. For exmaple,

<div id="left-p" style="float: left;">
<form>
abcdefef...
abddedfdfdf....</form>
</div>

<div id="right-p" style="float: right;">
<div id="t1&quot;">
</div>
<div id="t2&quot;">
</div>
</div>

In the Firefox and Chrome, the code works fine, but in IE, the div[id=t2] may not float right.

I have no complaint with IE this time, the above code is bad, so we should not have partial
form in the a div and partial in another div.

web page is not centerized in ipad

The ipad2's screen resolution is good to view a webpage having designed width as 960px. Recently, I am working a new site,

and the site looks good in the desktop, but in ipad2 the web page is not centerized, but align to left and leave some space

at right. Finally I figure it out that some invisibly div, in my case it's big drop down manu, which flow out of the page, so

when viewing in the ipad browser, it treat the web page as whatever width including the invisible area, so then shink the

whole webpage and align to left.

Actually this also caused the browser in the desktop to have extra horizontal scroll bar when the window is resize to one

less than than whatever width including the invisible area.

The fix I did is reposition the big drop down manu to not overflow the designed width.

HTML entities in Textarea tag

Maybe this is obvious, but I just leaned it. See the example below,

<textarea>
techrecorder&reg;
</textarea>

I expected to see the '&reg;' but it gives me '®' So when the value of textara tag is presented by convering all of html entities code to the code result, for exmaple, '&lt;' to '<' and '&quot;' to '"'. So if you wanted to show html entities code in textarea, you have to escape &, for example,

<textarea>
techrecorder&amp;reg;
</textarea>

Headache of ISO-8859-1 to UTF8

In Perl, you can use encode ('UTF-8', $iso-text-str) to convert ISO-8859-1 encoded string to UTF-8 encoded string. And in PHP, you can use utf8_encode($iso-text-str) to do the converting.
However, you may be out of luck, for after being converted, some characters could be funky and not what you wanted to see. I think this is because, some characters in UTF8 are invisible, like x80 - x9f (see the following ISO-8859-1 characters list images)

Because I  only care of those regular characters, like \x20-\x7F or \xA9 or \xAE or \x99,  I strip other characters before applying encoding function.
In Perl

$content =~ s/[^(\x20-\x7F|\xA9|\xAE|\x99)]+//g;
$content = encode('utf8', $content);

In PHP

$content = preg_replace('/[^(\x20-\x7F|\xA9|\xAE|\x99|\n)]+/', "", $content);
$content = utf8_encode($content);

UPDATE: Actually, I found that in Perl, encode function cannot correctly convert \x99 to ™. Finally my solution is the following,

open (FILE,  ">$your_file") || die "couldn't write to epcmf file\n";
   binmode(FILE, ":UTF-8");

   $title =~ s/[^(\x20-\x7F|\xA9|\xAE|\x99)]+//g;
   $title =~ s/\x99/™/g;
   $title =~ s/\xAE/®/g;
   $title =~ s/\xA9/©/g;
   print FILE $title;

Note:

1. You should edit your script in UTF-8, for example, in PUTTY, you can change your character set to UTF-8 at Configuration > Windows > Translation
2. UTF-8 is different to utf8, so in make sure you write it as binmode(FILE, ":UTF-8");

How to embed youtbe video on the webpage

Here is code:

<object width="336" height="300">
<param name="movie" value="http://www.youtube-nocookie.com/v/VCtIS9vKdWg&hl=en&fs=1&color1=0x006699&color2=0x54abd6&border=1"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube-nocookie.com/v/VCtIS9vKdWg&hl=en&fs=1&color1=0x006699&color2=0x54abd6&border=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="336" height="300">
</embed>
</object>

Here is what it looks like:

Trademark, Copyright, and Register symbols

Trademark, copyright, and register symbols in iso-8895-1 character set cannot be displayed correctly in other character set, for example, urf-8, or even iso-8895-15.

Try this function, which should fix this issue.

function tcr_encode($str) {
   $str = preg_replace("/".chr(153)."/",'™',$str); // trademark
   $str = preg_replace("/".chr(174)."/",'®',$str); // registered tratemark
   $str = preg_replace("/".chr(169)."/",'©',$str); // copyright
   return $str;
}
//change trademark, copyright, and register symbols to html entity
$title = tcr_encode($title);

Error: Permission denied to call method Location.toString

I got this error in both Firebug and Firefox add-on Web Developer . "Error: Permission denied to call method Location.toString", when visiting my own website.

I checked carefully of the webpage, but did not find any problem of my code. Finally, I found the problem was from a Flash Ad. from Google AdSense.

Anyway, I need to keep Ad.

Fixed postion in IE6

To have something always shown on the same position on a page, we can use css position property and set it to "fixed", however it doesnot work in IE6. There might be some hack to make this happen in IE6, actually I searched along trying to find one, but have not find a good solution yet. Anyway I am not going to spend time on the IE hack, what I going to do is just hidded this funtion in IE6. Complaint? Who care! Why not just leave that old buggy stupid IE6, you have a lot of option, have not you?

So the html code is like this:

<div id="footerud">

<div id="up"></div>

<div id="down"></div>

</div>

The css is that:

#footerud{bottom:10px;display:block !important;position:fixed;left:15px;}

#up{

background:url(../images/arrowtop.png) no-repeat;

cursor:pointer;

height:14px;

margin-bottom:15px;

position:relative;

width:25px;

}

#down{

background:url(../images/arrowbottom.png) no-repeat;

cursor:pointer;

height:60px;

margin-top:15px;

position:relative;

width:25px;

}  

To hidded this on IE6, I added style into html code, like

<div id="footerud" style="display:none;">

 

Will that hidded it from Firefox or IE7? Don't worry, because we have this in the css file,

#footerud{bottom:10px;display:block !important;position:fixed;left:15px;}

The !important generally means the attribute cannot be overwrote, fortunately, IE6 does not recognized it, so it will be hid.