28172 sujets

CSS et mise en forme, CSS3

Décalage incompréhensible div sous ie8

Bonsoir

C'est ma première intervention et j'espère ne pas contrevenir à un règlement quelconque.

Voilà mon souci un code qui passe sous ie6, ie7, ie9, ie10 (beta) mais pas ie8 et je ne vois vraiment pas pourquoi.

donc le code html5 
<!DOCTYPE HTML>
<meta  charset=UTF-8>
<title>Untitled Document</title>

<link rel="stylesheet" type="text/css" href="general.css">

<!--[if lte IE 6]><link rel="stylesheet" media="screen" type="text/css" href="ie.css" /><![endif]-->
<!-- Et si besoin... -->
<!--[if IE 7]><link rel="stylesheet" media="all" type="text/css" href="ie.css" /><![endif]-->
<!--[if IE 9]><link rel="stylesheet" media="all" type="text/css" href="ie9.css" /><![endif]-->
<!--[if IE 8]><link rel="stylesheet" media="all" type="text/css" href="ie9.css" /><![endif]-->

<body>

<div id="container">
  <div id="header"><span class="verdanawhite">header</span></div>
  <div class="corps">
  <div id="section">
    <div id="aside">aside</div> 
    <div id="content">content</div>
    
    </div>
    </div>
    <div id="nav"><div id="photosnav"><span class="verdanawhite">navigation</span></div></div>
  <div id="footer">
    <p><span class="verdanawhite">footer</span></p>
    <!-- end .footer --></div>
  <!-- end .container --></div>
</body>


le code css correspondant 

.container {
	width: 100%;
	max-width: 1960px;
	min-width: 940px;
	background: #FFF;
	margin: 0 auto; 
}


#header {
	background: #000; position:a; height:100px;width: 940px; margin:auto; 
}
#aside { width:400px; position:b; height:480px; }
#aside, #content {display:table-cell; position:c; }
#nav {height:220px; width:100%; position:d; background-color:#7dab00; box-shadow: 0px 0px 10px #033; zoom: 1;-webkit-box-shadow: 0px 0px 10px #033; zoom: 1;
filter: progid:DXImageTransform.Microsoft.Shadow(color='#033', Direction=135, Strength=6)}
#photosnav { height:220px; background-color: transparent; width:940px; margin:auto;}

