Partage

encore des soucis avec IE

pour un autre site

6 mars 2006 à 20:04:39

j'ai un probleme de decalage de la div (celle contenant le logo xiti) sur mon site avec IE d'ou vient le souci svp?

Citation : xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>PINKUP</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<link rel="stylesheet" media="screen" type="text/css" title="Exemple" href="style2.css" />
</head>

<body>


<div id="header">
</div>

<div id="menu">
<div class="element_menu">
<ul>
<li><a href="#.html">Accueil</a></li>
<li><a href="news.html">news</a></li>
<li><a href="galerie.html">La galerie</a></li>
<li><a href="participer.html">Participer</a></li>
<li><a href="membres.html">Accès membres</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="partenaires.html">Partenaires</a></li>
<li><a href="credits.html">Crédits</a></li>
</ul>
</div>
</div>

<div id="menu2">
<p>
<a class="validate" href="http://validator.w3.org/check?uri=referer"><img src="images/xhtml.png" alt="valide xhtml 1.1"/></a><br />
<a class="validate" href="http://jigsaw.w3.org/css-validator/check/referer"><img src="images/css.png" alt="valide css"/></a><br />
<a class="validate" href="http://www.mozilla-europe.org/fr/products/firefox/"><img src="images/firefox.png" alt="compatible firefox"/></a><br />
</p>

<p><a href="http://www.xiti.com/xiti.asp?s=241605" title="Mesurez votre audience">
<script type="text/javascript">

</script>
<noscript>
<p>analyse mesure frequentation internet par <img style="width:39px; height:25px;" src="http://logv30.xiti.com/hit.xiti?s=241605&p=" alt="Analyse d'audience" /></p>
</noscript></a>
</p>

<p>Pour un affichage optimal de ce site, il est conseillé d'utilisé le navigateur Mozilla Firefox. Vous pouvez le télécharger <a href="http://www.mozilla-europe.org/fr/products/firefox/">ici</a>
</p>
<p>Dernière mise à jour le 06/03/2006</p>
</div>



<div id="corps">

<h2>PINKUP c'est quoi?</h2>
<p>
PINKUP est un site qui a pour but de rendre hommage à la beauté du corps humain dans son plus simple appareil.
Mais PINKUP a aussi la vocation de rendre hommage aux personnes qui savent le mettre en valeur. Vous trouverez
donc dans la rubrique <a href="galerie.html">galerie</a> une serie de photos de nus artistiques, contributions que les visiteurs de
PINKUP auront réalisées.
</p>

<h2>A qui s'adresse ce site ?</h2>

<p>
A tout le monde ! Photographes amateurs ou professionnels, et plus simplement à tous ceux qui veulent apporter leur contribution.
Pour savoir comment envoyer vos photos à PINKUP rendez-vous vite dans la rubrique <a href="fonction.html">fonctionnement</a>. Mais
il s'adresse aussi à tous les visiteurs qui veulent se laisser charmer par des courbes féminines, un corps athlétique, le ventre rond d'une
femme enceinte etc...
</p>

<h2>Un site amené à évoluer</h2>

<p>
PINKUP se veut être un site vivant par vos contributions, par une évolution de la présentation
mais également du contenu. Alors quand vous passez par là n'hesitez surtout pas à faire un tour par la rubriques <a href="news.html">news</a>
pour y découvrir toutes les nouveautés apportées et les projets à venir.
</p>
</div>



<div id="footer">
</div>

</body>
</html>

Citation : css

/*
Design by Damski
http://www.damski.xooit.net
*/

body
{
width: auto;
margin: auto;
/*border-left: 5px solid #585858;*/
background-color: #FFf;
background-image: url("images/motif.jpg");
background-repeat: repeat-y;
}

img
{
border: none;
}

h1, h2, h3 {
margin: 0px;
}

#header
{
width: 650px;
height: 412px;
margin: 0px;
background-image: url("images/header.jpg");
background-repeat: no-repeat;
}

#menu
{
width: 386px;
height: 234px;
margin: 0px;
float: left;
background-image: url("images/menu.jpg");
background-repeat: no-repeat;
text-align: right;
font: normal 9px "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
color: #fff;
}

#menu a.validate
{
color: black;
}

.element_menu ul
{
list-style-type: none;
padding-top: 5px;
padding-right: 30px;
text-align: right;
margin: 0px;
}

.element_menu a
{
width: 187px;
text-decoration: none;
font: normal 11px verdana, "Lucida Grande", "Lucida Sans Unicode", lucida, sans-serif;
color: #fff;
}

