Posez votre question Format imprimable Liste des forums Aidez-les Statistiques Rechercher Charte Forum Webmastering

Bloc <DIV> de 2px de hauteur sous ie

Dernière réponse le 10 jan 2007 à 13:24:24 kalber, le 9 jan 2007 à 20:05:22

Signaler ce message aux modérateurs

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

Configuration: Windows XP
Firefox 2.0.0.1

[edit] pareil sous ie6 et ie7

Meilleures réponses pour « Bloc

de 2px de hauteur sous ie » dans :

Hauteur minimale balise div sous IE (Résolu) Voir

[XHTML/CSS] Hauteur des balises <div> Voir

Bloquer les fenêtres pop-up Voir Rien de plus agaçant que les fenêtres de publicité intempestives qui s’ouvrent aux quatre coins de l’écran. Pourtant il est assez simple de les bloquer. Le plus souvent, il suffit de modifier l’une des options de votre navigateur. Bloquer les...

Créer une DIV avec transparence VoirLes DIV transparents en CSS Vous voulez rendre une DIV transparente ? Rien de plus simple, il suffit d'utiliser une des techniques CSS suivantes : Rendre le DIV ainsi que le contenu transparent Le div lui même sera transparent, mais aussi...

Comment bloquer un site avec IE (Résolu) Voir

Les CSS !!! IE!=FireFox (Résolu) Voir

[Javascript] Pb: DOM et IE (ajout d'elements) (Résolu) Voir

Posez votre question Répondre

Gihef, le 9 jan 2007 à 22:57:27

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.

Répondre à Gihef

kalber, le 9 jan 2007 à 23:12:06

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;
				}

Répondre à kalber

Gihef, le 9 jan 2007 à 23:31:55

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 ?

Répondre à Gihef

kalber, le 9 jan 2007 à 23:40:41

Malheureusement non, le résultat reste inchangé

avec et sans

background-repeat: repeat-x;

Répondre à kalber

kalber, le 10 jan 2007 à 08:31:06

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épondre à kalber

kalber, le 10 jan 2007 à 13:24:24

Résolu grace a background-image, merci pour ton aide Ghief

Répondre à kalber

Posez votre question Répondre