Espaces vertical entres les images sur internet explorer.

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Espaces vertical entres les images sur internet explorer.

Cheinz

Salut, bon alors voila, j'essaye d'adapter ce design en CSS: http://www.manganimes.com/prez.jpg et bon j'ai un petit problème, quand je fais la partie MENU, ca marche bien sur mozilla mais sur Internet Explorer ca donne ca: http://www.manganimes.com/ie_de_merde.jpg

Vous sauriez pas comment enlever ces espaces tout pas beau entre les images?

Je précise que je travaille avec des div mais que cette partie la, ce n'est que des images l'une dessous l'autre dans un div, il n'y a pas un div pour chaque image.

Merci d'avance.

Publicité

KangOl

Profil : pointeur

pas de chance j'ai oublier ma boule de cristal au boulot

---------------
Nos estans firs di nosse pitite patreye...

meerthyl

Code :

img {
display: block;
}

Et tu vires les <br /> entre.

A moins que le tirage des cartes ne m'ait menti, ce doit être ça.

Cheinz

Euuh non la ca me fait un truc tout bizarre: http://www.manganimes.com/test2.jpg

Si vous voulez la source (avec le display: block la voici:

Code :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Document sans titre</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
background-color: #DDDDDD;
font-family: Verdana;
font-size: 12px;
}
/*----------------------------------------------------*/
.entete {
padding: 0px;
height: 100px;
width: 750px;
border: 1px solid #000000;
background-image: url(banner.jpg);
background-repeat: no-repeat;
position: absolute;
left: 10px;
top: 10px;
}
/*----------------------------------------------------*/
.menuhaut {
background-color: #E4E6F0;
background-image: url(menu_haut_fin.jpg);
background-repeat: no-repeat;
background-position: right center;
height: 19px;
width: 750px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-right-color: #000000;
border-bottom-color: #000000;
border-left-color: #000000;
vertical-align: middle;
position: absolute;
left: 10px;
top: 110px;
text-align: center;
}
/*----------------------------------------------------*/
.contenu {
padding: 0px;
width: 750px;
height: 654px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-right-color: #000000;
border-bottom-color: #000000;
border-left-color: #000000;
position: absolute;
left: 10px;
top: 129px;
}
.menugauche {
background-color: #E4E6F0;
height: 650px;
width: 149px;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #000000;
position: absolute;
left: 0px;
top: 3px;
}
.centre {
background-color: #FFFFFF;
background-image: url(main.jpg);
background-repeat: no-repeat;
background-position: center bottom;
height: 649px;
width: 450px;
position: absolute;
left: 150px;
top: 3px;
}
.menudroit {
background-color: #E4E6F0;
position: absolute;
height: 649px;
width: 148px;
left: 600px;
top: 3px;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #000000;
}
/*----------------------------------------------------*/
.menu {
background-color: #FFFFFF;
text-align: center;
border: 1px solid #000000;
position: absolute;
left: 4px;
top: 7px;
height: 274px;
width: 139px;
background-image: url(bas_menu.jpg);
background-repeat: no-repeat;
vertical-align: top;
background-position: center bottom;
}
.search {
background-color: #FFFFFF;
text-align: center;
border: 1px solid #000000;
position: absolute;
left: 1px;
top: 288px;
height: 117px;
width: 145px;
}
.site {
background-color: #FFFFFF;
text-align: center;
border: 1px solid #000000;
position: absolute;
left: 1px;
top: 413px;
height: 217px;
width: 145px;
}
img {
display: block;
}
-->
</style>
</head>
<body bgcolor="#CEDCFB">
<div class="entete"></div>
<div class="menuhaut"> <img src="menu_haut_1.jpg" alt=""> <img src="a_propos.jpg" alt="A propos" border="0">
<img src="menu_haut_inter.jpg" alt=""> <img src="aide_faq.jpg" alt="Aide/FAQ" border="0">
<img src="menu_haut_inter.jpg" alt=""> <img src="forum.jpg" alt="Forum" border="0">
<img src="menu_haut_inter.jpg" alt=""> <img src="contact.jpg" alt="Contact" border="0">
<img src="menu_haut_2.jpg" alt="">
</div>
<div class="contenu">
<div class="menugauche">
<div class="menu">
<img src="menu.jpg" width="139" height="19" alt="">
<img src="spacer.gif" width="139" height="1" alt="">
<img src="animes.jpg" width="139" height="20" alt="Animés">
<img src="spacer.gif" width="139" height="1" alt="">
<img src="manga.jpg" width="139" height="19" alt="Manga">
<img src="spacer.gif" width="139" height="1" alt="">
<img src="bdd.jpg" width="139" height="19" alt="Base de Données">
<img src="spacer.gif" width="139" height="1" alt="">
<img src="download.jpg" width="139" height="19" alt="Téléchargements">
<img src="spacer.gif" width="139" height="1" alt="">
<img src="liens.jpg" width="139" height="19" alt="Liens">
<img src="spacer.gif" width="139" height="1" alt="">
<img src="fansub.jpg" width="139" height="19" alt="Fansub">
<img src="spacer.gif" width="139" height="1" alt="">
<img src="lexique.jpg" width="139" height="19" alt="lexique">
<img src="spacer.gif" width="139" height="1" alt="">
</div>
<div class="search">
</div>
<div class="site">
</div>
</div>
<div class="centre">blabla</div>
<div class="menudroit">blabla</div>
</div>
<div class="pied"> </div>
</body>
</html>

