2009-09-16 10 views
0

j'ai un problème avec css et FF3/IE7 et Opera 10.Problème avec entrée et points d'ancrage entre les navigateurs

J'ai une entrée [type = « submit »] et une ancre et je veux les style de la même . Peu importe ce que j'essaie, le seul navigateur logique semble être Opera 10 (il les styles la même chose avec le même css). FF semble avoir un rembourrage différent (je devrais avoir la boîte de soumission 1px plus petite dans le rembourrage pour s'adapter, mais cela désactive Opera 10) et IE7 est juste loin.

Code

pour vous les amateurs de code:

<form action="/login" method="post" id="loginform"> 
    <fieldset> 
     <input type="submit" value="Login" /> 
     <a href="/register">Register</a> 
     <a href="/reminder">Lost Password?</a> 
</fieldset> 
</form> 

css:

fieldset a { 
    color: #ffcc00; 
    border: 1px solid #707070; 
    background: #000000; 
    font-size: 10px; 
    font-weight: normal; 
    padding: 2px; 
    /*vertical-align: text-top;*/ 
} 
fieldset a:hover { 
    color: #ffcc00; 
    border: 1px solid #707070; 
    background: #333333; 
    cursor: pointer; 
    font-size: 10px; 
    font-weight: normal; 
    text-decoration: none; 
    padding: 2px; 
} 
fieldset input[type="submit"] { 
    color: #ffcc00; 
    padding: 2px; 
    border: 1px solid #707070; 
    background: #000000; 
    font-size: 10px; 
    font-weight: normal;  
} 
fieldset input[type="submit"]:hover { 
    color: #ffcc00; 
    padding: 2px; 
    border: 1px solid #707070; 
    background: #333333; 
    cursor: pointer; 
    font-size: 10px; 
    font-weight: normal; 
} 

toute aide pour résoudre le problème d'alignement entre les navigateurs est souhaité que je dois supporter trop de trois (safari mais je pense que si je fais aligner ces 3, ça devrait marcher là aussi).

Un grand merci à l'avance (p.s je vais le déjeuner maintenant et vérifieront les réponses juste après désolé pour les réponses lentes à l'avance)

Répondre

1

Le problème est résolu Firefox comme celui-ci

button::-moz-focus-inner { 
    border: 0; 
    padding: 0; 
} 
+0

Cela résout l'un des problèmes donc +1 ici: D – Dorjan

+0

Y at-il une place avec toutes ces commandes? -moz- ou même pour Opera/IE? – Dorjan

+0

Eh bien, je suggère de lire les fichiers css internes de votre agent ... – n1313

0

Essayez ceci dans l'isolement. Je recommande d'utiliser un fichier reset.css pour forcer tous les navigateurs à traiter les pommes comme des pommes, puis de styliser vos éléments INPUT et A en conséquence.

Il est possible que d'autres règles CSS entrent dans le mixage. Voir http://meyerweb.com/eric/tools/css/reset/ pour un fichier de réinitialisation.

J'ai eu des problèmes avec le passé avec IE et stylisme certains éléments (en particulier les éléments désactivés), et la façon dont IE diffère dans sa gestion de ce style entre les versions 6 et 7.

Le DOCTYPE suivant a semblé aider dans ces circonstances, mais le rendu dans IE 6 ne peut plus fonctionner comme prévu:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
+0

maintenant, c'est un inte repos et bonne idée David. Je vais lire tout de suite – Dorjan

+0

Malheureusement, cela ne réinitialise pas les boutons :( – Dorjan

+0

Essayez d'ajouter un DOCTYPE strict à votre page et chargez-le dans IE 7. Le mode Quirks peut avoir un impact sur votre style Certaines choses ne sont pas stylées bien avec IE ... en particulier la version 6. –

Questions connexes