Forums

Meshach

Hello Everyone.

First of all I have a div, and I put my login into in and put display:none; on it to make it not appear when the page loads. Next I have a text link for when you click it will fade the div in using JavaScript (scriptaculous).

Now in Firefox, IE7+, Opera and Safari it works excellent.. In IE6 it's a different story, it won't show my images in the div when it fades in. It shows text links and the form with inputs but no images appear.

I'm hoping a CSS expert can help me here.

XHTML:


<div id=\"login-panel\" style=\"display:none;\"> <!-- bof Login Panel -->
<a href=\"#\" onclick=\"Effect.Fade('login-panel'); return false;\"><img id=\"login-icon-close\" src=\"includes/templates/windcutter/images/icons/close.png\" alt=\"Close\" /> </a>
<h2 style=\"padding:10px 0 0 20px; margin-bottom:15px;\">Login</h2>
<div id=\"login-panel-inner\"> <!-- bof Login Panel Inner -->
<?php echo zen_draw_form('login', zen_href_link(FILENAME_LOGIN, 'action=process', 'SSL')); ?>
<fieldset>
<label class=\"email-address\" for=\"login-email-address\"><?php echo ENTRY_EMAIL_ADDRESS; ?></label>
<?php echo zen_draw_input_field('email_address', '', zen_set_field_length(TABLE_CUSTOMERS, 'customers_email_address', '19') . ' id=\"login-email-address\" '); ?>
<br />
<label class=\"password\" for=\"login-password\"><?php echo ENTRY_PASSWORD; ?></label>
<?php echo zen_draw_password_field('password', '', ' id=\"login-password\"'); ?>
<?php echo zen_draw_hidden_field('securityToken', $_SESSION['securityToken']); ?>
</fieldset>
<input name=\"submit\" type=\"image\" id=\"login-button\" src=\"includes/templates/windcutter/images/button_go-trans.png\" onclick=\"Effect.Fade('login-panel'); document.login.submit();\" value=\"Submit\" />
</form>
<ul>
<li><a class=\"small\" href=\"index.php?main_page=create_account\">Create Account</a></li>
<li><a class=\"small\" href=\"index.php?main_page=password_forgotten\">Forgot your password?</a></li>
</ul>
</div> <!-- eof Login Panel Inner -->
</div> <!-- eof Login Panel -->

CSS:


div#login-panel {
    width:350px;
    height:155px;
    position:absolute;
    left:55%;
    background:url('../images/content_top_gradient.gif') repeat-x;
    border:1px solid #000;
    background-color:white;
    -moz-border-radius-bottomright:10px;
    -webkit-border-bottom-right-radius:10px;
    -moz-border-radius-bottomleft:10px;
    border-top:none;
    border-right:1px solid #333;
    border-bottom:1px solid #333;
    border-left:1px solid #333;
}
div#login-panel-inner {
    width:350px;
    height:55px;
    margin:0 auto;
}
label.email-address {
    margin-left:20px;
}
input#login-email-address {
    margin-top:3px;
}
label.password {
    margin-left:20px;
}
input#login-password {
    margin-top:10px;
    margin-left:29px;
}
input#login-button {
    position:relative;
    left:293px;
    bottom:22px;
    border:none;
}
img#login-icon-close {
    position:absolute;
    top:5px;
    right:5px;
}

Here is what I want it to look like (firefox, opera, safari, ie7+ etc):
http://i42.tinypic.com/312ei6s.jpg

Here is what I don't want it to look like (IE6):
http://i44.tinypic.com/2z7l8k9.jpg

I would appreciate any help.
Meshach

AshtonSanders

Hi Meshach,

It sounds like scriptaculous is not making the images appear.

Do you have a link to the page?

Also, when you post the HTML, could you post it from the client side? (ie without the PHP)

Meshach

Greetings Mr. Sander.

It most likely isn't script.aculo.us because when I take off display:none; then the images will show up just fine in IE6.

Here is the code:

XHTML:

<div id=\"login-panel\" style=\"display:none;\"> <!-- bof Login Panel -->
<a href=\"#\" onclick=\"Effect.Fade('login-panel'); return false;\"><img id=\"login-icon-close\" src=\"includes/templates/windcutter/images/icons/close.png\" alt=\"Close\" /> </a>
<h2 style=\"padding:10px 0 0 20px; margin-bottom:15px;\">Login</h2>
<div id=\"login-panel-inner\"> <!-- bof Login Panel Inner -->
<form name=\"login\" action=\"http://localhost/wcshop/index.php?main_page=login&amp;action=process\" method=\"post\"><fieldset>

<label class=\"email-address\" for=\"login-email-address\">Email Address:</label>
<input type=\"text\" name=\"email_address\" size = \"20\" maxlength= \"96\" id=\"login-email-address\"  /><br />
<label class=\"password\" for=\"login-password\">Password:</label>
<input type=\"password\" name=\"password\"  id=\"login-password\" /><input type=\"hidden\" name=\"securityToken\" value=\"e3d2a317b441f97b6b9f5a866ad663fb\" /></fieldset>
<input name=\"submit\" type=\"image\" id=\"login-button\" src=\"includes/templates/windcutter/images/button_go-trans.png\" onclick=\"Effect.Fade('login-panel'); document.login.submit();\" value=\"Submit\" />
</form>
<ul>
<li><a class=\"small\" href=\"index.php?main_page=create_account\">Create Account</a></li>
<li><a class=\"small\" href=\"index.php?main_page=password_forgotten\">Forgot your password?</a></li>
</ul>
</div> <!-- eof Login Panel Inner -->
</div> <!-- eof Login Panel -->

I appreciate your response... Looking forward to getting this resolved.
Meshach

AshtonSanders

Hey,

I've looked through your code, and have one idea. If you had a live link where it's not working, I would be able to help you a little more.

Here's my idea: Try adding the blow just to make sure the images aren't inheriting the display:none from the div.


div#login-panel img {
    display:block;
}

"Meshach" said:

It most likely isn't script.aculo.us because when I take off display:none; then the images will show up just fine in IE6.

When you take off display: none, you change two things:

1) the images aren't hidden to begin with and
2) Scriptaculous doesn't try to unhide them.

Either one of those could be breaking it.

Let me know how it goes, and if you have a link.
Ashton Sanders

Edit: spelling...

Meshach

Ok Ashton, I have sent you a link via PM.

Meshach

AshtonSanders

btw... this was handled:

The problem was that the offending Image was 1) a .png and 2) started inside a "display:none" div. He was using a png hack to get the transparency to work in IE6.

The combination of the PNG hack, and starting how hidden resulted in never appearing when the script later made the div visible.

Solution: make it a jpg.

l8r,

(srry bout the necro...)

treehouse : what would you like to learn today?

Forums

IE6 display:none; bug!