Problème avec les feuilles de style

[Aurelienazerty]

J'ai un petit souci avec les feuilles de style comme vous pouvez le voir ici dans mes commentaires, si quelqu'un avait une petite idée sur le problème ça serait cool...

Sinon, y a pas à dire les feuilles de style c'est quand même hyper balèse, notament au niveau de l'imbrication des styles des conteneurs, genre:

Code : Tout sélectionner

/* Onglet */
.onglet {
	display: inline;
	border-bottom: 1px solid black;
}

/** Que ce soit on ou off */
.onglet a {
	/* Bordure */
	border: 1px solid black;
	/* Effet d'arondis */
	-moz-border-radius-topleft: 5px;
	-moz-border-radius-topright: 5px;
	-moz-border-radius-bottomright: 0px;
	-moz-border-radius-bottomleft: 0px;
	
	/* Texte */
	text-align: center;
	font-weight: normal;
	text-decoration: none;
	/** On "écarte" du bord */			
	padding-left: 10px;
	padding-right: 10px;
	
}

.onglet_off, onglet_on {
	padding-left: 1px;
	padding-right: 1px;
	padding-top: 2px;
	padding-bottom: 2px;
}

.onglet_off a {
	background-color: #FFFFFF;
}
.onglet_on a {
	background-color: #87C2E0;
}
.onglet_off a:hover {
	background-color: #97D2FF;
	text-decoration: underline;
}

le code HTML est du coup hyper simple

Code : Tout sélectionner

<div class="onglet">
		<span class="onglet_on"><a href="">Titi</a></span><span class="onglet_off"><a href="">Toto</a></span><span class="onglet_off"><a href="">Tata</a></span>
	</div>

[Arken]

<style>

/**** Base */

body {
/** Mettre un fond bleu sympa */
background-color: #97D2FF;
}

/** Texte */
body, font, b, a, div, p, span, label, li, th, td, INPUT, SELECT, TEXTAREA, caption {
FONT-SIZE: 10px;
font-family: verdana, helvetica, arial, sans-serif;
}

h1 {
font-size: 25px;
padding-left: 10px;
border-left: 10px solid #87C2E0;
color: black;
text-transform: uppercase;
font-weight: bold;
}

h2 {
font-size: 20px;
padding-left: 9px;
border-left: 9px solid #87C2E0;
color: black;
text-transform: uppercase;
font-weight: bold;
}

h3 {
font-size: 15px;
padding-left: 7px;
border-left: 7px solid #87C2E0;
color: black;
text-transform: uppercase;
font-weight: bold;
}

h4 {
font-size: 10px;
padding-left: 5px;
border-left: 5px solid #87C2E0;
color: black;
text-transform: uppercase;
font-weight: bold;
}

INPUT, SELECT, TEXTAREA {
background-color: #87C2E0;
border-style: ridge;
}

a {
color: black;
}


/** Conteneurs */
.contenu {
background-color: #FFFFFF;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
padding-bottom: 10px;
}

/** Block entête */
.entete {
border: 1px solid black;
max-width: 200px;
border-collapse: collapse;
display: block;
}
/* Son titre */
.entete h1 {
background-color: #87C2E0;
padding-left: 10px;
font-size: 12px;
color: black;
font-weight: bold;
text-transform: none;
margin-top: 0px;

}
.entete h2 {
font-size: 12px;
padding-left: 0px;
margin-left: 9px;
border-left: 0px;
border-bottom: 1px dotted black;
color: black;
font-weight: bold;
text-transform: none;
width: 80%;
}
/* Son contenu */
.entete div {

}

table {
border-collapse: collapse;
}

/** Les tableaux */
.bordure table {
border: 10px solid black;
border-collapse: collapse;
}
.bordure td {
border: 1px solid black;
}

/** Onglet */
.onglet {
display: inline;
border-bottom: 1px solid black;
}

