Grow your CSS skills. Land your dream job.

Signin Form doesnt work in IE

  • # April 21, 2010 at 8:15 am

    Hello folks,

    i have a problem with my SignIn Form in Internet Explorer.
    The Problem is, that i cant see the Input Labels (eMail and Password) at IE but it works perfect in FF, Safari and so on.

    My Form:

    Code:




    Remember me

    I already found out, that it works when i delete the "name="loginform" id="loginform"" but then, i cant login without these informations.

    Does anybody know, how to solve that?
    A idea was, to code a IE only Login Form but i can write an ie stylesheet only but not an ie html file only :P

    Here is the Link to the Site: http://ptfp.edvo.htl-donaustadt.at
    And here the Stylesheet: http://ptfp.edvo.htl-donaustadt.at/ptfp … layout.css

    Thanks!

    # April 21, 2010 at 11:24 am

    Add ‘position: relative’ to body and ‘position: absolute’ to #top-nav in the CSS.

    # April 21, 2010 at 3:19 pm

    Doesn’t work with position: relative/absolute.

    I just found out that, when i delete display: none from the LoginForm, that i have the inputs label in IE.
    But the Problem is that i need the display:none.. otherwise the loginform is everytime there without clicking on the signin button.

    Code:
    #loginForm {
    z-index: 99999;
    position: fixed;
    width: 200px;
    font-size: 0.8em;
    color: #477;
    margin: 32px 0 0 0;
    padding: 15px;
    background: #ddeef6;
    -moz-border-radius-topleft: 6px;
    -webkit-border-top-left-radius: 6px;
    -moz-border-radius-bottomleft: 6px;
    -webkit-border-bottom-left-radius: 6px;
    -moz-border-radius-bottomright: 6px;
    -webkit-border-bottom-right-radius: 6px;
    /*display: none;*/ IE
    }

    Is there a special trick for display:none in IE?

    # April 24, 2010 at 10:05 am

    No ideas, how to fix that problem?

    # April 24, 2010 at 12:09 pm

    Take ‘display: none’ out of the CSS, and then change your javascript file to look like this:

    Code:
    $(document).ready(function(){
    $(“#loginForm”).hide();
    $(“#loginButton”).click(function() {
    $(“#loginForm”).toggle();
    $(“#loginButton a”).toggleClass(“active”);
    return false;
    });
    });

    Does that solve it?

    # April 27, 2010 at 2:42 am

    Hi jamy_za,

    okay, now the input fields works.. i dunno why i didnt thought about this idea.

    But another Problem is, when i open the Form, that he move the full site (navigation, content, footer..) down.. but he should overlay the Form.

    Do you know why?

    # April 27, 2010 at 1:16 pm

    Change ‘position: fixed’ to ‘position: absolute’ on your #loginform. I think that should work.

    # April 30, 2010 at 3:29 pm

    No, not really. With position: absolute; its on the right side of the loginform.
    I also tried it to position it relative but it ended with the same "effect"..

    And when i position it with absolute and move it with top:, right:.. the "area" with the submit button and the links isnt inside it.

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

You must be logged in to reply to this topic.

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