28173 sujets

CSS et mise en forme, CSS3

[resolu]IE, le mouton noir

salut, je suis debutant en CSS mais ca fait longtemps que j'utilise quelque style dans mes pages, mais la je veux vraiment faire une site ou le CSS est dominant, donc j'ai coder un petit morceau de page... mais voila, je travail sous firefox... et IE n'aime pas ca, le resultat n'est pas si different mais quand meme c'est tres enuyant, je vais vous donner le code :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html>
	<head>
		<script type="text/javascript">
				document.write('<style type="text/css" media="screen">@import "index.css";<\/style>');
		</script>
	</head>
	<body>
		<div id="entete"></div>
		<div id="tete" class="trans70">
			BLABLA
		</div>
	</body>
</html>


avec pour fichier css :
index.css

html {
	height: 100%;
}

body {
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%;
	font-family: times;
	color: #000000;
	text-align: center;
	background: #999999 url(images/display/pellicule.png) repeat-y left;
	background-attachment: fixed;
}

p {
	font-weight: bold;
}

#entete {
	position: absolute;
	width: 100%;
	height: 100%;
	background: url(images/display/pelliculeh.png) repeat-x;
}

#tete {
	position: relative;
	margin-left: auto;
    margin-right: auto;
	width: 800px;
	height: 150px;
	background: #2299ff;
}

.trans70 {
	filter: alpha(opacity=70);  
	-moz-opacity: 0.7;
	opacity: 0.7;
	-khtml-opacity: 0.7;
}


il se trouve que sous IE (6 et 7) l'arriere plan de la div "entete" ne s'etend pas sur toute la largeur de la page.

pourquoi ?

merci d'avance Smiley smile
Modifié par yvesall (03 Oct 2007 - 14:48)
Bonjour,

Alors d'abord je proteste, parce que le mouton noir, c'est moi, et certainement pas IE. Smiley lol

Maintenant que ça c'est mis au point, IE a parfois du mal avec la position absolue. D'ailleurs question, pourquoi une position absolue pour l'entête ? Sans, étant donné que c'est un élément en 'display: block', il prendrait naturellement toute la largeur, sans qu'il soit nécessaire de le lui préciser.
Hello,

Heu... j'ai vu une horreur sans nom, là, je peux revenir dessus une seconde?
Alors voilà, ça se passe ici:
<script type="text/javascript">
	document.write('<style type="text/css" media="screen">@import "index.css";<\/style>');
</script>

Alors on corrige rapidement, et ça donne ceci:
<style type="text/css" media="screen">@import "index.css";<\/style>

Je ne vois pas une seule raison solide qui amènerait à générer en Javascript l'appel à la feuille de style. Mais c'est peut-être un cas très très particulier?
en enlevant position absolute dans #entete, la tete se retourve catapulter tout en bas de la page ( car #entete a une hauteur de 100%).
en effet cette fois l'arriere plan va jusqu'au bout, mais la div "tete" ne passe plus par dessus. comment faire alors ?
yvesall a écrit :
en enlevant position absolute dans #entete, la tete se retourve catapulter tout en bas de la page ( car #entete a une hauteur de 100%).

S'il s'agit uniquement de placer une image de fond, pourquoi ne pas le faire avec un bloc conteneur plutôt qu'avec un bloc vide?

C'est à dire plutôt:
<div id="entete">
	<div id="tete" class="trans70">
		BLABLA
	</div>
</div>
Hello,
Florent V. a écrit :
Je ne vois pas une seule raison solide qui amènerait à générer en Javascript l'appel à la feuille de style. Mais c'est peut-être un cas très très particulier?

Ca peut être utile pour appliquer une feuille de styles quand JavaScript est disponible, et éviter ainsi le "clignotement" dû à l'arrivée tardive de l'événement "load". Mais ça ne semble pas être le cas ici.
lol, il se trouve que le code complet j'y avais mis une condition en fonction du navigateur, ne trouvant pas la solution pour ce probleme. mais le probleme est resolu maintenant, j'ai enlever le position: absolute dans #entete, et j'ai
mis la tete dans l'entete:


<div id="entete">
   <div id="tete" class="trans70">
      BLABLA
   </div>
</div>

et la ca marche partout
Sujet clos
Aller à