web-dev-qa-db-fra.com

La bordure CSS ne fonctionne pas

J'ai essayé d'obtenir une bordure de chaque côté de mon conteneur blanc . Ce n'est tout simplement pas visible. J'ai essayé de le mettre en trois éléments différents au cas où! (voir ci-dessous). Des idées sur la façon de le faire fonctionner?

#wrapper {
    width:1000px;
    background:#F4F4F4;
    padding-top:5px;
    border: 3px #CDCDCD;
    overflow: auto;
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto;  
}

#casing {
    padding:0px 0px 0px 0px;
    background:#Fff;
    border: 0 1px 0 1px solid #000;
}   

#cover {
    border: 0 1px 0 1px solid #000;
}   
36
Tara

Faites ceci:

border: solid #000;
border-width: 0 1px;

Démo en direct: http://jsfiddle.net/aFzKy/

87
Šime Vidas

Je pense que vous venez de créer une syntaxe abrégée pour le border: propriété là =)

Essayez simplement:

border-right: 1px solid #000;
border-left: 1px solid #000;
16
Rudi Visser

AFAIK, il n'y a pas de raccourci pour frontière. Vous devez définir chaque bordure séparément:

border: 0 solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
4
Tatu Ulmanen

Avez-vous essayé d'utiliser Firebug pour inspecter le HTML rendu et pour voir exactement quel CSS est appliqué aux différents éléments? Cela devrait ramasser les erreurs CSS comme celles mentionnées ci-dessus, et vous pouvez voir quels styles sont hérités et d'où - c'est également une valeur inestimable dans tout débogage CSS.

4
Ken Ray

Utilisez cette ligne de code dans votre CSS

border: 1px solid #000 !important;

ou si vous voulez une bordure uniquement à gauche et à droite du conteneur, utilisez:

border-right: 1px solid #000 !important;
border-left: 1px solid #000 !important;
3
Anil Singhania

La hauteur est 100% incertaine, essayez de mettre diplay: block; or display: inline-block;

0
Dan