.corps { width:100%; background-color:#9C0;
background-image: -webkit-linear-gradient(left , #7DAB00 0%, #dae800 50%, #7DAB00 100%);
background-image: -moz-linear-gradient(left , #7DAB00 0%, #dae800 50%, #7DAB00 100%);
background-image: -o-linear-gradient(left , #7DAB00 0%, #dae800 50%, #7DAB00 100%);
background-image: -ms-linear-gradient(left , #7DAB00 0%, #dae800 50%, #7DAB00 100%); 

}      

#section {
	padding: 10px 0; width:940px; margin:auto; background-color:transparent;
}

#footer {
	padding: 10px 0;
	background: #000; position:e; height:400px;width: 940px; margin:auto;
}


sur ie8, la div nav est décalée sur la droite de quelques pixels, et la div corps idem mais suit la gauche.

un petit exemple en image

upload/40843-ecran-ie8.jpg

d'avance merci à ceux qui , experts en css3 et compatibilité ie pourront m'aider

Angélique
Modifié par nomieandme (11 Oct 2011 - 23:51)
hello ,

Déjà, y'a de petites erreurs sur le code fournis :
- manque la balise <html>
- manque la balise <head>
- <meta charset=UTF-8> ==> la décalaration est incomplète, il fallait l'écrire : 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />


Sinon, personnellement, je vois pas ce qui peut générer ce problème, mais en tout cas, ça peut venir de style que tu as mis dans la feuille de style ie9.css !
Si la page est en ligne, tu peux nous la filer pour la checker Smiley smile

A++
Merci pour une réponse aussi rapide, mais je ne pense pas car lorsque je supprime les commentaires conditionnels liés à ie.css et ie9.css c'est pareil . A tout hasard je vous donne les codes, mais mon souci est uniquement sur ie8 :

ie.css 

.corps { background-image: url(images/fond-ie.jpg); background-repeat:repeat-y; }
 #content {float:right }  #aside {float:left } 
 #nav {margin:0}


ie9.css 

.corps { background-image:url(images/fond-ie.png); background-repeat:repeat-y; }


j'ai bien essayé un dégradé avec le code "filter" mais cela ne donne pas les résultats escomptés
à savoir vert d'un côté , le même à droite et au centre un vert plus clair le tout en GradientType=1.

Cela marche très bien avec gradient-linear sur firefox, mozilla, opéra mais pas sur ie sauf ie10 beta. Si quelqu'un sait.. merci
Modifié par nomieandme (12 Oct 2011 - 00:25)
Le problème venait plutôt de ton filtre , que tu as mis pour ajouter le truc d'effet d'ombre sur les côtés ( voir PJ ).

filter: progid:DXImageTransform.Microsoft.Shadow(color='#033', Direction=135, Strength=6)


Je l'ai enlevé et ça marche.

Sinon autre remarque : des petites erreurs qui traine sur les styles, ça peut te causer d'autres souci qui te cassera la têtes ^^ :



#footer {
	padding: 10px 0;
	background: #000; [b]position:e;[/b] height:400px;width: 940px; margin:auto;
}

#aside, #content {display:table-cell; [b]position:c; [/b]}





upload/24628-capture.jpg
Bonjour,

nomieandme a écrit :
Merci pour une réponse aussi rapide, mais je ne pense pas car lorsque je supprime les commentaires conditionnels liés à ie.css et ie9.css c'est pareil . A tout hasard je vous donne les codes, mais mon souci est uniquement sur ie8 :


Par contre tu ne prends pas en compte les remarques de integrateurweb2 qui me semblent de bonnes pistes à savoir un html bien formé et sans erreurs avec tous les éléments obligatoires présents dans le code html - sans s'assurer de cette base pas moyen d'aller plus loin.
bonsoir
je vais tester et corriger la balise html mais je l'avais lu dans un livre de Raphaël goetter "css avancées" page 173 comme une formule abrégée qui passe d'ailleurs au w3c.

quand à filter box shadow c'est bizarre qu'elle ne passe pas sur ie8, peut on la remplacer par autre chose pour ie8 ? sur ie9 et ie10 beta cela marche.
sur ie7, je n'ai pas l'ombre, mais cela ne decale pas.

pareil pour filter gradient linear sur ie, cela reste tres limité... je voulais la même couleur à droite et à gauche, une plus claire au centre ... si cela marche pour les autres j'ai cherché pour ie et pas moyen

merci.. je regarde déjà ce que vous m'avez donne et reviens vers vous... la je vais au dodo

a plus.
Bonjour à tous

Donc je reviens vers vous, j'ai corrigé ce que vous m'aviez demandé, bien que j'ai lu à plusieurs endroits que <meta charset="utf-8" /> était la bonne écriture y compris dans le livre de Mr Goetter p 173.

Intégrateurweb2 avait raison c'est bien code filtre de mon ombrage qui gêne mais uniquement sous ie8 et en fait j'en ai besoin.

Quelqu'un sait-il comment faire pour avoir cet ombrage sous ie8, ie7 sans déstructurer la page ?

Pareil pour le dégradé sous ie on passe par un filtre qui ne marche que partiellement, quelqu'un connait-il la bonne démarche pour y arriver ?

Interarateurweb2 m'a souligné dans mon code "position:c" etc... mais là encore ce sont des codes que j'ai trouvé dans le livre de Mr Goetter à la rubrique template positionning page 139/140 ou l'on indique avec un 
body { display:"abc" } #header {position :a} #nav {position:b} etc...
les différents endroits ou doivent se placer les éléments

Integrateurweb2 peut-il m'expliquer pourquoi pensait-il que cela ne devait pas être mis dans ce cas ?


Merci
integrateurweb2 a écrit :

Déjà, y'a de petites erreurs sur le code fournis :
- manque la balise &lt;html&gt;


la balise html c'est le doctype.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
</head>
<body>
</body>
</html>

d'après mes sources. oui il manquait la balise html

Je lis un peu partout que le code 
filter:progid:DXImageTransform.Microsoft.Shadow(color='#033', Direction=135, Strength=6


marche sous ie8, ie7 mais en fait il n'a pas l'air de fonctionner sur une div, alors que box-shadow si (sous ie9, opéra, mozilla, firefox, safari)

Y a t-il une alternative ?

merci
Bonsoir

j'ai tenté piecss3. Apparemment gradient linear fonctionne sous ie

.corps { -pie-background: linear-gradient(left, #7DAB00 0%, #dae800 50%, #7DAB00 100%);
 behavior: url(PIE.htc); }


mais box-shadow (même avec piecss3) toujours pas du moins avec l'ombre en haut sur une div (boite)

Si quelqu'un a une idée... en attendant je cherche

Merci à vous
Hello nomieandme,

J'avais déjà travaillé avec piecss3, mais ça me casse la tête, je tombe sur certains bugs sous IE ... alors j'ai laissé tombé.

Ce que tu peux faire, au lieu de chercher des hacks ou des JS pour créer les ombres, et d'autres astuces que faite CSS3 ( personnelement, j'aime pas trop les Hacks... car ça me complique la vie ^^ ), tu crée une feuille de style dédié à IE8, et tu crée une image avec les fonds avec les ombres sur les côtés et c'est régler Smiley smile .

D'ailleur tu peux même l'appliquer sur tous les navigateurs au lieu de passer par CSS3 Smiley smile


Concernant :
a écrit :

Interarateurweb2 m'a souligné dans mon code "position:c" etc... mais là encore ce sont des codes que j'ai trouvé dans le livre de Mr Goetter à la rubrique template positionning page 139/140 ou l'on indique avec un

body { display:"abc" } #header {position :a} #nav {position:b} etc...

les différents endroits ou doivent se placer les éléments


Franchement, ça fait 4ans que je code et j'ai jamais vu un truc pareil !

Ce que je sais, c'est qu'il existes les valeurs suivants pour les positionement :

positon: relative
positon: absolute
positon: static
positon: fixed

hors ces 4, ça me dépasse Smiley biggrin

ptitvincent
a écrit :

la balise html c'est le doctype.


Je pense que la balise HTML et le doctype sont 2 choses différents.
Le role de DOCTYPE est que le document HTML assure que le navigateur interprètera le HTML ainsi qdéfinir la norme a été utilisé dans ce document.

le <html> </html> : doivent toujours être spécifié au début et à la fin de document !

voilà, j'espère que je me trompe Smiley smile
integrateurweb2 a écrit :


Franchement, ça fait 4ans que je code et j'ai jamais vu un truc pareil !

Ce que je sais, c'est qu'il existes les valeurs suivants pour les positionement :

positon: relative
positon: absolute
positon: static
positon: fixed



Il s'agit d'un brouillon de CSS 3 CSS Template Layout Module qui n'est implémenté dans aucun navigateur comme l'indique d'ailleurs Raphaël dans son livre. Lire aussi CSS 3 : Le module "Template Layout".
a écrit :

Je pense que la balise HTML et le doctype sont 2 choses différents.
Le role de DOCTYPE est que le document HTML assure que le navigateur interprètera le HTML ainsi qdéfinir la norme a été utilisé dans ce document.

le <html> </html> : doivent toujours être spécifié au début et à la fin de document !


Pas en HTML 5. Le premier code posté par nomieandme est valide. Pas besoin de head ni de html.
Modifié par jb_gfx (13 Oct 2011 - 04:05)
ok merci à tous. mais en résumé ie nous emm....
un grand merci à l'auteur de ce site et ce livre.

pour les balises head et html je les ai rajoutees mais lorsque que j'avais passé mon ossature au w3c tout était bon sans elles, alors que pour d'autres doctype il indique l'erreur.

à bientôt pour d'autres apprentissages ou d'autres emmerdes sous ie.

angelique
non mais justement, on te dis de ne pas les rajouté.

Tu es en Html5 avec <!DOCTYPE html>, tu n'as ni besoin de tag html ni de head, sauf si tu veux t'en servir en javascript pour y noter des info (sur la version du navigateur ou du javascript par exemple).

En réalité, voici la structure minimale VALIDE (j'insiste un bon coup Smiley smile ) d'une page html


<!doctype html>
<title>hi</title>
<div></div>


tu constatera que (sauf si tu veux l'instruire en css) il n'y a pas de balise <body></body>

bien à vous
Modifié par ptitvincent (13 Oct 2011 - 12:28)
Sujet clos
Aller à