[Rafael Faria]

Bom dia pessoal, estou com um problema com alinhamento de formulario no IE.

No firefox o formulario fica inline, como realmente deve ser, é um formulario de Login de usuário, e os campos ficam alinhados na horizontal.
Porém no IE, o formulário fica com um campo abaixo do outro.

Firefox:


IE:


No IE7, ocorre além do problema do alinhamento, a imagem de funto, caminha junto com o texto. A imagem não fica estatica.
No IE6, parece que ele não obedece a margem. No começo do campo, eu coloquei no fundo a imagem com o texto "usuario", então eu configurei uma margem para o texto começar a ser digitado depois do fundo onde estah escrito usuario. No Firefox funciona, e no IE7 tb funciona... mas no IE6 não.

Segue o código relacionado abaixo:

HTML:

CODE

<div id="userbox">
    <div class="login">
        <form>
            <fieldset>
                <legend>Login VipDigital:</legend>
                <label for="username">Usuário:</label>
                <input type="text" name="username" class="user" />
                <label for="password">Senha:</label>
                <input type="password" name="password" class="pass" />
                <input name="submit" type="submit" value="entrar" class="submit" />
            </fieldset>
        </form>
    </div>
</div>

CSS:

CODE

#userbox {
    position: relative;
    float: right;
    width: 487px;
    height: 28px;
    background: url("userbox_bg.gif") repeat-x top left;
}

#userbox .vip {
    display: none;
}

#userbox .login {
    position: relative;
    padding-left: 90px;
    float: left;
    width: 83px;
    height: 28px;
    background: url("vipdigital.jpg") no-repeat top left;
}

#userbox fieldset {
    position: relative;
    display: inline;
    border: none;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
}

#userbox legend {
    display: none;
    border: none;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
}

#userbox label {
    display: none;
    border: none;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
}

#userbox .user {
    margin-top: 6px;
    font-size: 70%;
    width: 71px;
    height: 12px;
    border-style: none;
    padding-left: 50px;
    padding-top: 1px;
    padding-down: 1px;
    padding-right: 3px;
    border: none;
    background: transparent url("login_userbox.gif") no-repeat;
    _background: transparent url("login_userbox.gif") no-repeat fixed;
}

#userbox .pass {
    margin-top: 6px;
    margin-left: 6px;
    font-size: 70%;
    width: 71px;
    height: 12px;
    border-style: none;
    padding-left: 50px;
    padding-top: 1px;
    padding-down: 1px;
    padding-right: 3px;
    border: none;
    background: transparent url("login_userbox.gif") no-repeat;
    _background: transparent url("login_userbox.gif") no-repeat fixed;
}

Reparem que no background dos campos, eu coloquei o "_" para o IE 6, como fixed. Se eu coloco isso no Firefox, ele não exibe o fundo, ocorre um erro. O mesmo ocorre com o IE7. Então soh consegui deixar fixado no IE6. Porém no Firefox, ele já fica fixado de padrão, sem problemas. Mas no IE7 isso não ocorre.

Alguém tem alguma sugestão?

A única sugestão que funciona que me deram até agora, foi deixar de lado esse CSS e fazer o formulario em Flash. Será que é realmente a única saida? Não acredito que não seja possivel resolver esses problemas no IE.