مشکل چیدمان فرم در Firefox

شروع موضوع توسط Rostamiani ‏5 مارس 2008 در انجمن زبان HTML

  1. Rostamiani

    Rostamiani Active Member

    ارسال‌ها:
    194
    تشکر شده:
    45
    امتیاز دستاورد:
    28
    سلام
    فرمت بندی Form من توی Fire fox درست نیست.
    textbox ها به جای اینکه زیر هم باشند،کنار هم قرار می گیرند!
    Opera و حتی Internet Explorer هم صفحه رو درست نشون میده !

    کد ساده شده Form رو ضمیمه کردم..

    ممنونم

    HTML:
    <!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=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    <!--
    #left_panel
    {
        width: 200px;
        background-color: #000000;
        border-top-style: solid;
        border-top-width: 10px;
        border-top-color: #404749;
        color: #FFFFFF;
        position: absolute;
        left: 0px;
        font-size: 4mm;
        height: 400px;
    }
    #login_set
    {
        position: absolute;
        left: 0px;
        top: 10px;
        width: 100%;
        border-bottom-width: 4px;
        border-bottom-style: solid;
        border-bottom-color: #605D5C;
    }
    #login_set .set_title
    {
        position: absolute;
        top: 0px;
        left: 0px;
        display: block;
        background-color: #636D84;
        width: 100%;
        height: 1em;
        font-size: 100%;
        font-weight: bold;
        overflow: visible;
    }
    #login_set .set_title span
    {
        float: right;
        margin-right: 15px;
    }
    #login_set form
    {
        position: absolute;
        left: 5%;
        top: 1.7em;
        width: 90%;
        padding: 0;
        margin: 0;
    }
    #login_set fieldset
    {
        border-top-style: none;
        border-right-style: none;
        border-bottom-style: none;
        border-left-style: none;
        margin: 0px;
        padding: 0px;
        position: absolute;
        left: 0px;
        top: 0px;
    }
    #login_set label
    {
        background-color: #00FF00;
        position: static;
        top: 0px;
        width: 100%;
        left: 0px;
        font-size: 100%;
    }
    #login_set label input
    {
        width: 60%;
        padding: 0;
        margin: 0;
        height: 1em;
        float: left;
    }
    #login_set label span
    {
        float: right;
        width: 35%;
        text-align: left;
    }
    #login_set .buttons
    {
        position: absolute;
        top: 3em;
        left: 5%;
        width: 90%;
        font-size: 100%;
    }
    #login_set .buttons input
    {
        margin: 0px;
        padding: 0px;
    }
    #login_set .buttons #login_button
    {
        float: left;
        width: 49%;
        background-color: #51B2C1;
        border: 1px solid #B9D8DA;
        font-size: 0.7em;
        padding: 0;
        margin: 0;
    }
    #login_set .buttons #signup_button
    {
        background-color: #51B2C1;
        float: left;
        width: 49%;
        border: 1px solid #B9D8DA;
        font-size: 0.7em;
        padding: 0;
        margin: 0;
    }
    #login_set .buttons #forgot_pass_button
    {
        clear: both;
        width: 98%;
        background-color: #96AEBA;
        border: 1px solid #96AEBA;
        padding: 0;
        margin: 0;
        float: left;
        margin-top: 2px;
    }
    -->
    </style>
    </head>
    <body>
    <div id="left_panel">
        <div id="login_set">
            <div class="set_title"> <span>ورود</span> </div>
            <form action="" method="post">
                <fieldset>
                <label for="username">
                <input name="username" type="text" maxlength="35" size="10" />
                <span>نام کاربر</span></label>
                <label for="pass">
                <input name="pass" type="password" maxlength="35" size="10" />
                <span>رمز عبور</span></label>
                </fieldset>
                <div class="buttons">
                    <input name="btn_login" type="button" value="ورود" id="login_button" />
                    <input name="btn_signup" type="button" value="عضویت" id="signup_button" />
                    <input name="btn_forgot_pass" type="button" value="فراموشی کلمه عبور" id="forgot_pass_button" />
                </div>
            </form>
            <span class="clear"></span> </div>
    </div>
    </body>
    </html>
     
     

    پیوست ها:

    نوشته شده توسط Rostamiani در ‏5 مارس 2008
  2. marSoul

    marSoul Member

    ارسال‌ها:
    110
    تشکر شده:
    76
    امتیاز دستاورد:
    16
    توی #login_set label input کد clear:both رو اضافه کن درست میشه
     
    نوشته شده توسط marSoul در ‏6 مارس 2008
    echessdesign و Rostamiani از این پست تشکر کرده اند.
  3. Rostamiani

    Rostamiani Active Member

    ارسال‌ها:
    194
    تشکر شده:
    45
    امتیاز دستاورد:
    28
    خیلی ممنونم
    درست شد !:D

    خیلی خیلی متشکرم :)
     
    نوشته شده توسط Rostamiani در ‏6 مارس 2008
  4. echessdesign

    echessdesign مدیر انجمن طراحی وب

    ارسال‌ها:
    4,375
    تشکر شده:
    3,833
    امتیاز دستاورد:
    113
    تصور کنم
    HTML:
     input {display:block}  
    هم جواب بده....
     
    نوشته شده توسط echessdesign در ‏6 مارس 2008
    Rostamiani از این پست تشکر کرده است.

به اشتراک بگذارید