Bloc <DIV> de 2px de hauteur sous ie

Résolu/Fermé
kalber Messages postés 34 Date d'inscription mercredi 13 septembre 2006 Statut Membre Dernière intervention 16 avril 2019 - 9 janv. 2007 à 20:05
kalber Messages postés 34 Date d'inscription mercredi 13 septembre 2006 Statut Membre Dernière intervention 16 avril 2019 - 10 janv. 2007 à 13:24
Bonjour,

J'aimmerais créer une bande noir de 2px de hauteur telle que celle ci :

.header_line_h {
position: absolute;
height: 2px;
width: 100%;
top : 0px;
left : 0px;
background : #000000;
z-index: 499;
}

Sous Firefox aucun problèmes d'affichage, et bien sûr sous ie, ça n'a plus rien a voir, mon bloc fait environ 10px de hauteur et il n'est pas positionné pareil.

Captures d'écran à l'appui :

Firefox

http://www.bamboule.org/exemple_firefox.gif

IE

http://www.bamboule.org/exemple_ie.gif

Je metterais le reste du code si nécessaire.

Mais a ce niveau là, savez-vous comment rendre compatible cet affichage pour ce bougre d'explorer ?

Merci d'avance

Kalber

[edit] pareil sous ie6 et ie7

6 réponses

Gihef Messages postés 5150 Date d'inscription mercredi 20 juillet 2005 Statut Contributeur Dernière intervention 20 février 2023 2 775
9 janv. 2007 à 22:57
Bonjour,

Essaye de remplir ta <div> avec une image noire de 2px de haut (2px de large suffiisent). En la repeat-x.
 ?
C'est fait dans un tableau ?

En effet, avec le code entier, l'adresse de la page, ça serait plus facile.
0
kalber Messages postés 34 Date d'inscription mercredi 13 septembre 2006 Statut Membre Dernière intervention 16 avril 2019 6
9 janv. 2007 à 23:12
Bonjour,

Alors j'ai essayé avec repeat-x et le resultat reste visuellement le même. Voici donc mon code complet :

index.php

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="as_vert.css" type="text/css">
</head>

<body bgcolor="#7FDAA3">
			
			
			<center>
			<div class="content">
					 
					 <div class="header_up_left">
					 <img src="pics/up_left.gif">
					 </div>
					 
					  <div class="header_up_right">
					 <img src="pics/up_right.gif">
					 </div>

					  <div class="header_line_h">
					  </div>					
			
			</div>
			</center>
			
</body>
</html>



as_vert.css

.content {
				width: 800px;
				height: 800px;
				position: relative;
				left : 0px;
				top : 0px;
				z-index: 400;
				background: #B1F5D4;
							
				}
				
.header_up_left {
				position: absolute;
				left : 0px;
				top : 0px;
				z-index: 500;
				}
				
.header_up_right {
				position: absolute;
				right : 0px;
				top : 0px;
				z-index: 500;
				}
				
.header_line_h {
				position: absolute;
				height: 2px;
				width: 100%;
				top : 0px;
				left : 0px;
				background : #000000;
				z-index: 499;
				}	
0
Gihef Messages postés 5150 Date d'inscription mercredi 20 juillet 2005 Statut Contributeur Dernière intervention 20 février 2023 2 775
9 janv. 2007 à 23:31
Ce que je te proposais, c'est plutôt ça :
.header_line_h {
    position: absolute;
    height: 2px;
    width: 100%;
    top : 0px;
    left : 0px;
    background-image : url(pics/up_middle.gif);
    }
Ça marche ?
0
kalber Messages postés 34 Date d'inscription mercredi 13 septembre 2006 Statut Membre Dernière intervention 16 avril 2019 6
9 janv. 2007 à 23:40
Malheureusement non, le résultat reste inchangé

avec et sans

background-repeat: repeat-x;
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
kalber Messages postés 34 Date d'inscription mercredi 13 septembre 2006 Statut Membre Dernière intervention 16 avril 2019 6
10 janv. 2007 à 08:31
Bonjour,

ca a déja changé d'apparence sous ie. La ligne s'affiche correctement mais cette fois ci elle est située trop haut

http://www.bamboule.org/exemple_ie2.gif

le bloc à été modifié comme suit :

.header_line_h {
    position: absolute;
    height: 2px;
    width: 100%;
    top : 0px;
    left : 0px;
    background-image : url("pics/black.gif");
    background-repeat: repeat-x;
    z-index: 400;
    margin-top: 0px;
    padding-top: 0px;
    }

0
kalber Messages postés 34 Date d'inscription mercredi 13 septembre 2006 Statut Membre Dernière intervention 16 avril 2019 6
10 janv. 2007 à 13:24
Résolu grace a background-image, merci pour ton aide Ghief
0