Thread: CSS Forms Issue

    #1
  1. No Profile Picture
    Banned
    Devshed Demi-God (4500 - 4999 posts)

    Join Date
    Apr 2005
    Posts
    4,934
    Rep Power
    0

    CSS Forms Issue


    I'm trying hard to converting some forms to css from tables. They look good in IE but issues in FF.

    What am I doing wrong?

    In Firefox:


    In Internet Explorer:


    Here's the code:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    	<title>Untitled</title>
    	<link type="text/css" media="screen, projection" rel="stylesheet" href="./css/buffet_review_boxes.css">
    	<style type="text/css">
    		form {  
    		  font:100% verdana,arial,sans-serif;
    		  margin: 0;
    		  padding: 0;
    		  min-width: 500px;
    		  max-width: 600px;
    		  width: 560px; 
    		}		
    		form fieldset {
    		  border-color: #000;
    		  border-width: 1px;
    		  border-style: solid;
    		  padding: 10px;      
    		  margin: 0;
    		}		
    		form label { 
    		  display: block;  
    		  float: left; 
    		  width: 150px; 
    		  padding: 0; 
    		  margin: 5px 0 0; 
    		  text-align: right; 
    		}
    	</style>
    </head>
    <body>	
    <h2>Login:</h2>
    Please enter your login and password.
    <form name="form1" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
    <label for="login">Login:</label>
    <input type="text" name="login" size="20" value=""><br>
    <label for="password">Password:</label>
    <input type="password" name="password" size="8" value=""><br>
    <label for="remember">Remember login?</label>
    <input type="checkbox" name="remember" value="yes">
    <br>
    <input type="submit" name="Submit" value="Login">
    </form>
    <br /><br />Not registered yet? <a href="./register.php">Click here.</a>
    <br /><br /><a href="./forgot_password.php">Forgot your password?</a>
    <br /><br /><a href="login_local.php">Login with messages according user's language settings </a><br>(only for users with a profile)
    </body>
    </html>
  2. #2
  3. Retired
    Devshed Supreme Being (6500+ posts)

    Join Date
    Feb 2002
    Location
    Finland
    Posts
    9,115
    Rep Power
    2498
    This makes it look more alike in Fx and Ie...
    css Code:
    <style type="text/css">
    		form {  
    		  font:100% verdana,arial,sans-serif;
    		  margin: 0;
    		  padding: 0;
    		  min-width: 500px;
    		  max-width: 600px;
    		  width: 560px;
    		}		
    		form fieldset {
    		  border-color: #000;
    		  border-width: 1px;
    		  border-style: solid;
    		  padding: 10px;      
    		  margin: 0;
    		}		
    		form label { 
    		  display: inline;  /* Changed */
    		  float: left; 
    		  width: 150px; 
    		  padding: 0; 
    		  margin: 5px 0 0; 
    		  text-align: right; 
    		}
            input {display:block; margin-left: 165px;} /* This is new <img src="http://images.devshed.com/fds/smilies/smile.gif" border="0" alt="" title="Smilie" class="inlineimg" /> */
    	</style>


    Still not really tidy, but should give you an idea....

    Cheers,
    Jamie

    >_ My Music Blog | Losing weight @notsoheavyblog | My Tweets

    __________________

    Let the might of your compassion arise to bring a quick end
    to the flowing stream of the blood and tears .....
    Please hear my anguished words of truth.

    __________________
  4. #3
  5. No Profile Picture
    Banned
    Devshed Demi-God (4500 - 4999 posts)

    Join Date
    Apr 2005
    Posts
    4,934
    Rep Power
    0
    Opps... I did forget the input tags, didn't I...

    Why the change of the label from block to inline? What is the net effect?
    Last edited by Arty Ziff; October 1st, 2006 at 09:02 PM.
  6. #4
  7. Retired
    Devshed Supreme Being (6500+ posts)

    Join Date
    Feb 2002
    Location
    Finland
    Posts
    9,115
    Rep Power
    2498
    Easy to understand example here.

    Originally Posted by w3schools
    block
    The element will be displayed as a block-level element,
    with a line break before and after the element

    inline
    The element will be displayed as an inline element,
    with no line break before or after the element
    HTH.

    Comments on this post

    • Arty Ziff agrees

    Cheers,
    Jamie

    >_ My Music Blog | Losing weight @notsoheavyblog | My Tweets

    __________________

    Let the might of your compassion arise to bring a quick end
    to the flowing stream of the blood and tears .....
    Please hear my anguished words of truth.

    __________________

IMN logo majestic logo threadwatch logo seochat tools logo