www.webdeveloper.com
Results 1 to 7 of 7

Thread: Form positioning problem in firefox

  1. #1
    Join Date
    Oct 2005
    Posts
    6

    Form positioning problem in firefox

    Hi there,

    I'm having problems with a orm position in firefox. It renders correctly in IE. Its driving me mad. my is the page link:

    http://myweb.tiscali.co.uk/snapandshare/register.htm

    here is the html page:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html>
    
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
    <title>Snap &amp; Share</title>
    <!-- function used to load different CSS depeding on browser to solve positioning problems-->
    <script type="text/javascript" language="JavaScript" src="javaScript/browser_detect.js"></script>
    <link href="css/forms.css" rel="stylesheet" type="text/css" media="all" />
    </head>
    
    <body>
    
    <div id="outer">
    
      <div id="header"></div>
    
      <div id="menu"><h1><a href="home.htm">Home 		</a><a href="register.htm">Register		</a><a href="search.htm">Search friend		</a><a href="">About</a></h1></div>
    
       <div class="page">
    
    		<div class="section">
    
    			<!-- start of the column 1 where main dynamic content will change-->
    
    
    
    		  <div class="col-A"> 
    			<div class="col-A-topcap"></div>
    			<div class="col-A-center"> 
    			  <form action="emptyref" method="get" id="regForm" name="regForm">
    					<fieldset>
    					<legend>User Registration</legend>
    					<label for="firstName">First Name</label>
    					<input class="formInputField" type="text" name="firstName" id="firstName" maxlength="15" tabindex="1" />
    					<br/>
    					<label for="lastName">Last Name</label>
    					<input class="formInputField" type="text" name="lastName" id="lastName" maxlength="15" tabindex="2" />
    					<br/>
    					<label for="email">Email Addr.</label>
    					<input class="formInputField" type="text" name="email" id="email" tabindex="3" />
    					<br/>
    					<label for="pass1">Password</label>
    					<input class="formInputField" type="password" name="pass1" id="pass1" tabindex="4" />
    					<br/>
    					<label for="pass2">Confirm Password</label>
    					<input class="formInputField" type="password" name="pass2" id="pass2" tabindex="5" />
    					</fieldset>
    			  </form>
    			</div>
    			<div class="col-A-bottom"></div>
              </div>
    
    			<!--This column contains login and advertsiments and other needed-->
    
    
    
    		  <div class="col-B"> 
    			<div class="col-B-block"> 
    			  <div class="col-B-topcap"></div>
    			  <div class="col-B-center">col B upper</div>
    			  <div class="col-B-bottom"></div>
    			</div>
    			<div class="col-B-block"> 
    			  <div class="col-B-topcap"></div>
    			  <div class="col-B-center">col B lower</div>
    			  <div class="col-B-bottom"></div>
    			</div>
    		  </div>
    
    			<!--This column does not appear. width is set to 0. Is here just to support browser inconsistsences-->
    
    
          	  <div class="col-C"></div>
    
    		  <div class="clear"></div>
    
          	</div>
    
       </div>
    
       <div id="footer">&copy; A.Sabnis G.Cornwell Development</div>
    
    </div>
    
    </body>
    </html>
    and here is the CSS file for its layout:
    Code:
    /*HTML selectors all at the top of this doc. Adjust according to page change*/
    body {
    	background-image: url(../images/body_bg.gif);
    	background-position: 50% 0%;
    	background-repeat: repeat-y;
    	margin: 0px;
    	padding: 0px;
    	background-color: #EEE
    }
    
    h1 {
    	font-family: 'Monotype Corsiva', 'Lucida Handwriting', cursive;
    	color: #FFFFFF;
    }
    
    /*link appearence for page*/
    a {
    	color: #FFFFFF;
    	text-decoration: none;
    }
    
    a:hover {
    	color: #647C9C;
    }
    
    a:active {
    	color: #647C9C;
    	text-transform: capitalize;
    }
    
    /*ID selectors are next to be listed. These control the structure of the page. ie.header -> conetent -> footer, etc*/
    #outer {
    	width: 773px;
    	margin-left: auto;
        margin-right: auto;
    }	
    
    #header {
    	background-image: url(../images/header2.jpg);
    	text-align: center;
    	margin-left: auto;
    	margin-right: auto;
    	height: 175px;
    	width: 770px;
    
    }
    
    #menu {
    	background-image: url(../images/navbar.jpg);
    	margin-top: -20px;
    	text-align: center;
    	margin-left: auto;
    	margin-right: auto;
    	height: 57px;
    	width: auto;
    	border-top: none;	
    }
    
    #footer {
    	background-image: url(../images/footer_bg.jpg);
    	text-align: center;
    	margin-left: auto;
    	margin-right: auto;
    	height: 25px;
    	width: auto;	
    }
    
    
    /*following code sections out the columns*/
    .page {
    	width: auto;
    	border-left: 550px solid #FFF;
    	border-right: 0px solid #993399;
    	border-top: 0px solid #FFF;	
    }
    
    .section {
    	margin: 0;
    	width: 100%;
    }
    
    .col-A, .col-B, .col-C {
    	position: relative;
    	float: left;
    }
    
    .col-A {
    	margin-left: -550px;
    	margin-right: 1px;
    	width: 550px;
    	z-index: 2;
    }
    
    .col-B {
    	margin: 0 -3px 0 -2px;
    	width: auto;
    }
    
    .col-C {
    	color: white;
    	margin-left: 0px;
    	width: 0px;
    }
    
    /*stop coloumn overlapping*/
    .clear {
    	clear: both;
    }
    
    .page > .section {
    	border-bottom: 1px solid #FFFFFF;
    }
    
    /*graphical backgrouds for column A with expanding center */
    .col-A-topcap {
    	background-image: url(../images/col_top.jpg);
    	width: 550px;
    	height: 115px;
    	z-index: 1;
    }
    
    .col-A-center {
    	background-image: url(../images/col_middle.jpg);
    	/*background-color: #330033;*/
    	display: block;
    	text-align: center;
    	width: 550px;
    	height: auto;
    	z-index: 1;
    }
    
    .col-A-bottom {
    	background-image: url(../images/col_bottom.jpg);
    	width: 550px;
    	height: 143px;
    	z-index: 1;
    }
    
    /*Layer's for column B - include adbanners, login, friends list. */
    
    .col-B-block {
    	display: block;
    	text-align: center;
    	background-color: #330033;
    	float: left;
    	width: 220px;
    	height: auto;
    }
    
    .col-B-topcap {
    	background-image: url(../images/side_colB_top.jpg);
    	width: 220px;
    	height: 65px;
    	z-index: 1;
    }
    
    .col-B-center {
    	background-image: url(../images/side_colB_middle.jpg);
    	width: 220px;
    	height: auto;
    	z-index: 1;
    }
    
    .col-B-bottom {
    	background-image: url(../images/side_colB_bottom.jpg);
    	width: 220px;
    	height: 70px;
    	z-index: 1;
    }
    Oh, and here is the CSS for form styling:
    Code:
    fieldset {
    	color: #666666;
    	font: 0.8em 'Monotype Corsiva', 'Lucida Handwriting', cursive;
    	background-color: #EFEFEF;
    	order: solid 1px #D3D3D3;
    	width: 450px;
    		
    }
    
    legend {
    	color: #666;
    	font-family: 'Monotype Corsiva', 'Lucida Handwriting', cursive;
    	background-color: #D3D3D3;
    	padding: 2px;
    }
    
    label {
    	font-weight: bold;
    	line-height: normal;
    	text-align: right;
    	display: block;
    	margin-right: 10px;
    	position: relative;
    	width: 120px;
    	float: left;
    }
    Please help me!! Thanks

    bagatrix.

  2. #2
    Join Date
    Oct 2005
    Location
    Hoffman Estates, IL
    Posts
    12
    Here's where I believe your problem lies (code shortened)...

    fieldset {
    width: 450px;
    }

    label {
    width: 120px;
    }

    However, in the following XHTML markup, I see a class defined (formInputField) but no style for that class in the CSS anywhere:

    <input class="formInputField" type="text" name="firstName" id="firstName" maxlength="15" tabindex="1" />

    What's probably happening here is that
    (a) you forgot to include this code and what I'm about to say is irrelevant
    (b) because you're not setting a width for the input fields, the text doesn't know what to align itself with. I'd say set it so the <label> and <input> both have sizes that, when added, almost or exactly total the number of pixels in any given form row. The text should then align itself to the left side of the input box as you want.

    If there's missing code, please post it so myself and others can help you fully solve your problem Hope this helps!

  3. #3
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Try form {margin:0;}
    and "b" typo in border
    Code:
    fieldset {
    	color: #666666;
    	font: 0.8em 'Monotype Corsiva', 'Lucida Handwriting', cursive;
    	background-color: #EFEFEF;
    	border: solid 1px #D3D3D3;
    	width: 450px;
    Last edited by Fang; 11-17-2005 at 01:02 PM.
    At least 98% of internet users' DNA is identical to that of chimpanzees

  4. #4
    Join Date
    Oct 2005
    Posts
    6
    Ok guys, Thanks for the prompts replies. I tried both your suggestions, and it hasn't solves the left aligining problem for the form fieldset. Here's the full form.css that you havent seen:

    Code:
    fieldset {
    	color: #666666;
    	font: 0.8em 'Monotype Corsiva', 'Lucida Handwriting', cursive;
    	background-color: #C7E1E1;
    	border: solid 1px #667EA2;
    	width: 450px;		
    }
    
    form {
    	margin:0;
    }
    
    legend {
    	color: #666;
    	font-family: 'Monotype Corsiva', 'Lucida Handwriting', cursive;
    	font-size: medium;
    	background-color: #C7E1E1;
    	padding: 2px;
    }
    
    label {
    	font-weight: bold;
    	line-height: normal;
    	text-align: right;
    	display: block;
    	margin-right: 10px;
    	position: relative;
    	width: 120px;
    	float: left;
    }
    
    label.fieldLabel {
    	display: inline;
    	float: none;
    }
    
    input.formInputField {
    	border: solid 1px #667EA2;
    	background-color: #FFFFFF;
    	color: #333;
    	margin-right: 5px;
    	margin-bottom: 5px;
    	padding: 2px;
    	height: 15px;
    }
    See wot u think. thanks

    bagatrix.

  5. #5
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Add margin-bottom:-1px; to .col-A-center and change:
    Code:
    form {
        margin:0;
    }
        
    fieldset {
        color: #666666;
        font: 0.8em 'Monotype Corsiva', 'Lucida Handwriting', cursive;
        background-color: #EFEFEF;
        order: solid 1px #D3D3D3;
        width: 450px;
            margin:0 auto;
    }
    btw use conditional comments to deliver css to browsers, not JavaScript
    At least 98% of internet users' DNA is identical to that of chimpanzees

  6. #6
    Join Date
    Oct 2005
    Posts
    6

    Different form widths with the same CSS

    Much respect Fang, Problem solved - thank for ur help. Another quick question:

    I'm try to style a login form on a page using the same form.css file. how can I change the width of the the login form. Do can create a 2nd fieldset tag? please look att the page. The login is too wide:

    http://myweb.tiscali.co.uk/snapandshare/home.htm

  7. #7
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    It is more convienient to use the form id, #login in this case, to define the width. The fieldset will expand to fit the form.
    At least 98% of internet users' DNA is identical to that of chimpanzees

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles