• Locked
4 replies [Last post]
Thu, 2013-06-13 21:33
winterfell
winterfell's picture
Offline
newbie
Last seen: 9 years 50 weeks ago
Timezone: GMT-6
Joined: 2013-06-03
Posts: 4
Points: 8

Hi everyone, thanks for helping.

My goal here is to get my login form to correctly position on at least three browsers :
1. Safari for Mac.
2. Firefox.
3. Internet Explorer for Windows.
and Chrome.

I would prefer if it would work correctly for all browsers but that may not be possible ?

Here's the two specific problems I'm having :

Centering the entire form.

1. I'd like the entire form to be centered and auto recenter when the browser is resized.
Not sure what I'm doing wrong. I had a version that did center and stay in the center on browser resize in Safari for Mac but it did not
recenter in Firefox. I've since changed that version so now I don't know how I even did that.
Please understand I am not talking about centering what's inside the form. I'm talking about the entire form being centered, then recentered when the browser window size is changed.

2. The textfields don't resize if the browser window is made smaller. The textfields go off the right side of the browser window instead of shrinking their width to fit in the browser window.
I'd like it to resize smaller and properly fit in the now resized browser window.

I've searched on the net and even the form example shown here :
http://gtwebdev.com/workshop/forms/form.php

Looks different in Safari vs. Firefox?

Safari appears to be laying out the page more correctly except that there's two columns of texfields which doesn't seem correct to me. If so, I'd say it's bad design.

Firefox has one column of textfields which is what is expected but it's bordering of the form looks wrong and unprofessional. For example, the green separator line appears INSIDE the form's outline which is obviously wrong.

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.centerall { text-align:center; width: 320px; }
 
 
table.test td {
    background-color: white;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    white-space: nowrap;
}
table.test { text-align:center;
    border-collapse: separate;
    border-spacing: 2px;
}
 
 
</style>
</head>
 
<body width:auto;>
<div class ="centerall">
<form name ="input" action="#" method="post"  width="200px" height="44px">
<fieldset><legend>LOGIN</legend> 
<table class="test">
    <tr>
    		<td style="width: 50px;text-align:right;">User ID :</td>
		<td><input type="text" name="user_id"  size="35" > </td>
    </tr>
 
    <tr>
    		<td style="width: 50px; text-align:right;">Password :</td>
		<td><input type="password"  name="user_pwd" size="35"></td>
    </tr>
    <tr><td> </td>
        <td><input type="submit" value="LOGIN" ></td> 
    </tr>
</table></fieldset></form>
</div>
 
 
 
</body>
</html>

I've validated my CSS code and it checked out but I know I must be missing stuff since I'm new to this.

Thanks.

Top
Tags:
Fri, 2013-06-14 00:03
#1
gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 2 years 12 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Since the form has a defined

Since the form has a defined width, centering should be trivial.

<form name ="input" 
      action="#" 
      method="post"  
      width="200px" 
      height="44px">

Before proceeding, note this from the specs:
Quote:

name = cdata [CI]
This attribute names the element so that it may be referred to from style sheets or scripts. Note. This attribute has been included for backwards compatibility. Applications should use the id attribute to identify elements.

Emphasis added.

Change the name attribute to id. You should also delete the height and width attributes and use css to set the dimensions.

Center using the margin property.

#input {
  margin: 0 auto;
  width: 200px;
  }
Note that the form element has 1em top and bottom margins by default. Adjust your values according to need. It is normally a good practice to let the content determine the container's height.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Top
Fri, 2013-06-14 01:27
#2
winterfell
winterfell's picture
Offline
newbie
Last seen: 9 years 50 weeks ago
Timezone: GMT-6
Joined: 2013-06-03
Posts: 4
Points: 8

Hi Gary, thank you for your

Hi Gary, thank you for your help.

Sadly I don't understand what you've written nor do I understand how to exactly apply it.

I know some of the differences between .class and #id but this is all new to me and it's a lot of information to learn, remember then apply.

I must be forgetting some information.

I don't know what : name = cdata [CI] means and I don't recall seeing it in any of the lessons I've read but maybe I forgot?

I'm also having trouble finding short but effective question answer type information on CSS which is what I seem to be needing during development.

I've tried to do what you suggested but it didn't work so I know I made at least one mistake.

After your suggestions what would my code look like?

Could you please post the modified version because I don't get it Sad

Thank you very much for your help.

Also, could you please recommend some good tutorials that are direct to the point on learning CSS?
I will take a look at your linked suggestion.

gary.turner wrote:

Since the form has a defined width, centering should be trivial.

<form name ="input" 
      action="#" 
      method="post"  
      width="200px" 
      height="44px">

Before proceeding, note this from the specs:
Quote:

name = cdata [CI]
This attribute names the element so that it may be referred to from style sheets or scripts. Note. This attribute has been included for backwards compatibility. Applications should use the id attribute to identify elements.

Emphasis added.

Change the name attribute to id. You should also delete the height and width attributes and use css to set the dimensions.

Center using the margin property.

#input {
  margin: 0 auto;
  width: 200px;
  }
Note that the form element has 1em top and bottom margins by default. Adjust your values according to need. It is normally a good practice to let the content determine the container's height.

cheers,

gary

Top
Fri, 2013-06-14 02:08
#3
winterfell
winterfell's picture
Offline
newbie
Last seen: 9 years 50 weeks ago
Timezone: GMT-6
Joined: 2013-06-03
Posts: 4
Points: 8

reply

EDIT EDIT.

Ok, here's what I got so far and in Safari it appears to be working as I want but in Firefox it doesn't seem to be working correctly yet since the form is not moving to the left enough when the browser is resized.
So in FireFox the right side of the browser window is chopping off the right side of the form while there is still a lot of room on the left that the form SHOULD move to and hug the left wall of the browser.
In FireFox, the left wall of the form only hits the left wall of the browser AFTER it's chopped off the right side of the form.

Strange.

The reason why I want to get this working correctly (and understand it) in FF and other browsers is to accommodate portable small screens such as the iPhone, Android devices, etc.

Any ideas on how to get this working correctly and where can I learn how to do this properly? I'm just guessing at what's going on and what CSS to write....

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
 
.centerall { text-align:center; width: auto; }
 
 
table.test td {
    background-color: white;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    white-space: nowrap;
}
table.test { text-align:center;
    border-collapse: separate;
    border-spacing: 2px;
}
 
#input {
  margin: 0 auto;
  width: 380px;
}
 
 
 
</style>
</head>
 
<body width:auto;>
<div class ="centerall">
<form id ="input" action="" method="post" >
<fieldset><legend>LOGIN</legend> 
<table class="test">
    <tr>
    		<td style="width: 50px;text-align:right;">User ID :</td>
		<td><input type="text" name="user_id"  size="35" > </td>
    </tr>
 
    <tr>
    		<td style="width: 50px; text-align:right;">Password :</td>
		<td><input type="password"  name="user_pwd" size="35"></td>
    </tr>
    <tr><td> </td>
        <td><input type="submit" value="LOGIN" ></td> 
    </tr>
</table></fieldset></form>
</div>
</body>
</html>

Thank you very much Gary!

Top
Fri, 2013-06-14 04:18
#4
gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 2 years 12 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Overflow is the culprit

Reduce the size of the input elements. They are overflowing the explicit width of the form. Try size="20" as a starting point. E.g. 

<input type="text" 
       name="user_id"  
       size="20">

Better yet, don't state a size at all. Let the browser handle the flow.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Top
  • Locked