Message édité par Cheinz le 25-10-2004 à 19:19:09

Hermes le Messager

Breton Quiétiste

Au lieu de mettre la source, met la page à disposition qu'on puisse tester un peu chez soi...

Cheinz

Voila: http://www.manganimes.com/test/index.htm

C'est nickel sous mozilla (a part kkes espaces qui chient du aux positions qui ont pas l'air d'être les mêmes sur ie et mozi) mais sous ie...

PS: j'ai enlever la redéfinition de la balise img.

Message édité par Cheinz le 25-10-2004 à 20:50:40

masklinn

í dag viðrar vel til loftárása

Code :

<div class="menu">
<img src="menu.jpg" width="139" height="19" alt="">
<img src="spacer.gif" width="139" height="1" alt="">
<img src="animes.jpg" width="139" height="20" alt="Animés">
<img src="spacer.gif" width="139" height="1" alt="">
<img src="manga.jpg" width="139" height="19" alt="Manga">
<img src="spacer.gif" width="139" height="1" alt="">
<img src="bdd.jpg" width="139" height="19" alt="Base de Données">
<img src="spacer.gif" width="139" height="1" alt="">
<img src="download.jpg" width="139" height="19" alt="Téléchargements">
<img src="spacer.gif" width="139" height="1" alt="">
<img src="liens.jpg" width="139" height="19" alt="Liens">
<img src="spacer.gif" width="139" height="1" alt="">
<img src="fansub.jpg" width="139" height="19" alt="Fansub">
<img src="spacer.gif" width="139" height="1" alt="">
<img src="lexique.jpg" width="139" height="19" alt="lexique">
<img src="spacer.gif" width="139" height="1" alt="">
</div>

kaka
un menu ca se fait à coup de listes (pareil en haut)

Et tes classes, tu pourrais les remplacer par des ids ca serait plus logique (vu que tu ne les utilises que pour un élément à chaque fois)

Sépare l'information (html) et le style (css) dans deux fichiers séparés
Ton information (html donc) n'est pas construite de manière logique/rationnelle, c'est imbitable

Ah oui, j'allais oublier, les spacers tu devrait pas en avoir besoin [:aloy]

Message édité par masklinn le 25-10-2004 à 21:19:24

---------------
I mean, true, a cancer will probably destroy its host organism. But what about the cells whose mutations allow them to think outside the box by throwing away the limits imposed by overbearing genetic regulations? Isn't that a good thing?

Cheinz

Code :

Et tes classes, tu pourrais les remplacer par des ids ca serait plus logique (vu que tu ne les utilises que pour un élément à chaque fois)

Oui je sais, mais bon c'est un test temporaire, voir comment donne ma prez' HTMLé.

Code :

Sépare l'information (html) et le style (css) dans deux fichiers séparés
Ton information (html donc) n'est pas construite de manière logique/rationnelle, c'est imbitable

Idem.

Code :

Ah oui, j'allais oublier, les spacers tu devrait pas en avoir besoin

Et comment tu fais pour faire une ligne grise d'un pixel qui fait la largeur du div?

