2012/01/20

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

2012/01/18

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.