[Plan du site] Vous êtes ici --- > Le Site du Zéro > Les forums > Site Web > XHTML / CSS > Compatibilité IE > Lecture du sujet

Compatibilité IE

Vous devez être inscrit pour pouvoir poster des messages

Page : 1

Auteur

Message

1 visiteur sur ce sujet (1 anonyme)

Page : 1

Samaf

# Posté le 09/07/2008 à 17:56:53

Groupe : Membres

Bonjour,

Je réalise actuellement un site, sous Firefox 3 tout s'affiche bien mais sur IE il y a un problème avec le menu du haut, tenez, regardé:

http://www.samaf-officiel.fr.nf/design/index.html

Merci d'avance

Cordialement,
Samaf

Édité le 09/07/2008 à 18:09:46 par Samaf

CyberTueur

# Posté le 09/07/2008 à 17:58:22

ぼんくら

Groupe : Membres

Et c'est quoi le problème ? Je ne vois aucune différence ou presque

70|_|7 |\|'357 (_,)|_|'!££|_|5!0|\|...

Samaf

# Posté le 09/07/2008 à 18:01:01

Groupe : Membres

Tu es sur quel IE ? Car sur IE 6 y a des problème avec le menu de haut.

Édité le 09/07/2008 à 18:01:49 par Samaf

CyberTueur

# Posté le 09/07/2008 à 18:06:04

ぼんくら

Groupe : Membres

Ah, sur IE7 désolé

C'est moi ou la page que tu ous donnes n'est qu'une image ? :-°

Édité le 09/07/2008 à 18:06:17 par CyberTueur

70|_|7 |\|'357 (_,)|_|'!££|_|5!0|\|...

Samaf

# Posté le 09/07/2008 à 18:09:30

Groupe : Membres

Ha, pardon je me suis trompé de lien

http://www.samaf-officiel.fr.nf/design/index.html

J'ai édité mon premier post

obud

# Posté le 09/07/2008 à 18:12:55

Groupe : Membres

Tu es sur un forum qui est beaucoup fréquenté par des linuxiens ou des gens qui n'ont plus depuis longtemps IE6... De ce fait, Je pense que le mieu pour tout le monde serait que tu nous fasse une petite capture d'écran du problème! Ca augmentera le nombre de personnes susceptibles de t'aider.

Merci d'avance

Samaf

# Posté le 09/07/2008 à 18:15:00

Groupe : Membres

Ha, pardon,je n'ai pas pensé

Voici le petit screen: http://img179.imageshack.us/img179/8962/pbiesl3.jpg

obud

# Posté le 09/07/2008 à 19:05:44

Groupe : Membres

Code : CSS

ul#menu 
{
margin: 0;
margin-left: -40px;
height: 39px;
list-style: none;
}

à mon avis ca vient du -40px... Et pour tout te dire.. je ne vois pas son utilité... retire le pour voir

ou remplace le peut etre par un padding-left:-40px; ...

Édité le 09/07/2008 à 19:06:24 par obud

Samaf

# Posté le 09/07/2008 à 19:15:03

Groupe : Membres

Si j'enlève le margin-left ou que je met un paddding*left à la place, j'ai ce gros décalage:

http://img139.imageshack.us/img139/8761/pbie2wv7.jpg

obud

# Posté le 09/07/2008 à 19:31:29

Groupe : Membres

Oups..

désolé..
Alors je ne vois pas trop d'où peut venir le problème.. tu as essayé -20px?

Samaf

# Posté le 09/07/2008 à 21:20:45

Groupe : Membres

Sa fait pareil avec un -20px.

lunariel

# Posté le 10/07/2008 à 00:50:02

Groupe : Membres

bonjour,
essaye ça
Code : CSS

ul#menu 
{
height:39px;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin: 0px;
padding:0px;
}

Tous le web mis a nu, annuaire de sites

Samaf

# Posté le 10/07/2008 à 01:05:20

Groupe : Membres

Pour le positionnement horizontale, c'est super mais il y a encore un espace entre le menu et le header.

Cocopop

# Posté le 10/07/2008 à 01:10:50

I'm not a bot

Groupe : Membres

Donne moi le code source de toute ta page stp

Samaf

# Posté le 10/07/2008 à 01:26:07

Groupe : Membres

tien le html:

Code : HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Samaf-Officiel</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
</head>
<body>

<!-- Début du fond -->
<div id="fond">

<!-- Début du header -->
<h1 id="header">
	<img src="img/header.jpg" alt="Samaf-Officiel" />

</h1>
<!-- Fin du header -->

<!-- Début du menu -->
<ul id="menu">
		<li id="accueil"><a href="#"><span>accueil</span></a></li>
        <li id="forum"><a href="#"><span>forum</span></a></li>
        <li id="ecoute"><a href="#"><span>ecoute</span></a></li>
        <li id="telecharger"><a href="#"><span>telecharger</span></a></li>

        <li id="contact"><a href="#"><span>contact</span></a></li>
    </ul>
<!-- Fin du menu -->

