8 Replies - 554 Views - Last Post: 25 July 2014 - 03:46 PM

#1 CTphpnwb  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3079
  • View blog
  • Posts: 10,796
  • Joined: 08-August 08

Formatting form input

Posted 25 July 2014 - 09:29 AM

This HTML and CSS works on some browsers like FireFox, but on others like Safari and Chrome I get the attached image.
HTML:
<!DOCTYPE html>
<html lang="en-US">
	
	<head>
		<meta charset="UTF-8" />
		<title>example</title>
		<link rel='stylesheet' id='main-styles-css'  href='./styles.css' type='text/css' media='all' />
	</head>
	
	<body class="bod">
		<h2 class="center_header">Welcome</h2>
		
		<div class="welcome two_columns_right">		
			<form method="post">								
					Email Address:<br>
					Password:<br>
					Repeat password to register:<br>
					Sponsor ID:<br>
					<br>		

					<input class="welcomeTextbox" type="text" name="user" value=""><br>
					<input class="welcomeTextbox" type="password" name="pass" value=""><br>
					<input class="welcomeTextbox" type="password" name="pass2" value=""><br>
					<input class="welcomeTextbox" type="text" name="spons" value=""><br>
					<input text-align="center" type="submit" name="reg" value="Login">
						
			</form>
		</div>
		
		 
	</body>
</html>

CSS:
.welcome {
		position: fixed;
		top: .8in;
		left: .1cm;
		width: 98%;
		max-width:2.9in;
		max-height: 2.8cm;
		margin-left:1%;
		padding: .05cm;
		background-color: #ffaa88;

		-webkit-column-count: 2; /* Chrome, Safari, Opera */
		-moz-column-count: 2; /* Firefox */
		column-count: 2;
	
	
}

	.welcomeTextbox {
		width: 3.2cm;
		height: .3cm;
		padding: .01cm;
		float: left;
    	clear: left;
	}

.center_button {
		height:12pt;
		}

.center_header {
	  text-align:center;
	  font-size:28pt;
	  color:navy;
	  }

.bod {
	background-color: #777777;
	width:100%;
	max-width:2.9in;
}

.two_columns_right {

		-webkit-column-count: 2; /* Chrome, Safari, Opera */
		-moz-column-count: 2; /* Firefox */
		column-count: 2;
		
		text-align:right;
		
		border:1pt solid navy;
		}


.three_columns_center {

		-webkit-column-count: 3; /* Chrome, Safari, Opera */
		-moz-column-count: 3; /* Firefox */
		column-count: 3;
		text-align:center;
		}

		
.four_columns_right {

		-webkit-column-count: 4; /* Chrome, Safari, Opera */
		-moz-column-count: 4; /* Firefox */
		column-count: 4;
		}

Attached image(s)

  • Attached Image


Is This A Good Question/Topic? 0
  • +

Replies To: Formatting form input

#2 astonecipher  Icon User is offline

  • D.I.C.
  • member icon

Reputation: 768
  • View blog
  • Posts: 3,358
  • Joined: 03-December 12

Re: Formatting form input

Posted 25 July 2014 - 10:38 AM

I know this is of no help, I have never seen spillage like that before. What browser is the image from?
Was This Post Helpful? 0
  • +
  • -

#3 CTphpnwb  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3079
  • View blog
  • Posts: 10,796
  • Joined: 08-August 08

Re: Formatting form input

Posted 25 July 2014 - 10:42 AM

Both Safari and Chrome. Must be a webkit flaw.
Was This Post Helpful? 0
  • +
  • -

#4 andrewsw  Icon User is online

  • It's just been revoked!
  • member icon

Reputation: 3741
  • View blog
  • Posts: 13,090
  • Joined: 12-December 12

Re: Formatting form input

Posted 25 July 2014 - 10:59 AM

Do you notice that the font used, and font rendering, is different in each browser? You might want to specify a font-family and size.

If you will be using inches/cm's you might also consider using css-reset to remove all the browser-specific (defaulted) settings. Use the reset, remove all the metrics you have set, and apply and test them incremently.

However, the generally accepted consensus is that these units should not be used:

Quote

Inches (in) and Centimeters (cm)

Use with: print stylesheets, especially page margins
Donít use for: anything else.


You might already be discovering why.. ;)

The CSS physical unit problem
Was This Post Helpful? 1
  • +
  • -

#5 CTphpnwb  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3079
  • View blog
  • Posts: 10,796
  • Joined: 08-August 08

Re: Formatting form input

Posted 25 July 2014 - 11:08 AM

Thanks. We'll look into those.

I would say that you can use inches/centimeters when you want things to be the same size on any device, regardless of the screen size. Or is there a reason beyond possibly overflowing a screen that he recommends not using them? Similarly, I don't see what he has against pt.

Oh, I just saw your last link. :stupid: I see it now.
Was This Post Helpful? 0
  • +
  • -

#6 andrewsw  Icon User is online

  • It's just been revoked!
  • member icon

Reputation: 3741
  • View blog
  • Posts: 13,090
  • Joined: 12-December 12

Re: Formatting form input

Posted 25 July 2014 - 11:25 AM

I added that last link after a brief delay ;) .. it wasn't there before!

Basically, centimetres aren't centimetres :dontgetit:
Was This Post Helpful? 0
  • +
  • -

#7 andrewsw  Icon User is online

  • It's just been revoked!
  • member icon

Reputation: 3741
  • View blog
  • Posts: 13,090
  • Joined: 12-December 12

Re: Formatting form input

Posted 25 July 2014 - 01:38 PM

To be honest though, I doubt that you should be using column-count for this. I assume that you want to align the text on the left with the inputs on the right? This won't work reliably, or consistently, especially cross-browser. column-count is for snaking-columns.

http://css-tricks.co...ties/c/columns/

Specifically, the height of the columns is auto-balanced and makes no attempt to align text across the columns.

If you want to use CSS3 features specifically then you might consider display with table values, but a good layout for the form can be achieved with regular (CSS2) properties.
Was This Post Helpful? 1
  • +
  • -

#8 CTphpnwb  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3079
  • View blog
  • Posts: 10,796
  • Joined: 08-August 08

Re: Formatting form input

Posted 25 July 2014 - 03:34 PM

That should work. I knew I was missing something!
Was This Post Helpful? 0
  • +
  • -

#9 andrewsw  Icon User is online

  • It's just been revoked!
  • member icon

Reputation: 3741
  • View blog
  • Posts: 13,090
  • Joined: 12-December 12

Re: Formatting form input

Posted 25 July 2014 - 03:46 PM

No worries. I just wanted to outline an approach to aligning text next to form-inputs:

  • Give the form (or its container) a fixed-width.
  • Use labels next to each input.
  • Use display: inline-block on all these labels and inputs. This behaves better than floating them.
  • Give the labels a set width; the adjacent inputs (on their right) will then align properly.
  • Avoid br-tags (generally..!). If the form is given an appropriate width - slightly wider than the maximum for a label+input pair (accounting for any margins and padding as well) - then the following label+input will drop below.

For the submit button I would place it within a div (or a label with display: block if there will be adjacent text) and then use text-align: right to move the button to the right (of the form). padding-right (or similar) can then be used to bring the button further to the left, away from the form-edge.

Floating the button is another option, but I prefer putting it in a div.

Sorry to waffle on ;)

This post has been edited by andrewsw: 25 July 2014 - 03:47 PM

Was This Post Helpful? 1
  • +
  • -

Page 1 of 1