I have this situation where i want to call a certain element depended on the click value. When the link contains an image i want to show the image, otherwise i want to load a html page. I’ve styled the bar to close the whole thing different when the html page is loaded as if the image is loaded. Say i have this css (which is the styling when a html page is loaded)
#shadow,#shadowRoute { position:fixed;left:0;top:0;width:100%;height:100%;z-index:500;background:black;opacity:0.8; }
#shadowContent,#shadowContentRoute { position:fixed;z-index:550;background:white;padding:25px; }
#closebar,#closebarRoute { text-align:right;background:#ebdfd3;width:740px;padding:5px;height:25px;text-transform:uppercase; }
#content,#contentRoute { margin-top:25px;width:750px;height:450px;overflow:auto; }
#imageSelectPrevious { position:absolute;left:0;top:45px;width:80px;z-index:600; }
#imageSelectNext { position:absolute;right:0;top:45px;width:80px;z-index:600; }
.imageNavLink { display:block;text-indent:-9999px; }
I use the following code to show a loading image. This works pretty fine, except the closebar is styled in the background color, defined in the stylesheet.
$("#shadow").add($("#shadowContent")).fadeIn(500);
$("#shadowContent").animate({width:'250px',height:'250px'},500).css({top:'25px',left:'50%',margin:'0 0 0 -125px',padding:'10px !important'}).empty().append('<div id="closebar"><a href="#close" id="closeBox">'+closeText+'</a></div>').append('<div id="content"></div>');
$("#closebar").animate({width:'250px'},500).css({background:'white !important',padding:'5px 0 !important'});
$("#closebar a").css({color:'#323232','font-weight':'bold',background:'url(http://www.cherrytrees.nl/tmp/Core/Images/closeIcon.jpg) left center no-repeat',padding:'0 0 0 20px'});
$("#content").animate({width:'230px',height:'230px'},500).css({margin:'0',padding:'90px'}).html("<div id='imageSelectPrevious'><a href='#' id='prevImageLink' class='imageNavLink' title='' rel='prev'>Previous</a></div><div id='imageSelectNext'><a href='#' id='nextImageLink' class='imageNavLink' title='' rel='next'>Next</a></div><img id='popImageContainer' src='http://www.cherrytrees.nl/tmp/Core/Images/load.gif' style='margin:0'></div>");
$("#prevImageLink").add($("#nextImageLink")).hide();
Ok, i now have some code which checks the image, get dimensions and everything. When the image is fully loaded i run the following code to change the container dimensions and display the image
$("#shadowContent").animate({width:newWidth+'px',height:newHeight+'px'},500).css({top:'25px',left:'50%',margin:'0 0 0 -'+(newWidth / 2)+'px !important'});
$("#content").animate({width:newWidth+'px',height:newHeight+'px'},500).css({margin:'0',padding:'0 !important'});
$("#closebar").animate({width:newWidth+'px'},500);
$("#popImageContainer").css({padding:'0 !important'});
Now this works fine in Chrome and Safari (IE not tested), but Firefox styles the closebar with the #ebdfd3 background, somehow adds a padding to the image, and messes up the position of the container element.
And yes, the stylesheet is included above the javascript in my document
I really don’t have a clue what to do, considering the fact it works in Chrome and Safari.. Does maybe anybody heard about a issue like this?
Problem solved!
The !important caused the problem! It now works fine!! Thanks!
Don’t use
!important: It won’t work in this context.