28173 sujets

CSS et mise en forme, CSS3

Css et "astuces" pour IE

Bonsoir,

je travaille sur un petit site que je veux respectueux des recommandations du W3C, mais sans "fanatisme", la compatibilité avec Internet Explorer étant inévitable.

Grâce aux tutoriels d'Alsacréations et divers astuces trouvées sur le web, j'ai pu adapter une maquette et la rendre respectueuses des recommandations : xhtml 1 strict (pas trop difficile) et css 2. Mais pas entièrement.

IE me semble avoir quelques problèmes avec "margin" et "padding". Et donc, pour avoir un affichage un minimum correcte, j'ai du recourir à des astuces comme ci-dessous.


#header #left {
	width: 600px;
	_margin-top: 50px;
	padding-left: 20px;
	padding-top: 30px;
	_padding-top: 10px;
}


Evidemment, la feuille de style n'est pas valide.
Y a-t-il une solution pour ménager la chèvre et le chou (w3c et IE).
Si oui : merci.
Si non : tant pis Smiley decu

L'adresse provisoire de la page (en construction) : ici.
Modifié par h2o (09 Apr 2006 - 11:28)
Merci.

Je teste la solution lundi, sur le pc du bureau (chez moi, je n'ai qu'un Mac avec Safari, Firefox et Opera).
Vero a écrit :

Ton soucis semble être celui du modèle de boite, pour lequel IE ne respecte pas les directives.


Mais non !!!!!

pas du tout, IE6 respecte parfaitement le modèle de boite standard pour autant qu'il ne soit pas en mode quirck. Pour les versions antérieures d'IE le problème est entier certes.

Il serait bon que ce point soit fermement établi et affirmé avant toute approche de cette question.

Donc deux point à élucider d'entrée :
1. les documents concernés ont ils bien une déclaration de type de document (DTD). Si ce n'est pas le cas IE est en mode quirck.

2. les documents ont ils un prologue xml. si c'est le cas iE passe également en mode quirck.

... Question subsidiaire : s'il y a un prologue xml celui ci est il réellement justifié. Il y a peu de chance que ce soit le cas.
Salut,

Pourquoi mettre #header h1 en float:left ? Il me semble qu'il aurait été plus simple de ne pas le mettre, et ça aurait éviter ces problèmes.

A+
Administrateur
Hello,

Dans ton titre, tu parles de "Csse".
A quoi cela correspond-il ? Est-ce une erreur ? Si oui, voudrais-tu bien corriger cette erreur ?

Merci d'avance Smiley smile
a écrit :
pas du tout, IE6 respecte parfaitement le modèle de boite standard pour autant qu'il ne soit pas en mode quirck. Pour les versions antérieures d'IE le problème est entier certes.

Il serait bon que ce point soit fermement établi et affirmé avant toute approche de cette question.

Donc deux point à élucider d'entrée :
1. les documents concernés ont ils bien une déclaration de type de document (DTD). Si ce n'est pas le cas IE est en mode quirck.

2. les documents ont ils un prologue xml. si c'est le cas iE passe également en mode quirck.


Bonjour,

Pouvez-vous préciser davantage dans quels cas IE respecte-t-il le modèle de boite standard? Avec quel prologue/DTD? La page doit-elle être en HTML ou en XHTML, etc.

Parce que, avec mes pages (pas en ligne), en HTML 4.01, avec DTD, je n'ai pas les mêmes dimensions dans IE et FF pour les divs.

Merci.
En bas de l'article du premier lien que je t'ai donné (modèle de boite)

openweb a écrit :


Le DocType switching : forcer l'une ou l'autre interprétation des dimensions

Le résultat d'un positionnement précis de plusieurs boîtes adjacentes peut donc être très différent selon le calcul effectué. Comment savoir quel modèle de boîte sera appliqué par quel navigateur ?

* les navigateurs périmés type IE 4.x et Netscape 4.x ne sont pas à prendre en compte puisqu'ils n'ont pas d'implémentation suffisante des propriétés CSS ;
* IE 5.x Windows ne connaît que le modèle Microsoft ;
*

