Discussion :

[Anduriel]

Salut,

Sous IE j'ai fais des liens entourés d'un cadre et d'une dimension précise: 100*20.
Sous IE donc ça passe très bien les dimensions sont respectées.

Sous FF par contre, le cadres colle au texte (Voyez l'image).
Voila mon code:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
a.top {
 width: 100px;
 height: 19px;
 padding-top: 1px;
 display: inline-block;
 background-image: url(images/atop.jpg);
 color: gray;
 text-decoration: none;
 border: 1px solid #DBDEDF;
 text-align: center;
 font-family: "Verdana";
}
 
a.top:hover {
 background-image: url(images/atophover.jpg);
 color: black;
}

Comment réglé ce problème?
Merci

[Swoög]

Salut !

C'est parce que ton a est en display : inline-block...
Il me semble que FF n'accepte pas les width et height sur un élément inline

essaie de passer la balise en block totalement ^^

[Anduriel]

Ah c'est vrai que cette fois les dimensions sont respectées mais si je mets plusieurs liens à la suite le prochain revient à chaque fois à la ligne (en fait c'est pour ça que j'avais mis inline).
Donc comment faire pour les laisser à la suite?
Merci

[Swoög]

pour les laisser à la suite, tu pourrais (par exemple) les passer en float : left ou float : right...

Bon, par contre, il est vrai que ça pourrait entrainer des comportements étranges, mais normalement, ça devrait être très limité (tout dépend de comment sont organisés les éléments de la page, je n'ai que très rarement eu des problèmes avec cette méthode )

[Anduriel]

Super !
Enfin j'arrive avec ça à un dernier problème: mes liens sont bien positionnés mais évidemment àa gauche de ma ligne. Moi je voudrai qu'ils soient centrés (oui je suis dur...). L'aligne="center" ne fonctionne pas à cause du float, même en les mettant dans un div.
Voila la partie du code HTML:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<td align="center" bgcolor="white" class="menu">
            <a href="#" class="top">Home</a>
            <a href="#" class="top">Portail</a>
            <a href="#" class="top">Download</a>
            <a href="#" class="top">Contact</a>
            <a href="#" class="top">Liens</a>
        </td>

Comment faire?
Merci

[Swoög]

heu... pas testé, mais essaie ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<td align="center" bgcolor="white" class="menu"><div style="margin-right : auto; margin-left : auto;">
            <a href="#" class="top">Home</a>
            <a href="#" class="top">Portail</a>
            <a href="#" class="top">Download</a>
            <a href="#" class="top">Contact</a>
            <a href="#" class="top">Liens</a>
        </div></td>

Au fait : mélanger mise en page/forme tabulaire et CSS, c'est pas tip top

[ilood]

Salut

Ou laisser les lien en in-line et utiliser les padding.
Mais tes boîtes n'auront jamais la même taille. Elles varieront en fonction du contenu.

De toute façon il faut bien penser que la taille des caractères n'est pas la même chez tous les utilisateurs. En fixant la taille de tes boites en pixels le contenu risque de sortir de celles-ci.

[Swoög]

De toute façon il faut bien penser que la taille des caractères n'est pas la même chez tous les utilisateurs. En fixant la taille de tes boites en pixels le contenu risque de sortir de celles-ci.

Saut si la taille de la police est elle-même spécifiée en px...

ensuite, c'est le débat "mise en page/forme aboslue ou relative à la configuration de l'utilisateur ?"...

min-width serait la solution... mais IE ne le supporte pas (encore)