IE prise en compte de la bordure dans taille

**charliejo** · 12/12/2008, 10h11

Bonjour,
J'ai un div pour un bandeau d'entete.
L'idée c'est que en image de fon j'ai une image qui se répète afin de faire un trait...
Et que par dessus je pose une image, et le trait doit se caler avec un trait présent dans l'image...
Sous Firefox pas de problème, mais sous ie, comme j'ai une bordure à mon div, il me décale mon image de la hauteur de la bordure et les traits ne sont plus alignés...Comment supprimer ce décalage de IE.
Je mets mon code.

Code :

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

1
2
3
<div id="EntetePage">
		<div id="Logo"><img src="IMG/siteon1.gif" alt="" />
</div>

Avec comme css

Code :

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

1
2
3
4
5
6
7
div#EntetePage {
	background-image: url(IMG/traithaut.gif);
	background-repeat: repeat-x;
	background-position: top left;
	position:relative;
	border: 2px solid /*bordures*/ #bb0000 ;
	}

Merci

**Bisûnûrs** · 12/12/2008, 10h20

Mettre un DOCTYPE complet et valide :
http://xhtml.developpez.com/faq/?pag...#html_doctypes

**charliejo** · 12/12/2008, 10h24

J'ai bien un doctype

Code :

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

1
2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

**Bisûnûrs** · 12/12/2008, 10h32

Alors tu conviendras que n'ayant pas les images en question, il nous sera difficile de te répondre précisément. As-tu un exemple en ligne de ton problème ? Précise aussi quelles versions de IE te posent souci.

**charliejo** · 12/12/2008, 11h25

Alors j'ai mis l'exemple sous
www.kalaninformatique.fr/temp/

Le fichier Exemple.html...et vous pouvez récupérer le css et les images....

Sous Firefox 3, c'est ce que je veux.
sous IE7, le trait est décalé
Sous IE6, cela s'affiche puis disparait.

Merci

**Bisûnûrs** · 12/12/2008, 11h57

Tu peux corriger le problème en donnant un layout à ton div EntetePage en lui précisant par exemple width:100%.

**charliejo** · 12/12/2008, 12h04

Super!
Merci

**c_s_s** · 12/12/2008, 12h05

...Ou en mettant un overflow:hidden sur div#EntetePage.

**charliejo** · 12/12/2008, 12h33

Ok, l'un ou l'autre fonctionne...
Pendant que je suis sur cette exemple.
Comment je fais pour que si je rétrécie la taille de la fenêtre IE, l'image de droite passe sous le logo et non revienne à la ligne? (Je vais mettre le logo transparent....
Merci

**Bisûnûrs** · 12/12/2008, 14h14

Tu ne peux pas superposer deux éléments comme ça. Ils sont hors flux mais interagissent encore entre eux. Une solution serait de les positionner en absolu, mais c'est une méthode que je ne recommande pas, d'autant que pour que ton image de droite se mette en-dessous, il faut vraiment réduire la fenêtre, donc à mon avis il ne faut pas en tenir compte.

**charliejo** · 12/12/2008, 14h46

Ok, merci pour les réponses!

**devyan** · 12/12/2008, 15h11

Envoyé par charliejo

Ok, l'un ou l'autre fonctionne...
Pendant que je suis sur cette exemple.
Comment je fais pour que si je rétrécie la taille de la fenêtre IE, l'image de droite passe sous le logo et non revienne à la ligne? (Je vais mettre le logo transparent....
Merci

Salut,

Une solution consiste à "tricher" en modifiant la structure de ton entête...

Je m'explique :

Au lieu d'avoir 2 images dans ton cadre (une à gauche, l'autre à droite) il suffit de rajouter un niveau d'imbrication pour en éliminer une (celle de droite dans mon exemple).

Code exemple avec la fin passant sous le début (HTML) :

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

1
2
3
4
5
6
 
<DIV id="EntetePage">
  <div id="banniere_gif">
  <IMG style="FLOAT: left; HEIGHT: 111px" alt="" src="img/siteon1.gif" /> 
  </div>
</DIV>

Code exemple avec la fin passant sous le début (CSS) :

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

1
2
3
4
5
6
7
8
9
 
#banniere_gif {
  width: 100%; /* pour recouvrir entièrement #EntetePage */
  height: 100%;
  background-color: transparent; /* pour toujours voir la ligne de #EntetePage */
  background-image : url(img/banniere.gif);
  background-repeat: no-repeat;
  background-position: top right; /* pour placer l'image à droite */
}

Attention ! Si "banniere.gif" ne fait pas la bonne dimension (height:111px) cette solution ne pourra pas fonctionner.

IE prise en compte de la bordure dans taille

CSS

Discussions similaires

Partager

Partager