Sinon en utilisant <li> bah: http://www.manganimes.com/test/index2.htm

Par contre sur mozilla ca passe pu.

Message édité par Cheinz le 25-10-2004 à 22:23:20

gm_superstar

Appelez-moi Super

Cheinz a écrit :

Et comment tu fais pour faire une ligne grise d'un pixel qui fait la largeur du div?

border-bottom: gray solid 1px; ?

---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog

masklinn

í dag viðrar vel til loftárása

tu joues sur le margin des <li> [:spamafote]

et j'ai du mal a voir pourquoi tu encapsules le <ul> dans un <div>

tu prends ton <ul>, tu lui colles un background gris, margin-bottom de 1px pour les <li>, tu modifies leur taille pour faire celle des images (tu peux même coller les images en background )

edit: le border ca marche aussi (gm style )

et faut vraiment que tu repenses ton html, parce qu'il est super mal foutu (me dit pas que tu le feras quand ton layout sera terminé, c'est un mensonge [:spamafote] )

Message édité par masklinn le 25-10-2004 à 22:37:34

Publicité

Cheinz

Voila j'ai essayé de modifier un peu, ca passe pas trop mal sur Internet Explorer (a part toujours un petit espace entre les images...) mais sous firefox c'est la cata...

http://www.manganimes.com/test/index3.htm

gm_superstar

Appelez-moi Super

Bah c'est juste un padding ou une marge par défaut à faire sauter sur UL ou LI...

---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog

Cheinz

Viens de tester, c'est pareil, autant margin que padding et que ce soit sur ul ou li, et il n'y a que sur ie qu'il y a un espace. Sur fire c'est décalé sur la droite mais il n'y a pas d'espace.

gm_superstar

Appelez-moi Super

Cheinz a écrit :

Viens de tester, c'est pareil

Tu as mal testé.

---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog

Cheinz

http://www.manganimes.com/test/index4.htm

Voila, pour moi c'est pareil, sur ie il y a un espace de quelques pixels et sur firefox ca merdouille.

Message édité par Cheinz le 26-10-2004 à 00:32:06

gm_superstar

Appelez-moi Super

gm_superstar a écrit :

Bah c'est juste un padding ou une marge par défaut à faire sauter sur UL ou LI...

---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog

masklinn

í dag viðrar vel til loftárása

comme gm, et le div est bien inutile, et faudrait vraiment nettoyer le CSS et compacter un peut tout ca
non parce que genre

Code :

background-color: #E4E6F0;
background-image: url(menu_haut_fin.jpg);
background-repeat: no-repeat;
background-position: right center;

ca, ca se fait en 1 ligne

Code :

border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-right-color: #000000;
border-bottom-color: #000000;
border-left-color: #000000;

2 lignes pour ca
etc etc

Cheinz

Masklinn: Oui mais ca je m'en fou un peu pour le moment, c'est pour voir comment faire et comment ca donne, c'est la première fois que j'essaye le css.

Une fois fini je recommence tout proprement. Voila.

Sinon gm_superstar j'ai sur les 2 class des UL, padding: 0px; je vois pas ce que tu veut dire d'autres par faire sauter.

gm_superstar

Appelez-moi Super

Opx != 0px

---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog

Cheinz

Ben.... vi je suis d'accord mais j'ai pas mit O mais 0 donc... (et si j'avais mi des O je viens de tester en mettant bien des 0 bah c'est pareil)...

masklinn

í dag viðrar vel til loftárása

gm_superstar a écrit :

Opx != 0px

whoa :ouch:

gm_superstar

Appelez-moi Super

Cheinz a écrit :

Ben.... vi je suis d'accord mais j'ai pas mit O mais 0 donc...

Ah ouais ?

http://www.manganimes.com/test/index4.htm

Code :

.liste_menu {
background-color: #FFFFFF;
border: 1px solid #000000;
height: 273px;
width: 139px;
background-image: url(bas_menu.jpg);
background-repeat: no-repeat;
background-position: center bottom;
margin-left: 4px;
margin-top: 4px;
margin-bottom: 0px;
padding: Opx;
}

---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog

KangOl

Profil : pointeur

avec un vrai editeur ce genre d'erreur n'arrive jamais...

---------------
Nos estans firs di nosse pitite patreye...

Cheinz

