Incompatibilité

Anonyme

26 décembre 2005 à 14:31:25

Bonjour cher Zér0s

Je viens de finir de coder un design mais seulement il passe parfaitement sur IE mais sur Firefox le menu et le bloc du contenu remontent ! et depuis tout à l'heure j'y suis et impossible de le corriger !

Je vous met le code :

body
{
width : 650px;
margin: auto;
background: #576FB5;
color: #FFFFFF;
border: 1px solid black;
}

#header
{
width: 650px;
height: 123px;
background-image: url("images/header.gif");
background-repeat: no-repeat;

}

#menu_gauche
{
width: 88px;
height: 367px;
margin-bottom: 20px;
background: #805487;
left: 200px;
float: left;
margin-left: 10px;
border: 1px solid black;

}

#contenu
{
width: 483px;
height: 366px;
background: #805487;
float: right;
top: 150px;
text-align: center;
margin-right: 10px;
border: 1px solid black;
}

#footer
{
width : 650px;
height: 25px;
background-image: url("images/footer.gif");
background-repeat: no-repeat;

}

a img
{
border:0;
vertical-align:top;
}

.boutons_menu
{
width: 650px;
height: 22px;
background-image: url("images/menu/fond_barremenu.gif") ;
background-repeat: repeat-y;
text-align: center;
margin-bottom: 20px;
}

Merci

jp949

26 décembre 2005 à 14:41:09

une url svp?

Finality

26 décembre 2005 à 14:42:07

Salut un lien serait bienvenue ainsi que ton code xhtml. et met ton code entre les balise code

Anonyme

26 décembre 2005 à 14:49:32

Heu je ne peux pas vous donnez d ' url car je n'ai pas ou l'héberger donc je vous ai fait une capture d'écran :
Sous Ie : =>http://img503.imageshack.us/img503/9155/ie1dd.jpg
Sous firefox : => http://img503.imageshack.us/img503/8093/ff4rd.jpg

Sous firefox le footer remonte et pareil pour le menu et le contenu.

Pour le 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>Bienvenue !</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="style.css" />
</head>

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

<div id="barre_menu"></div>
<div class="boutons_menu">
<a href="#"><img src="images/menu/home.gif" />-</a>
<a href="#"><img src="images/menu/portfolio.gif" />-</a>
<a href="#"><img src="images/menu/blog.gif" />-</a>
<a href="#"><img src="images/menu/liens.gif" />-</a>
<a href="#"><img src="images/menu/contact.gif" />-</a>
<a href="#"><img src="images/menu/contact.gif" />-</a>
</div>

<div id="menu_gauche">bla bla bla</div>

<div id="contenu">bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
</div>

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

</body>
</html>

Finality

26 décembre 2005 à 14:56:12

Essaie ce code :

<!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>Bienvenue !</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="style.css" />
</head>

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

<div id="barre_menu">
<div class="boutons_menu">
<a href="#"><img src="images/menu/home.gif" />-</a>
<a href="#"><img src="images/menu/portfolio.gif" />-</a>
<a href="#"><img src="images/menu/blog.gif" />-</a>
<a href="#"><img src="images/menu/liens.gif" />-</a>
<a href="#"><img src="images/menu/contact.gif" />-</a>
<a href="#"><img src="images/menu/contact.gif" />-</a>
</div>
</div>

<div id="menu_gauche">bla bla bla</div>

<div id="contenu">bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
</div>

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

</body>
</html>

Je ne sais pas s çà va marcher mais essaie

jp949

26 décembre 2005 à 14:57:46

supprime le float-right a #contenu mets margin-left:140px;

Anonyme

26 décembre 2005 à 14:59:26

En effet ! c'était sa !
Merciiiiii !

EDIT = juste le footer qui veux pas descendre un peu ! il reste coller!

Finality

26 décembre 2005 à 15:02:48

utilise un margin-top
Et c'est la solution de qui qui a marché ?

jp949

26 décembre 2005 à 15:07:25