/** Que ce soit on ou off */
.onglet a {
/* Bordure */
border: 1px solid black;
/* Effet d'arondis */
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 0px;
-moz-border-radius-bottomleft: 0px;

/* Texte */
text-align: center;
font-weight: normal;
text-decoration: none;
/** On "écarte" du bord */
padding-left: 10px;
padding-right: 10px;

}

.onglet_off, onglet_on {
padding-left: 1px;
padding-right: 1px;
padding-top: 2px;
padding-bottom: 2px;
}

.onglet_off a {
background-color: #FFFFFF;
}
.onglet_on a {
background-color: #87C2E0;
}
.onglet_off a:hover {
background-color: #97D2FF;
text-decoration: underline;
}
</style>

tu remarquera avec joie que y a pas mal de trucs qui chient complet sous IE

[Christophe]

David avait trouver un truc pour différencier des reglage pour IE et pour FF directement dans la feuille de style.

Je sais pas si ça peut aider ici... mais on sait jamais

[Aurelienazerty]

Non pas du tout, là pour le moment je bosse sur FF, IE je vérais plus tard...

[Arken]

le problème c'est qu'il y a des différences d'interprétation sur pas mal de trucs entre IE et FF, ça vient pas seulement de propriétés par défaut & co, et t'en chie comme un russe pour trouver des parades, pas forcément jolie jolie.

[Aurelienazerty]

Nan mais là les gens, je ne parle aps de pb avec IE, je veux juste comprendre là où j'ai fait une erreur...

[Arken]

et moi je parle pas de tes problèmes je fais des généralités sur IE par rapport au message de cricri.

Tes problème je les ai réglé dans ce que j'ai posté.

[Aurelienazerty]

Tes problème je les ai réglé dans ce que j'ai posté.

Escus,e je n'avais pas vu ton post

[Aurelienazerty]

C'est bon, c'est corrigé, merci olivier de m'avoir reppellé qu'il existait les proriétés margin, ça m'était sorti de la tête...
Pour ce qui est du tableau, j'avait fait une erreur

Code : Tout sélectionner

.bordure table {...}

veut dire que tout les tableaux qui seront dans un conteneur de classe bordure auront les propriété décrites, mais ça ne s'applique pas au conteneur, la solution est de faire comme ça

Code : Tout sélectionner

.bordure {...}

Sinon, j'ai globalement les même résultats sous IE que sous FF, mis à part que sous IE, il ne connait pas les max-width, mais ça c'était mit pour tester...

[Davidazerty]

Comme l'a dit cricri, j'ai trouvé une p'tite astuce pour interpreter une ligne de code css pour FF et une autre par IE (c'est très pratique).

Il existe un attibut "! important" que l'on place à la fin d'une ligne

Code : Tout sélectionner

.cadre {
border: 1px solid black  ! important;
}

Elle force l'utilisation de ce style au cas ou il y aurait une redéfinition en dessous

Code : Tout sélectionner

cadre {
border: 1px solid black  ! important;
border: 2px groove green;
}

Ici le style de bordure de la classe cadre serait "1px solid black".

Mais comme IE ne gère pas l'attribut "! important" sous IE le style de bordure de la classe cadre sera "2px groove green".

En utilisant cette p'tite astuce cela permet (comme dans le cas d'aurel) de développer une interface graphique sous FF puis de rajouter les modifs pour IE en dessous en mettant "! important" devant les styles FF.


Autre petite chose :

Code : Tout sélectionner

padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px; 

Il est possible de factoriser ce code en ca

Code : Tout sélectionner

padding: 10px 20px 30px 40px;

Dans l'odre on definit TOP, RIGHT, BOTTOM, LEFT. Cela marche avec tout les styles qui ont ces 4 attributs (margin border etc..).

[Aurelienazerty]

Oki, merci pour les conseils david... Mais sinon je préfère ne pas factoriser les margin, pading et autres border, car je ne me souvient jamais de l'ordre du coup là c'est bien claire et je n'ai même pas à réfléchir...