I am using Scriptaculous' Effect.SlideDown function to slide a
"catfish" add/popup into the screen (like SitePoint.com has). This
works absolutely marvelous in FireFox (FF), but in Internet Explorer
(IE) the following occurs:
When the div slides into the screen, it does NOT SHOW the background
images loaded with CSS within the "#catfish" div. Once it's totally in
position, it will load and show all the images. The minute I click the
"hide-button", the images disappear again and the div slides down
without them. All the texts inside the "#catfish" div are visible.
I spend over 8 hours trying to solve this, have searched over and
over, but couldn't find a solution on the Internet. Any advice is very
appreciated. I included the all codes below.
Thank you,
Giorgio
------------
Here is a stripped sample of the "catfish" HTML:
<div id="catfish" style="display:none;">
<div class="middle">
<ul class="options">
<li><a href="javascript:void(0);"
id="catfish_close">Close this
announcement</a></li>
<li><a href="javascript:void(0);"
id="catfish_close_no_show">Don't
show this again</a></li>
</ul>
<h2>Header:</h2>
<ul class="steps">
<li class="step_1"><a href="http://www.xxx.com";>List
item 1</a></
li>
<li class="step_2"><a href="http://www.xxx.com";>List
item 2</a></
li>
<li class="step_3"><a href="http://www.xxx.com";>List
item 3</a></
li>
</ul>
</div>
</div>
Here is the regular CSS for this:
#catfish{
position:fixed;
bottom:0px;
width:100%;
height:140px;
padding:0px;
margin:0px;
background:url('../images/catfish_bg.gif') repeat-x 0px 0px;
}
#catfish .middle{
width:964px;
padding:20px;
margin:0px auto;
}
#catfish .middle .options{
float:right;
padding:50px 0px 0px 0px;
margin:0px;
list-style:none;
font-size:80%;
}
#catfish .middle h2{
padding-top:10px;
margin:0px;
}
#catfish .middle .steps{
margin:10px 0px 0px;
padding:0px;
}
#catfish .middle .steps li{
display:block;
float:left;
height:50px;
margin-right:20px;
padding:10px 10px 0px 60px;
text-align:center;
}
#catfish .middle .steps .step_1{
background:url('/images/step_1.gif') no-repeat 0px 0px;
}
#catfish .middle .steps .step_2{
background:url('/images/step_2.gif') no-repeat 0px 0px;
}
#catfish .middle .steps .step_3{
background:url('/images/step_3.gif') no-repeat 0px 0px;
}
Here is the adjusted CSS IE < 7:
(This is needed to position the div on top and make the rest
scrollable, as IE < 7 doesn't have "position:fixed". This is how
SitePoint.com does it as well.) The "#zip" div is a wrapper around
everything else inside the body element, but the "#catfish" div.
#catfish{
position:absolute;
margin-bottom:-1px;
overflow:hidden;
z-index:100;
}
html,
body{
width:auto;
height:100%;
overflow:hidden;
}
div#zip{
width:100%;
height:100%;
padding:0px;
margin:0px;
overflow:auto;
position:relative;
}
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~----------~----~----~----~------~----~------~--~---
