SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2011
    Location
    India
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Browser Issue...

    Dear All,

    I am making login form when I am testing it on Google Chrome It is working fine I am attaching images and Code for your reference, please help me out how I can fix this error in my css or in HTML. I also want to align my Check Box text in to Middle it is coming in bottom I used vertical align property but its not working, or if you have any another way to make it easy please help me out..

    Below are HTML:
    <div class="login_dtls1">
    <form action="" id="loginform" method="post">
    <fieldset>
    <legend> Partner / Client Login: </legend>
    <label>
    <input type="text" value="user name/Email:" onfocus="if(this.value=='user name/Email:') this.value='';" onblur="if(this.value=='') this.value='user name/Email:'"/>
    <input type="text" value="password:" onfocus="if(this.value=='password:') this.value='';" onblur="if(this.value=='') this.value='password:'"/>
    <input name="gobutton" type="image" src="go_button.png" class="go_botton" /> <br />
    <input type="checkbox" id="rem_pass" name="top1" value="remember_password" />remember password
    <span> <a href="#"> forgot password </a></span>
    <br />
    </label>

    </fieldset>

    </form>


    </div>

    Below are CSS:

    .login_dtls1{width:320px; height:77px; float:left; margin:5px 0 8px 30px; clear:both; }

    #loginform {margin: 0 auto;}
    #loginform fieldset {border:2px solid #999999; width:280px; height:63px; margin: 0 0 0 20px; background:url(Login%20form_bg.jpg) repeat-x;}
    #loginform legend {color:#fff; background:#4b5360;border:2px outset #f8f6f7; padding: 2px 5px 2px 5px; font-weight:normal; font-size: 12px;}
    #loginform label{font-size:10px; color:#fff; height:200px;}
    #loginform label span {padding-left:25px; }
    #loginform label span a { color:#fff; text-align:right; text-decoration:none; }

    #loginform input {color:#666; font-weight:normal; text-transform:lowercase; font-size:12px; border: 1px solid #333333; padding-left:3px; width:110px; margin-top:5px; }
    #loginform label .go_botton { float:right; margin:0 0 0 0px; padding:0; width:30px; height:30px; border:none; }

    #loginform #rem_pass{width:auto; height:auto;}


    prntscr_firefox.jpg
    prntscr_Gchrm.jpg
    prntscr_IE-8.jpg

    waiting for early replies..
    Thanx in advance..

    Warm Regards

  2. #2
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Hi Shahzad,

    I'm pretty sure you're not allowed to do this:

    <label>
    <input...>
    <input...>
    <randomstuff>
    </label>

    By the way, good job on using a fieldset and legend! Too often I see people forget how to use those and use something inappropriate instead.

    You want your form to be accessible and make sense, right? I don't like relying on Javascript and input value to show label text, but assuming you want to stick with that, I would do:

    Code:
    <form action="" id="loginform" method="post">
    <fieldset>
    <legend> Partner / Client Login: </legend> 
    
    <label for="username-email">Username or Email: <label>
    <input type="text" id="username-email" value="user name/Email:" onfocus="if(this.value=='user name/Email:') this.value='';" onblur="if(this.value=='') this.value='user name/Email:'"/>
    
    <label for="password" aria-describedby="forgotpw">Password: </label>
    <input type="text" id="password" value="password:" onfocus="if(this.value=='password:') this.value='';" onblur="if(this.value=='') this.value='password:'"/>
    <a href="#" id="forgotpw"> forgot password? </a>
    
    <label for="rem_pass" class="checkbox">
      <input type="checkbox" id="rem_pass" name="top1" value="remember_password" /> <span>remember password</span>
    </label>
    
    <input type="image" src="go_button.png" alt="Go" />
    </fieldset>
    </form>
    So stuff in bold is stuff I'd change in the HTML. Each input gets its very own dedicated label which is still invaluable for people using text browsers and screen readers. Since most of your users will be sighted and using graphical browsers, you hide those labels by pulling them offscreen. That way, you have proper labels but can keep using your Javascript placeholders like you have now.
    Also I've added aria-describedby. I'm not sure if this is the right way to do it, but since the anchor isn't a form control, it may get skipped by screen readers who go into a "Forms Mode" where users can type into the forms. I'm hoping using aria-describedby here means those users will get alerted to a related bit of text, the "forgot password" link. Another idea would be to put the link inside the label, still hide the label text but just show the anchor who is inside. Stuff inside form controls like labels are okay in screen readers so you'd be good then. Just needs a bit of funky CSS.

    For the checkbox, I seem to recall that you can get most browsers to look ok with vertical-align but IE has these "other ideas" about vertical-align so we might not be able to get them lined up great in IE, but we can for everyone else. I think the trick was to set both inline elements to "vertical-align: middle" rather than just one of them. Also be careful if you set one font-size on the label and another on inputs (since this would include your checkbox).

    Also, input type=image need alt (instead of value which normal submits have), so when your button image doesn't load, people see the text "Go" instead of nothing at all. The validator will tell you this anyways.

    Your images aren't approved at this time so I can't see how you want the layout to be, exactly, but I can write some CSS for this new HTML I wrote that should at least look normal. Once I see your attachments then I could probably tweak the CSS to look more like you're trying to do.

    Code:
    .login_dtls1{width:320px; min-height:77px; float:left; margin:5px 0 8px 30px; clear:both; }
    (min-height means, if the user has larger fonts set, if that makes the form taller then the .login_dtls1
    box can grow too)
    
    #loginform {margin: 0 auto;}
    #loginform fieldset {border:2px solid #999999; width:280px; min-height:63px; margin: 0 0 0 20px; background:url(Login%20form_bg.jpg) repeat-x;}
    #loginform legend {color:#fff; background:#4b5360;border:2px outset #f8f6f7; padding: 2px 5px 2px 5px; font-weight:normal; font-size: 12px;}
    
    #loginform label{position: absolute; left: -999em;} (this hides your new labels from the screen)
    
    #loginform input[type=text] {color:#666; font-weight:normal; text-transform:lowercase; font-size:12px; border: 1px solid #333333; padding-left:3px; width:110px; margin-top:5px; }
    
    (we don't want the checkbox label hidden though)
    #loginform label.checkbox {position: static;}
    #loginform label span {padding-left: 25px; font-size: 10px; vertical-align: middle;}
    #loginform .checkbox input {width: auto; height: auto; vertical-align: middle;}
    
    (forgot password link)
    input+a { color:#fff; text-align:right; text-decoration:none; }
    
    #loginform input[type=image] { float:right; margin:0 0 0 0px; padding:0; width:30px; height:30px; border:none; }
    The above CSS won't work in IE6 because it uses attribute selectors (input[type=text] etc) and adjascent sibling selector (+) but if you have to support IE6 too then you can remove the type=text from the input declaration and might need extra code to help the checkbox. For the + selector you could instead just use the new id I've added to the anchor. I only added the id so it would work with aria-describedby but if you decide instead to put the link in a label you won't need an id on it anyways.

    I hope something like this will work for you. I haven't built it myself so it's all just code from my head.

    In the future if you want to post code like I did, wrap [code] tags around your code and the forums will format it for you.

    cheers,
    poes


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •