Page 1 of 1

Div position and trigger function problem in ie

Posted: Thu Oct 01, 2009 7:34 am
by Wolfie
Hi all,

I have this code in php which generates the gallery :

Code: Select all

 
echo '<div id="gallery" class="gallery">'.
                '<div id="click_prev"></div><div id="click_next"></div>'.
                '<div class="img_container" id="img_container" style="width:'.$width.'px; right:0px;">';
        if(!empty($_POST['dir'])) {
            for($i=$count-1; $i>=0; $i--) {
                echo '<img src="'.$imgs[$i].'">';
            }
        }
        echo '</div>';
 
As you see, there is a div with id='gallery' which contain two divs 'click_prev' and 'clicl_next'. They are responsible for trigger function in jQuery for moving imgs left and right. The css for those divs is :

Code: Select all

 #click_next {    position:absolute;    z-index:2;    background:transparent;    height:360px;    width:125px;    float:left;    cursor:url(http://deigie.pl/images/site/strzalka_lewo.gif), pointer;} #click_prev {    position:absolute;    z-index:2;    background:transparent;    height:360px;    width:600px;    float:left;    margin-left:125px;    cursor:url(http://deigie.pl/images/site/strzalka_prawo.gif), pointer;} 
Now the problem is that in firefox and opera everything is ok, the two 'click' divs are appearing inside the 'gallery' div and when I am clicking them they trigger jQuery function properly. But not in ie. In internet explorer those divs are OUTSIDE the 'gallery' div, moreover even when I am clicking them nothing happends.
I have separated css file for ie so I can change it only for ie, any idea how to fix it ?

Re: Div position and trigger function problem in ie

Posted: Thu Oct 01, 2009 8:26 am
by superdezign
As far as I know, position:absolute and float:left/right are not compatible CSS styles. Since you don't use top, left, right, or bottom CSS styles, then position:absolute does nothing more than allow browsers to interpret it differently. If you want to keep the z-index style valid, I believe using position:relative still makes IE respect z-index.

Re: Div position and trigger function problem in ie

Posted: Thu Oct 01, 2009 8:49 am
by Wolfie
Well, I did some research, and there are two mayor issues, first of all the ie doesn not bind onclick function to the dynamicaly loaded contetn, and those two divs are loaded dynamicaly by $.load jQuery function. Second thing is that they have background transparetn and with transparent background it is impossible to bind click function in ie.

Ok, I have deleted the float:left from div and I add position:relative instead of absolute, and one of those divs now is placed correct, the other one, smoller is moved to the down. Other thing is that now the gallery is missing somewhere...

any ideas ?