A few note on z-index

z-index is widely used in dropdown menu/block to make one div on the top of the other. Here are a few I learned from.

1. Z-index only works on "realtive" or "absolute" position.
2. Higher z-index layer usually on the top of lower one, but in IE7, it's not that obviously. To fix IE7's z-index problem, you need to make sure, set z-index for the same stacking layers. (See example below)

<div id="p1" style="position:relative">
   <div id="c1" style="position:relative; z-index:10">
         I want to be on the top!!!
   </div>
</div>

<div id="p2" style="position:relative; z-index:5">
   <div id="c2" style="position:relative; z-index:5">
        I can be on the bottom!!!
    </div>
</div>

In order to make the above example works in IE7, you have to set 'p1' to have z-index higher than 'p2'.
3. Don't set parent layer's overflow is hidden, that will children cannot overlay.

Good luck

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.

How to install GD Extension on EC2

If you're using Amazon EC2 with Amazon Linux AMI, you my find GD Extension is not installed by default. The following are steps to get it installed.

• check if PHP GD is installed or not by 'rpm -qa | grep php', if you see 'php-gd-5.3.8-3.20.amzn1.i686" or similar, then you are fine and can stop here.
• If not, then run command, 'sudo yum install php-gd'
• And restrat apache by 'sudo /etc/init.d/httpd restart'
Cheer!

Set Magic Quotes Runtime is deprecated

I see a lot of error in logs regarding set magic quotes runtime is deprecated on one of my wordpress site running the nginx server. The error is like the following,

2011/11/07 12:02:48 [error] 15798#0: *130087 FastCGI sent in stderr: \"PHP Deprecated:  Function set_magic_quotes_runtime() is deprecated in /var/www/example/content/wp-settings.php on line 32\" while reading response header from upstream, client: 173.13.114.113, server: www.example.com, request: \"GET /news/ HTTP/1.1\", upstream: \"fastcgi://unix:/var/run/www/php.sock:\", host: \"www.example.com\", referrer: \"http://www.example.com/\"

I already turn off Deprecated error in php.ini, but Not sure why it does not stop. The bad thing is that a lot of deprecated errors make the important error message hidden, so I got the fix this. Finally, the solution is edit wp-settings.php on line 32 to

//set_magic_quotes_runtime( 0 );
//110711 - Since this function is depracted as of PHP 5.3, use ini_set('magic_quotes_runtime', 0); instead.
@ini_set( 'magic_quotes_runtime', 0);

Ref: http://php.net/manual/en/function.set-magic-quotes-runtime.php

How to disable autosave and wp post revisions

Just a short note.

define('WP_POST_REVISIONS', false);

function disable_autosave() {
wp_deregister_script('autosave');
}
add_action( 'wp_print_scripts', 'disable_autosave' );