<!-- Début du corps-->
	<div id="corps">
	<h3><img src="img/puces.jpg" alt="Puces" /> Lorem ipsum</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipisci elit. Et quae non non extremum satis recta id vacuitate iudicia depravare ab iudicium, si desiderat voluptate inanes ut, ut ergo dolores quae ut, id si dolorem homines opinionum numquam loco possimus est nec erit, liberos suum neque quid ut, eas.. Dicunt exeamus, viris quadam, qui semper cum quem dissentiunt, ut sic multos satis illa qua, docet ignoratione.. Idem et disserendi falli sunt motum voluptatibus ut sine nullam se familiarem animi tuentur enim ab qui quid oratione cupiditatibusque invitat ad nec isdem qui bonum omnino, vitam primorum ceteris individua, sapienti reprehendunt videri opes quibus, quem opus vix, maxime nunc habet et ita, vendibiliora eo chrysippo nec, dolorum tantum e triarius.</p>

	<h3><img src="img/puces.jpg" alt="Puces" /> Lorem ipsum</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipisci elit. Et quae non non extremum satis recta id vacuitate iudicia depravare ab iudicium, si desiderat voluptate inanes ut, ut ergo dolores quae ut, id si dolorem homines opinionum numquam loco possimus est nec erit, liberos suum neque quid ut, eas.. Dicunt exeamus, viris quadam, qui semper cum quem dissentiunt, ut sic multos satis illa qua, docet ignoratione.. Idem et disserendi falli sunt motum voluptatibus ut sine nullam se familiarem animi tuentur enim ab qui quid oratione cupiditatibusque invitat ad nec isdem qui bonum omnino, vitam primorum ceteris individua, sapienti reprehendunt videri opes quibus, quem opus vix, maxime nunc habet et ita, vendibiliora eo chrysippo nec, dolorum tantum e triarius.</p>
</div>
<!-- Fin du corps !-->

<!-- Début du footer -->
<p id="footer">&copy; 2008 - 2009 | Samaf-Officiel.fr.nf | Codage &amp; Design par <a href="http://www.kit-gratos.fr.nf">Samaf</a> | Valid: <a href="http://validator.w3.org/check?uri=referer"> xhtml </a> - 
			   <a href="http://jigsaw.w3.org/css-validator/check/referer">css</a></p>

<!-- Fin du footer -->
</div>
<!-- Fin du fond -->

</body>
</html>

et tien le css:

Code : CSS

body
{
background-image: url('img/bg.jpg');
font-family:Arial, Helvetica, sans-serif;
}

/* Début du fond */
#fond
{
margin: 0 auto;
margin-top: 50px;
background: #565859;
width: 608px;

font-size: 14px;
color: #FFFFFF;
border-color: #000000;
border-style: solid;
border-width: 1px;
}
/* Fin du fond */

/* Début du header */
#header
{
margin: 0 auto;
width: 608px;
height: 165px;
}
/* Fin du header */

/* Début du menu Firefox */
 /*ul#menu 
{
margin: 0;
margin-left: -40px;
height: 39px;
list-style: none;
}*/

ul#menu 
{
height:39px;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin: 0px;
padding:0px;
}

ul#menu  li 
{
float: left;
}
ul#menu  li a 
{
display: block;
width: 122px;
height: 39px;
}
ul#menu li#accueil a 
{
width: 121px;
}
ul#menu li#contact a 
{
width: 121px;
}

ul#menu  li span 
{
display: none;
}
ul#menu li#accueil 
{
background: url('img/accueil.jpg') no-repeat;
}
ul#menu li#forum
{
background: url('img/forum.jpg') no-repeat;
}
ul#menu li#ecoute 
{
background: url('img/ecoute.jpg') no-repeat;
}
ul#menu li#telecharger 
{
background: url('img/telecharger.jpg') no-repeat;
}
ul#menu li#contact 
{
background: url('img/contact.jpg') no-repeat;
}
ul#menu  li#accueil a:hover 
{
background: url('img/accueil2.jpg') no-repeat;
}
ul#menu  li#forum a:hover 
{
background: url('img/forum2.jpg') no-repeat;
}
ul#menu  li#ecoute a:hover 
{
background: url('img/ecoute2.jpg') no-repeat;
}
ul#menu  li#telecharger a:hover 
{
background: url('img/telecharger2.jpg') no-repeat;
}
ul#menu  li#contact a:hover 
{
background: url('img/contact2.jpg') no-repeat;
}
/* Fin du menu Firefox */

/* Début corps */
#corps
{
padding-left: 10px;
padding-right: 10px;
}

#corps p
{
font-size: 14px;
}

#corps h3
{
font-size: 16px;
padding-left: 30px;
color: #FFFFFF;
}

#corps span
{
font-weight: bold;
padding-left: 400px;
font-size: 12px;
}
/* Fin corps */

/* Début du footer */
#footer
{
color: #FFFFFF;
font-size: 12px;
text-align: center;
}
/* Fin du footer */

/* Début des liens */
a
{
color: #FFFFFF;
text-decoration: none;
}

a:hover
{
color: #FFFFFF;
text-decoration: underline;
}
/* Fin des liens */

Édité le 10/07/2008 à 01:27:08 par Samaf

Cocopop

# Posté le 10/07/2008 à 01:58:07

I'm not a bot

Groupe : Membres

Je crois savoir pourquoi essaye en faisant qqch comme ca :

Code : HTML

<div id="menu">

<!-- Début du menu -->
<ul id="menu">
		<li id="accueil"><a href="#"><span>accueil</span></a></li>
        <li id="forum"><a href="#"><span>forum</span></a></li>
        <li id="ecoute"><a href="#"><span>ecoute</span></a></li>
        <li id="telecharger"><a href="#"><span>telecharger</span></a></li>

        <li id="contact"><a href="#"><span>contact</span></a></li>
    </ul>
<!-- Fin du menu -->
</div>