Div position and trigger function problem in ie

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
Wolfie
Forum Commoner
Posts: 37
Joined: Wed Jan 28, 2009 8:40 am
Location: Poland

Div position and trigger function problem in ie

Post 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 ?
Last edited by pickle on Thu Oct 01, 2009 10:08 am, edited 1 time in total.
Reason: Fixed "u c" to be actual words. Please follow the rules & dont use shortcuts.
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Re: Div position and trigger function problem in ie

Post 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.
Wolfie
Forum Commoner
Posts: 37
Joined: Wed Jan 28, 2009 8:40 am
Location: Poland

Re: Div position and trigger function problem in ie

Post 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 ?
Post Reply