ajoute " clear:both; " dans la regle css #footer

Anonyme

26 décembre 2005 à 15:09:48

c'est la solution de jp949 qui a marché

Bon si j'utilise un margin-top c'est commme si j'avais pas vu les meme valeurs pour les 2!
Pour IE c'est tres espacés alors que Firefox pas beaucoup !
edit = j'avais pas vu ton message jp949 et le clear:both; marche super bien !
Probleme réglé ! merci a tous les 2 !

jp949

26 décembre 2005 à 15:11:53

ajoute pas margin-top juste le clear;both

Anonyme

26 décembre 2005 à 15:12:53

Oui j'ai édité

merci !

jp949

26 décembre 2005 à 15:17:40

avec plaisir et marque le probleme resolu

Anonyme

26 décembre 2005 à 16:11:57

Re ,

Désolé de vous embetez encore un peu mais j'ai encore un ptit probleme je vous montre les images :
Sous Ie : http://img510.imageshack.us/img510/4411/ie1rf.jpg
Sous Firefox : http://img510.imageshack.us/img510/2143/firefox8fm.jpg

Dans IE le texte du menu remonte alors que dans firefox il est bien centré, tout bien placé bon je vous remontre mes codes (ils ont étés un peu modifiés)

code 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>Tad'blogfolio</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="style.css" />
</head>

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

<div id="barre_menu"></div>
<div class="boutons_menu"><span class="texte_menu">
<a href="#">Home -</a>
<a href="#">Portfolio -</a>
<a href="#">Blog -</a>
<a href="#">Liens -</a>
<a href="#">Contact</a>

</div>

<div id="menu_gauche">bla bla bla</div>

<div id="contenu">bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
</div>

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

</body>
</html>

Code CSS :

body
{
width : 650px;
margin: auto;
background: #576FB5;
color: #FFFFFF;
border: 1px solid black;
}

#header
{
width: 650px;
height: 123px;
background-image: url("images/header.gif");
background-repeat: no-repeat;

}

#menu_gauche
{
width: 88px;
height: 367px;
margin-bottom: 20px;
background: #805487;
left: 200px;
float: left;
margin-left: 10px;
border: 1px solid black;

}

#contenu
{
width: 483px;
height: 366px;
background: #805487;
margin-left: 140px;
top: 150px;
text-align: center;
margin-right: 10px;
border: 1px solid black;
}

#footer
{
width : 650px;
height: 25px;
background-image: url("images/footer.gif");
background-repeat: no-repeat;
clear:both
}

a img
{
border:0;
vertical-align:top;
}

.boutons_menu
{
width: 650px;
height: 22px;
background-image: url("images/menu/fond_barremenu.gif") ;
background-repeat: repeat-y;
text-align: center;
margin-bottom: 20px;
}
.texte_menu
{
font-family: "verdana";
font-size: x-small;
}

a
{
text-decoration: none;
color: white;
margin-left: 10px;

}

Voila ! merci

jp949

26 décembre 2005 à 16:24:41

va falloir t'amuser avec le padding-top mon vieux mets: padding-top:5px;et tu diminues la hauteur de ton menu_gauche de 5px

Anonyme

26 décembre 2005 à 16:26:47

et le padding-top:5px je le met ou ? dans la class texte_menu ?

jp949

26 décembre 2005 à 16:28:35

#menu_gauche

Anonyme

26 décembre 2005 à 16:31:18

Sa fait rien !
mais quand tu dit : tu diminues la hauteur de ton menu_gauche de 5px
sa correspond à quel valeur ??
margin-bottom ?

désolé je suis débutant !

jp949

26 décembre 2005 à 16:40:18

height ou sinon annule ca et
.texte_menu a
{
font-family: "verdana";
font-size: x-small;
display:block;
}

Anonyme

26 décembre 2005 à 16:43:31

Oula ! non sa mets tout en ligne !
C'est a dire que sa met 2 barres et le texte est "de haut en bas"