42 users online (2 members and 40 guests)  


  Results 1 to 2 of 2

Related

  1. Replies: 1
  2. Replies: 4
  3. Firefox CSS troubles    Forum: CSS Forum
    Replies: 6
  4. Firefox problems    Forum: CSS Forum
    Replies: 0
  1. #1
    Richardf's Avatar
    New User

    Status
    Offline
    Join Date
    Sep 2006
    Posts
    7

    CSS form problems with firefox but not IE

    Hi there,

    Iíve created the following form using CSS, however. I am trying to get the submit button to line up with the message box. Unfortunately, I can get it to work in IE, but not firefox or opera. When I change the code so that it works in firefox, it doesnít work in IE.


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    </head>

    <style type="text/css">

    .submit {
    color: #FFFFFF;
    background: #000066;
    margin-left: 10em;
    border: thin solid #00CCFF;
    }
    form {
    text-align: left;
    }

    label {
    display: block;
    float: left;
    width: 10em;
    text-align: left;
    }

    </style>

    <body>

    <form method="post" action="dummy">
    <label for="namecu">Name</label>
    <p>
    <input type="text" name="namecu" />
    </p>
    <p>&nbsp;</p>
    <label for="uremailcu">Your Email</label>
    <p>
    <input type="text" name="urmemailcu" />
    </p>
    <p>&nbsp;</p>
    <label for="urmessagecu">Your Message</label>
    <p>
    <textarea name="urmessagecu" rows="10">Please type your message here</textarea>
    </p>
    <p>&nbsp;</p>
    <input type="submit" value="Submit" class="submit" />
    <p>&nbsp;</p>
    </form>


    </body>
    </html>

  2. #2
    DeadMeatGF's Avatar
    Moderator

    Status
    Offline
    Join Date
    Sep 2005
    Posts
    381

    Re: CSS form problems with firefox but not IE

    Someone may have a more elegant solution, or an explanation, but I just added:
    <label for="submit">&nbsp</label>
    and assigned the name of "submit" to the button, then removed the margin from the class.



Tags for this Thread