Oui c'est possible que la je me sois gourré mais j'ai retester en mettant bien des 0 et pas des O (vais pas réup a chaque fois que je modif' un caractère) et c'est pareil, si tu veut voir: http://www.manganimes.com/test/index5.htm

Et si quelqu'un pouvait me dire pourquoi ca merde complet sur firefox aussi.

Message édité par Cheinz le 26-10-2004 à 01:31:49

masklinn

í dag viðrar vel til loftárása

Cheinz a écrit :

Et si quelqu'un pouvait me dire pourquoi ca merde complet sur firefox aussi.

Mytho mytho maaaan :whistle:
ksss, ban d'image, cliquez ici pour screenshot site sous Firefox

Et si ca merde, c'est parce que c'est codé comme un porc bordel, commence par faire ca bien t'auras largement moins de problèmes [:spamafote]

Message édité par masklinn le 26-10-2004 à 01:38:57

Cheinz

Oui désolé, c'est l'index 4 qui merdé, le 5 ca passe. Mais il y a toujours ces #%$£ d'espaces sous ie.

Masklinn, je ne pense pas que faire un .css a part et optimiser les lignes de codes arrange le problème.
Pour l'html je ne vois pas vraiment ce qui merde, un div pour l'entete (entete), un div pour le menu d'en haut (menuhaut), un autre englobant la partie droite, la partie centrale et la partie gauche (contenu) et enfin un pour le footer (pied) c'est clair et ca correspond a mon design d'origine...

Maintenent si tu a d'autres idées d'arrangement...

Message édité par Cheinz le 26-10-2004 à 02:07:26

masklinn

í dag viðrar vel til loftárása

tous les divs de menus doivent être remplacés par des listes [:sisicaivrai]

Le design, quand on crée un fichier html on s'en branle, le fichier (x)html c'est la structuration logique de l'information, ensuite arrive le CSS pour mettre la dite information en forme.

Et faire un CSS à part, ca permettrait déjà de clarifier le machin et d'avoir à moins scroller
Et accessoirement ca te donnerait l'occasion de reprendre le CSS pour voir si il n'y a pas de redondances ou de conflits

Cheinz

Bon, puisque tu insistes..., referait ca demain, sur ce, vais dodo moi, bonne nuit.

gm_superstar

Appelez-moi Super

Cheinz a écrit :

Mais il y a toujours ces #%$£ d'espaces sous ie.

http://incongru.webdynamit.net/EspaceSousLesImages

---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog

Cheinz

Bon voila:

http://www.manganimes.com/test/index6.htm (style.css sans display: block; )

http://www.manganimes.com/test/index7.htm (style2.css avec display: block; )

Résultat: c'est pareil sauf le menu en haut qui merde complet.

Sinon pour les menus sur le coté, pour les 2 pages, sur Firefox c'est nickel, sur IE il y a toujours les espaces.
La ou il n'y a n'a pas sur IE c'est que les images sont mises en background, mais je peut pas le faire pour le menu principal car il y aura un rollover.

Message édité par Cheinz le 26-10-2004 à 23:32:54

masklinn

í dag viðrar vel til loftárása

Et histoire de simplifier le machin, ca te dirait pas de prendre ton image de je sais pas qui, de la coller en fond et d'ajouter les boutons (texte ou png8/gifs avec transparency) par dessus?

Comme ca tu t'en fous des erreurs d'interprétations des lists

Cheinz

Bon voila j'ai a peu prés réussit a faire ce que je voulais pour les menus mais j'ai un autre problème:

http://www.manganimes.com/test/index8.htm

Est ce que c'est possible de faire descendre tout les div (les 2 menus et le centre) en même temps que le texte descends?

Publicité

FORUM HardWare.fr

Programmation

HTML/CSS

Espaces vertical entres les images sur internet explorer.

Sujets relatifs
Images et texte avec xsl:fo	[Résolu] Problème Dfil Images
Comment cacher une page internet dans une page PHP.	Rediriger des urls d'images vers un autre site
Fonction mail : problème d'espaces dans les emails	travail sur images - objet le plus adéquat ?
Mettre une base ACCESS sur internet?	Enumerer les cases d'une table en vertical d'abord
Optimisation traitement d'images
Plus de sujets relatifs à : Espaces vertical entres les images sur internet explorer.

Page générée en 0.143 secondes