Bloc <DIV> de 2px de hauteur sous ie
Résolu
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
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
Configuration: Windows XP Firefox 2.0.0.1
[edit] pareil sous ie6 et ie7
6 réponses
-
ContributeurBonjour,
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.
-
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; } -
ContributeurCe 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 ?
-
Malheureusement non, le résultat reste inchangé
avec et sans
background-repeat: repeat-x;
-
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; } -
Résolu grace a background-image, merci pour ton aide Ghief