les navigateurs récents (IE 5 Macintosh, Netscape 6+ et autres navigateurs basés sur Gecko, Opera 7.x…) exploitent la technique du DocType Switching, qui permet ici de choisir le modèle appliqué, en fonction de la Déclaration de Type de Document (DTD) spécifiée en tête de la page à afficher.

Pour résumer, ces navigateurs récents opteront pour :

o le modèle Microsoft en l'absence de DTD, ou en présence d'une DTD HTML 4.01 transitional sur le modèle : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> ;

o le modèle Standard en présence d'une DTD HTML strict sur le modèle : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> Ou d'une DTD HTML 4.01 transitional sur le modèle : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> Ou d'une DTD XHTML quelle qu'elle soit, sur le modèle : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ou <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> .


A priori tu es dans le cas du modèle microsoft ...

@clb56

Smiley nez
Modifié par Vero (09 Apr 2006 - 19:47)
@clb56

Oui, nous nous sommes sûrement mal compris, mais ce n'est pas bien grave, et l'essentiel est de trouver une solution pour h2o.

J'ai été un peu taquine, mais ce n'était pas méchant ...
Smiley biggrin
Effectivement Smiley cligne

Mais comme signalé plus haut : pour les tests, je dois disposer d'un PC sous Windows, donc pas avant demain avant 10 heures.
Vero a écrit :
@clb56

l'essentiel est de trouver une solution pour h2o.



... dont le document mis en lien est en doctype xhtml 1.0 strict.

donc le problème ne provient sans doute pas du modèle de boite mais plutôt, si une proprité float est en jeu, du résultat du haslayout chez IE ( http://www.test.blog-and-blues.org/haslayout/ ). Auquel cas pour un problème de marge la solution consisterait plutôt à donner pour IE, via un commentaire conditionnel, des marges à 1/2 de ce qui est souhaité et de laissé le bug rétablir la situation.
thierry a écrit :

Parce que, avec mes pages (pas en ligne), en HTML 4.01, avec DTD, je n'ai pas les mêmes dimensions dans IE et FF pour les divs.

Merci.
Bonjour,

J'ai retravaillé la partie problèmatique de ma feuille de style en la simplifiant un peu au niveau du header-entête.

Maintenant, le titre h2 est visible correctement dans IE 6, mais particiellement caché par un div suivant dans FF 1.5. De fait, dans IE 6, le titre h2 se position plus bas que dans FF, mais il "pousse" les éléments suivants vers le bas.

Comment résoudre ce problème afin d'avoir, si pas un aspect rigoureusement semblable, au moins un présentation correcte et lisible dans les navigateurs IE, FF et Safari.

Merci.

La page en développement se trouve toujours ici

Un extrait du code html :

<body>
   <div id="conteneur">
      <div id="header">
         <h1><span>Titre</span></h1>
         <h2>Sous-titre<span> Description</span></h2>
      </div>
      <div id="haut">
         <div id="espacemenu">
            [...]
         </div>
      </div>
         [...]
   </div>
</body>


Extrait de la feuille de style :

body {
	background-color: #8CC63F;
}

#conteneur {
	width: 980px;
	margin: 15px auto;
	background-color: #ffffff;
}

#header {
	background: url(img/banner_4_right.gif) no-repeat top right;
	background-color: #ffffff;
	height: 100px;
	width: 980px;
}

#header h1 {
	background-image: url(img/banner_4_smallLogo.gif);
	background-repeat: no-repeat;
	background-position: left;
	width: 269px;
	height: 49px;
	margin: 0;
}


#header h1 span {
	display: none;
}

h2 {
	color : #8bc63f;
	font-weight : bold;
	font-size : 38px;
	padding-left: 20px;
}

h2 span {
	color : #8bc63f;
	font-weight : bold;
	font-size : 16px;
}

#haut {
	height: 142px;
}

#haut #espacemenu {
	position: relative;
	height: 22px;
	background-color: #E7F2D7;
}

Modifié par h2o (10 Apr 2006 - 15:26)
Sujet clos
Aller à