High-Tech Santé Médecine Droit-Finances

Auto-Entrepreneur

Comment faire ?

Rechercher : dans
Par :

CSS Faire un Border invisible ET solide ?

Dernière réponse le 1 jun 2008 à 23:33:15 Philippe P., le 31 mai 2008 à 14:22:01 
 Signaler ce message aux modérateurs

Bonjour,

je cherche à pallier l'un des gros défauts de IE, son impossibilité à gérer les instruction CSS "padding".

J'ai trouvé la solution en utilisant l'instruction "border: 20 px hidden;"
J'ai utilisé l'attribut hidden car j'ai une image en background, et la bordure ne doit pas la recouvrir.
Toutefois, il me semble que l'attribut "hidden" me supprime complètement la bordure.

Y a-t-il un moyen de régler ce problème, tout en gardant une bordure transparente ?

Merci d'avance

Configuration: Windows XP
Firefox 2.0.0.14

Meilleures réponses pour « CSS Faire un Border invisible ET solide ? » dans :
Enlever la bordure sur une image dans un lien en HTML/CSS VoirVous avez fait une image cliquable en mettant une balise IMG au sein d'un lien et le navigateur vous affiche un cadre ou plus exactement une bordure autour de l'image. Il existe deux façons de supprimer cette bordure...
Les CSS pour présenter vos images VoirPour présenter agréablement vos images, vous pouvez intégrer quelques codes supplémentaires dans votre CSS et vous en servir à bon escient. Elles sont bien sur modulables en fonction de la charte graphique de votre site. Utilisation Mettez les codes...
Différence entre display:none et visibility:hidden VoirLes deux attributs CSS display:none et visibility:hidden permettent tous deux de masquer l'affichage d'un élément en CSS dans le navigateur. Néanmoins, il existe une subtile nuance : visibility: hidden rend le bloc concerné invisible....
Télécharger BorderMaker VoirAjoutez un cadre photo à une image virtuel n'est pas évident. Alors pour faire simple, des programmes sont spécialisés dans cette tâche bien précise. Bordermaker est un outil permettant d'ajouter des bordures, des textes ou un effet de filigrane...
Télécharger Invisible Secrets Voir
Télécharger Apprendre XHTML & CSS Voir
Feuilles de style - CSS VoirPrésentation des feuilles de style Le concept de feuilles de style est apparu en 1996 avec la publication par le W3C d'une nouvelle recommandation intitulée « Cascading StyleSheets » (feuilles de style en cascade), notée CSS. Le principe des...
Les classes de style (CSS) VoirLes classes et les ID Les classes Il peut s'avérer intéressant d'affecter des styles différents à des mêmes balises. Pour cela les spécifications CSS ont introduit le concept de classe. La définition des classes est aussi simple que celles des...
CSS - Les couleurs VoirLes couleurs Le standard CSS propose différentes façons de définir des couleurs : par un nom avec la notation hexadécimale avec la notation décimale Appel d'une couleur par son nom Le langage HTML définit des noms pour un nombre limité de...
Posez votre question Répondre

1

PhP, le 31 mai 2008 à 14:25:10

Bjr

Certe IE n'est pas la Rolls mais il gère quand même le padding et le border en CSS

Tu dois te tromper quelque part

Que veux-tu faire exactement ? Poste ton code pour qu'on se rende compte

A la place de la bordure utilise plutôt les marges qui elles sont toujours transparentes

PhP  
Il y a 10 types de personnes dans le monde : ceux qui compre­nnent le binaire et les autres ...

   
Répondre à PhP

2

Philippe P., le 31 mai 2008 à 20:16:36

Je me suis mal formulé... Le padding fonctionne sous IE, mais pas de la même manière que Firefox. Alors les deux affichages sont différents et le résultat sur IE plutôt gênant.
Mais j'ai réussi à trouver la solution.

Dans le css, j'ai utilisé deux instructions :

border-right: 50px solid;
border-color: transparent;

Ce qui me donne l'équivalent du padding-right et qui fonctionne parfaitement sous les deux navigateurs.
C'est en quelque sorte du bricolage, mais j'ai vérifié et il passe au validateur.

merci quand même de m'avoir aidé, PhP !

   
Répondre à Philippe P.

3

PhP, le 31 mai 2008 à 20:39:27

J'aimerais bien voir un ex de la façon différente de fonctionner du padding ... quand même T'Oh !


Sur IE tu utilises bien un DOCTYPE dans l'entête de ta page HTML pour forcer IE à commuter en mode standard ?
PhP  
Il y a 10 types de personnes dans le monde : ceux qui compre­nnent le binaire et les autres ...

   
Répondre à PhP

4

Philippe P., le 1 jun 2008 à 12:08:51

J'utilise le code suivant au début de la page
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

j'ai remarqué qu'il y avait un peu de différence avant et après l'ajout de cette ligne, mais pas au niveau du padding.

Et donc pour la manière de remplacer le padding,
padding-right: 50px;
est devenu
border-right: 50px solid transparent;

Ca donne la même chose à la fois sur Firefox et IE, alors que le padding donne des résultats différents.

Si tu veux voir par toi-même, voici l'adresse ou j'ai mis en application :
http://www.jfkfilm.fr/testautres
Attention, c'est une adresse que j'utilise pour les tests et le site n'est pas encore dynamique ; je n'en suis qu'à la forme... Une fois que le site sera terminé, l'adresse ne sera plus valide ;)

   
Répondre à Philippe P.

5

 PhP, le 1 jun 2008 à 23:33:15

Bsr

Sur IE 6 ta page de test est horrible : de gros rectangles verts apparaissent à droite et la TV totalement décalé vers le bas (en plus IE 6 ne gère pas la couche Alpha dans les png)

Je sais pas si c'est en rapport avec le padding mais c'est pour le moins bizarre ...
PhP  
Il y a 10 types de personnes dans le monde : ceux qui compre­nnent le binaire et les autres ...

   
Répondre à PhP
Posez votre question Répondre
Ils ont besoin de votre aide