IE6 display:none; bug!

[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:

Code:

Login

• Create Account
• Forgot your password?

CSS:

Code:

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):
[img]http://i42.tinypic.com/312ei6s.jpg[/img]

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

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:

Code:

Login

Email Address:

Password:

• Create Account
• Forgot your password?

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.

Code:

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

"Meshach" wrote:

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…)

[Author]

Posts