Grow your CSS skills. Land your dream job.

IE6 display:none; bug!

  • # April 28, 2009 at 3:22 pm

    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:

    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

    # April 28, 2009 at 6:00 pm

    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)

    # April 28, 2009 at 6:45 pm

    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:

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

    # April 28, 2009 at 7:44 pm

    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…

    # April 28, 2009 at 9:13 pm

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

    Meshach

    # May 24, 2009 at 4:11 pm

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

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".