.element_menu a:hover
{
font: italic bold 20px arial, "Lucida Grande", "Lucida Sans Unicode", lucida, sans-serif;
color: #fff;
text-decoration: none;
}

#menu2
{
width: 234px;
height: 204px;
margin: 0px;
margin-left: 386px;
text-align: center;
padding: 15px;
color: #585858;
font: normal 11px "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
background-color: #fff;
background-image: url("images/menu_2.jpg");
background-repeat: no-repeat;
}

#menu2 a
{
color: #585858;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
text-decoration: underline;
}

#corps
{
width: 620px;
height: auto;
margin: 0px;
padding: 15px;
color: #FF0899;
font: normal 11px "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
text-align: justify;
background-color: #fff;
}

#corps h1
{
color: #585858;
text-align: center;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
}

#corps h2
{
font: bold 14px "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
color: #585858;
text-align: left;
}

#corps a
{
color: #585858;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
text-decoration: underline;
}

#corps li
{
margin-left: 15px;
padding-left: 5px;
padding-bottom: 5px;
}

h3.news
{
color: #585858;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;

}

p.date
{
color: #585858;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;

}

img.miniature
{
border: 1px solid white;
}

#footer
{
width: 650px;
height: 141px;
margin: 0px;
background-image: url("images/footer.jpg");
background-repeat: no-repeat;
}

damski

7 mars 2006 à 21:57:12

danick

7 mars 2006 à 23:09:27

utilise la fonction code et non la fonction citation(je parle de ton post)

kabuto_fr

8 mars 2006 à 3:03:17

Salut,

utilise ceci en debut de CSS:

*
{
margin: 0;
padding: 0;
}

damski

8 mars 2006 à 10:27:42

kabuto_fr ça ne m'enleve toujours pas cette petite marge et je vois pas d'ou ça peu venir

(ok danick)

kabuto_fr

8 mars 2006 à 14:29:35

Salut,

Je vien d'aller voire ton site et tu n'as pas fais la modif que je t'ai donner.
Si tu test chez toi pence a rafrechir la page et vider le cache avant de dire que ca ne fonctionne pas.
Car j'ais tester chez moi et ca fonctionne.

@+

damski

8 mars 2006 à 23:09:40

si je t'assure j'ai bien testé et ça m'enleve toutes les marges des titre et autre mais cette marge là ne disparait pas ça vient peut etre de ma version de IE non?

damski

9 mars 2006 à 13:07:54

Neoshin

10 mars 2006 à 0:01:49

IE n'affiche pas la même chose que mozilla car il ne gèrent pas les bordures de la même façon.

Alors il te faut un code différent pour IE et pour Mozilla...

Tu peux le faire grace à cet élément
* html ->pour IE
html>body ->pour mozilla, etc...

L'élément qui pose problême c'est la taille ou la position de menu2

#menu2
{
width: 234px;
height: 204px;
margin: 0px;
margin–left: 386px;
text–align: center;
padding: 15px;
color: #585858;
font: normal 11px "Lucida Grande"‚ "Lucida Sans Unicode"‚ verdana‚ lucida‚ sans–serif;
background–color: #fff;
background–image: url("images/menu_2.jpg");
background–repeat: no–repeat;
}

Voici comment le modifier :

#menu2
{

height: 204px;
margin: 0px;
margin–left: 386px;
text–align: center;
padding: 15px;
color: #585858;
font: normal 11px "Lucida Grande"‚ "Lucida Sans Unicode"‚ verdana‚ lucida‚ sans–serif;
background–color: #fff;
background–image: url("images/menu_2.jpg");
background–repeat: no–repeat;
}
* html #menu2 { width: 231px; } /*Taille IE*/
html>body #menu2 { width: 234px; } /*Taille mozilla*/

Ou alors :

#menu2
{
width: 234px;
height: 204px;
margin: 0px;

text–align: center;
padding: 15px;
color: #585858;
font: normal 11px "Lucida Grande"‚ "Lucida Sans Unicode"‚ verdana‚ lucida‚ sans–serif;
background–color: #fff;
background–image: url("images/menu_2.jpg");
background–repeat: no–repeat;
}
* html #menu2 { margin–left: 383px; } /*Positionnement IE*/
html>body #menu2 { margin–left: 386px; } /*Positionnement mozilla*/

damski

10 mars 2006 à 0:09:07

salut Neoshin,
je sais pas si t'as essayer mais en tout cas ça ne marche pas chez moi, ni avec la correction pour la taille, ni avec celle pour le positionnement.

