Why elements are over my input fields when float them right in Firefox

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • Stephan Ivaylov

    Why elements are over my input fields when float them right in Firefox

    Hi guys,

    this is my code:
    Code:
        <body>
            <div id="main">
                <span>Please enter your name and password below</span>
                    <form id="form_no1">
                    <span class="txt">ID:</span>
                    <input type="text" name="login" class="field"/>
                    <span class="txt">Password:</span>
                    <input type="password" name="pass" class="field"/>
                    <input type="submit" value="submit"/>
                </form>
            </div>
        </body>
    Code:
    *{margin:0; padding:0;}
    body {background-color: gray; text-align:center;}
    
    form
    {display:block; width:144px; height:150px; margin:33px auto; }
    
    .field{
    background-color:black; color:white; border: solid 1px silver;
    display:block; height:20px; width:144px; margin:0px 3px 12px 3px;padding:1px 1px; 
    ;}
    
    span.txt
    {right:0; color: white; font-size: 11pt; display:block; float:right;}
    So in Firefox the
    Code:
    <span class="txt">ID:</span>
    element goes over the first input field when float it right! Any suggestions how not to overlap?
  • serdar
    New Member
    • Nov 2008
    • 88

    #2
    Add

    clear:left

    into field class.

    Comment

    • kidwon
      New Member
      • Oct 2010
      • 4

      #3
      Thank you Serdar appreciate your help, it worked just fine :)

      Comment

      Working...