[CSS][IE]background d'affiche pas dans div sur IE

**Thomzz** · 19/09/2005, 16h03

J'ai une entête divisée en 3 verticalement, avec sur les 2 coins des images en background qui s'affichent nikel (div à la dimension de l'image), mais pour ma partie du milieu (background en mozaïque), pas moyen de la faire afficher sur IE alors que FF marche au taquet !

code html:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 <html>
<head><title>Bienvenue</title>
 <link href="css/style_essaie2.css" rel="stylesheet" type="text/css">
 
</head>
<body>
 
<div id="topleft">
</div>
 
<div id="top">
</div>
 
<div id="topright">
</div>
 
blabla <!-- compteurs [fin] -->

feuille CSS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
 
#top {
 
	position: absolute;
	top: 0px;
	left: 200px;
	right: 200px;
	padding: 0px;
	border: 0px;
	background-image:url(rideauhaut.jpg);
	height: 99px; 
	}
 
 
#topleft {
	position: absolute;
	top: 0px;
	left: 0px;
	margin: 0px;
	padding: 0px;
	border: 0px;
	color: black;
	background-color: black;
	background-image: url(rideauhgauche.jpg);
	width: 200px; 
	height: 99px
	}
 
#topright {
	position: absolute;
	top: 0px;
	right: 0px;
	margin: 0px;
	padding: 0px;
	border: 0px;
	color: black;
	background-color:black;
	background-image:url(rideauhdroit.jpg);
	width: 200px; 
	height: 99px
	}

Je suppose que ça a été déja posé et résolu, mais j'ai rien trouvé dsl
Merci d'avance de votre charyT

**spirou** · 19/09/2005, 18h39

Salut,

Peut-être :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
   background-image:url(rideauhaut.jpg) repeat-x;

Mais il me semble que j'ai déjà été confronté à ce problème, et je crois que cela vient de la position absolute que IE n'interprète pas lorsque la largeur n'est pas définie.

Et en faisant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
#top {
   margin-left: 200px;
   margin-right: 200px;
   padding: 0px;
   border: 0px;
   background-image:url(rideauhaut.jpg);
   height: 99px;
   }

:

**SIBELIUS** · 19/09/2005, 23h49

Salut,

Ton élément #top n'a pas de largeur définie, or il est positionné en absolu (pourquoi d'ailleurs ?), donc il n'occupe que la place de son contenu.
Son contenu étant vide, #top n'occupe aucune dimension.
L'arrière-plan n'est donc pas visible correctement.

Par ailleurs, je pense que les positionnements absolus ne sont pas nécessaire dans ton cas de figure et ils complexifient la chose... à moins que tu n'aies une idée derrière la tête.

**SpaceFrog** · 20/09/2005, 08h37

Je crois que la syntaxe 'officielle' comporte des quotes ou guillemets car l'url est un string ...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 background-image:url('rideauhaut.jpg');

**SIBELIUS** · 20/09/2005, 09h19

Envoyé par SpaceFrog

Je crois que la syntaxe 'officielle' comporte des quotes ou guillemets car l'url est un string ...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 background-image:url('rideauhaut.jpg');

Non, les guillemets ne sont pas obligatoires.
Il vaut mieux les éviter d'ailleurs car l'image d'arrière-plan ne s'affiche pas sur IE/Mac si elle est déclarée avec des guillemets.

La réponse est simplement que le bloc #top n'occupe pas de dimension dans la page.

**Thomzz** · 20/09/2005, 11h14

Merci bien pour vos réponses, mais ça bug toujours :
En effet c'est bien absolute qui est mal interprété,
mais si je ne met pas la position absolute (comme le script de la réponse de spirou), mon image de fond s'affiche mal : il y a des marges en haut, et sur les côtés au niveau de ma div "top",
or, je voudrais que l'on ne voit pas la différence entre mes blocs "topright" "top" et "topleft"

Est il possible de virer ces marges sans mettre en absolute ??

merchi bien

**SIBELIUS** · 20/09/2005, 11h24

Envoyé par Thomzz

Est il possible de virer ces marges sans mettre en absolute ??
:

Oui, mais l'élément <div> n'a pas de marges, tes marges viennent donc des éléments qui le compose.
Tu peux les régler individuellement en les mettant à zéro.

**Thomzz** · 21/09/2005, 23h32

Envoyé par SIBELIUS

Oui, mais l'élément <div> n'a pas de marges, tes marges viennent donc des éléments qui le compose.
Tu peux les régler individuellement en les mettant à zéro.

Le problème, c'est que mon <div> ne contient rien du tout, c'est juste le background qui a des marges pour je ne sais quelle raison :
voir http://perso.enstimac.fr/~realreal/css2/

Merci

[CSS][IE]background d'affiche pas dans div sur IE

CSS

Vue hybride

Discussions similaires

Partager

Partager