Neoshin

10 mars 2006 à 0:16:19

et bien chez moi ça marche !

Désolé, il doit y avoir un autre prob!

damski

10 mars 2006 à 0:18:26

c'est lequel qui fonctionne chez toi?
parce que meme en vidant le cache sous IE sans change rien

Neoshin

10 mars 2006 à 0:30:49

Les 2,

mais ton problême doit commencer bien avant au niveau du positionnement des blocs faudrait que je creuse d'avantage

damski

10 mars 2006 à 0:33:12

c'est bien gentil de voir le problème. Moi j'ai beau avoir relu mon code un bonne trentaine de fois et je ne vois pas ou ça cloche.

Neoshin

10 mars 2006 à 1:09:24

La aujourd'hui j'abdique!!!! :-°

J'arrive pas a comprendre pourquoi on peut pas bouger ce p.t#@. de bloc. o_O

Quoi que j'ai tenté, impossible de collé les 2 parties du menu :colere:

Je suis désolé de ne pas avoir pu t'aider mais la jsuis crevé.

damski

10 mars 2006 à 1:45:35

c'est pas grave merci quand meme d'avoir essayer. Bonne nuit

damski

11 mars 2006 à 20:22:46

Neoshin

14 mars 2006 à 20:15:20

Bon je suis bloqué en bas débit, saleté de FREE !!!!
et j'ai pas trop le temps de m'occuper de ta demande.

Mais je peux peut être t'aiguiller pour le résoudre.
http://www.cssplay.co.uk/boxes/floatfix.html

Google devrait t'aider pour la petite partie anglaise

Sinon ça explique que IE rajoute une marge de 3px....
Le reste se trouve dans le code source.

J'espère que ça résoudra ton problême ou du moins que ça t'apporteras un début de solution

Sinon j'essaierai plus tard quand j'aurais un peu plus de temps.

damski

14 mars 2006 à 22:14:54

merci Neoshin pour ce tuyau malheureusement j'ai absolument pas compris comment corriger le souci.
j'ai essayer avec des position absolute ça marche nickel sauf que mon corps a une auteur variable et que du coup je n'arrive pas a positionner mon footer peut etre ya t-il une solution a cette alternative ?

Neoshin

15 mars 2006 à 20:33:45

Ca y est, j'ai bidouillé un moment mais ça fonctionne

/*
Design by Damski
http://www.damski.xooit.net
*/

/*-------------------------------------------------------------------------------*/
/*----------------------------------- Design ------------------------------------*/
/*-------------------------------------------------------------------------------*/

html
{
background: url("http://pinkup.info/images/motif.jpg") repeat-y fixed;
}

body
{
width: 652px;
margin: 0 auto;
position:relative;
}

#header
{
width: 650px;
height: 412px;

position:relative;
margin: 0;

background: url("http://pinkup.info/images/header.jpg") no-repeat;

}

#menu
{
width: 386px;
height: 234px;

position:relative;

margin: 0;

background: url("http://pinkup.info/images/menu.jpg") no-repeat;
float: left;
}

#menu2
{
width: 264px;
height: 234px;

position:relative;

background: url("http://pinkup.info/images/menu_2.jpg") no-repeat;
}
* html #menu2 { margin: -236px 0px 0px 386px; }/*positionnement menu2 sur IE*/
html>body #menu2 { margin: 0px 0px 0px 386px; }/*positionnement menu2 sur firefox*/

#corps
{
width: 650px;
height: auto;

clear: left;
position:relative;

margin: 0px;
padding: 15px;

}

#footer
{
width: 650px;
height: 141px;

position:relative;
margin: 0px;

background: url("http://pinkup.info/images/footer.jpg") no-repeat;
}

/*------------------------------ Fin du design ----------------------------------*/

/*-------------------------------------------------------------------------------*/
/*---------styles concernant les éléments du site(texte, lien ...)---------------*/
/*-------------------------------------------------------------------------------*/

#menu
{
text-align: right;
font: normal 9px "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
color: #fff;
}

#menu2
{
text-align: center;
font: normal 11px "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;

color: #585858;
background-color: #fff;
}

#corps
{
font: normal 11px "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
text-align: justify;

color: #FF0899;
background-color: #fff;
}

img
{
border: none;
}

p, h1, h2, h3 {
margin: 0px;
}

#menu a.validate
{
color: black;
}

.element_menu ul
{
list-style-type: none;
padding-top: 5px;
padding-right: 30px;
text-align: right;
margin: 0px;
}

.element_menu a
{
width: 187px;
text-decoration: none;
font: normal 11px verdana, "Lucida Grande", "Lucida Sans Unicode", lucida, sans-serif;
color: #fff;
}

.element_menu a:hover
{
font: italic bold 20px arial, "Lucida Grande", "Lucida Sans Unicode", lucida, sans-serif;
color: #fff;
text-decoration: none;
}

#menu2 a
{
color: #585858;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
text-decoration: underline;
}

#corps h1
{
color: #585858;
text-align: center;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
}

#corps h2
{
font: bold 14px "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
color: #585858;
text-align: left;
}

#corps a
{
color: #585858;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
text-decoration: underline;
}

#corps li
{
margin-left: 15px;
padding-left: 5px;
padding-bottom: 5px;
}

h3.news
{
color: #585858;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;

}

p.date
{
color: #585858;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;

}

p.galerie
{
text-align: center;
}

img.miniature
{
border: 1px solid #000;
}
/*------------------------------ Fin des styles ----------------------------------*/

Par contre les adresses sont toutes en absolues.
J'étais obligé pour utiliser tes images,... ça je te laisse le corriger.

En suite t'auras un petit bug.
Pour éviter que menu2 se décale vers le bas à cause des marges de la balise <p>, je les ai définis à 0.

Donc pour espacer tes paragraphes entre eux, il va falloir que tu utilise la balise <br/>

damski

17 mars 2006 à 11:45:41

ça y est j'y suis arrivé un peu par hasard je dois dire mais c'est enfin bon ( et sans supprimer les marges des titres ou paragraphes ) ta solution causer des soucis avec firefox en fait mais fonctionné nickel avec IE en fait le probleme venais tout simplement du margin:auto du body, regarde le code maintenant il y a les float mais plus de margin-top ou left comme quoi des fois avec les css on vas cherhcer pdt des jours et en fait c'est un truc tout bete. sinon je te dis un grand merci par ce que tu t'es vraiment démené alors MERCI à toi Neoshin.

Citation : css

/*
Design by Damski
http://www.damski.xooit.net
*/

body
{
width: auto;
margin: 0;
background-color: #FFf;
background-image: url("images/motif.jpg");
background-repeat: repeat-y;
}

img
{
border: none;
}

h1, h2, h3 {
margin: 0px;
}

#header
{
width: 650px;
height: 412px;
margin: 0px;
background-image: url("images/header.jpg");
background-repeat: no-repeat;
}

#menu
{
width: 386px;
height: 234px;
float: left;
margin: 0px;
background-image: url("images/menu.jpg");
background-repeat: no-repeat;
text-align: right;
font: normal 9px "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
color: #fff;
}

#menu a.validate
{
color: black;
}

.element_menu ul
{
list-style-type: none;
padding-top: 5px;
padding-right: 30px;
text-align: right;
margin: 0px;
}

.element_menu a
{
width: 187px;
text-decoration: none;
font: normal 11px verdana, "Lucida Grande", "Lucida Sans Unicode", lucida, sans-serif;
color: #fff;
}

.element_menu a:hover
{
font: italic bold 20px arial, "Lucida Grande", "Lucida Sans Unicode", lucida, sans-serif;
color: #fff;
text-decoration: none;
}

#menu2
{
width: 234px;
height: 204px;
float: left;
margin: 0px;
text-align: center;
padding: 15px;
color: #585858;
font: normal 11px "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
background-color: #fff;
background-image: url("images/menu_2.jpg");
background-repeat: no-repeat;
}

#menu2 a
{
color: #585858;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
text-decoration: underline;
}

#corps
{
width: 620px;
height: auto;
margin: 0px;
padding: 15px;
color: #FF0899;
font: normal 11px "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
text-align: justify;
background-color: #fff;
}

#corps h1
{
color: #585858;
text-align: center;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
}

#corps h2
{
font: bold 14px "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
color: #585858;
text-align: left;
}

#corps a
{
color: #585858;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
text-decoration: underline;
}

#corps li
{
margin-left: 15px;
padding-left: 5px;
padding-bottom: 5px;
}

h3.news
{
color: #585858;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;

}

p.date
{
color: #585858;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;

}

p.galerie
{
text-align: center;
}

img.miniature
{
border: 1px solid #000;
}

object.essai
{
width: 600px;
height: 400px;
}

#footer
{
width: 650px;
height: 141px;
margin: 0px;
bottom:0px;
background-image: url("images/footer.jpg");
background-repeat: no-repeat;
}