18073 sujets

Questions générales et questions de débutants

[résolu] Prolbème de mise en page IE vs Firefox

Bonjour à tous ! Smiley smile

J'ai décidé, suite à la lecture de CSS 2, de faire une refont de mon site, qui est à la base entièrement mis en page par des tableaux.
D'ailleure : merci beaucoup pour ce magnifique ouvrage !!!! Smiley lol

J'ai essayé plein de "trucs" pour régler mon problème, mais rien n'y fait :'( Si vous pouviez m'aider, je vous en serait très reconnaissante !

Voici le code html de ma page : 


<body>

<!-- CONTENU GLOBAL -->
<div id="global">

<!-- MENU PRINCIPAL -->	
<div id="menu">
<ul>
<li><a href="accueil.html">Accueil</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<!-- FIN DU MENU -->
	
<!-- CADRE PRINCIPAL -->
<div id="cadre">
<div id="contenu">
<h1>Titre</h1>
<h2>Sous-titre</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. </p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. </p>
</div>
		
<!-- MENU RAPIDE -->
<div id="menurapide">
<a href="accueil.html">accueil</a> | 
<a href="services.html">services</a> | 
<a href="portfolio.html">portfolio</a> | 
<a href="contact.html">contact</a>
</div>
<!-- FIN DU MENU RAPIDE -->

</div>
<!-- FIN DU CADRE PRINCIPAL -->
	
<!-- FOOTER -->
<div id="footer">
Copyright 2004-2006 © <a href="mailto:contact@webazur.ch">Webazur</a>. Tous droits réservés.
</div>
<!-- FIN DU FOOTER -->

</div>
<!-- FIN DU CONTENU GLOBAL -->

</body>


Et voici mon fichier CSS :


body {background: #a2bbe4; font-family: "Trebuchet MS", Verdana, sans-serif; font-size: small; color: #333333; margin: 0; padding: 0;}

div#global {background-image: url(images/background.jpg); background-repeat: no-repeat; position: relative; width: 750px; 	margin: 0 auto auto auto; padding: 0;}

div#header {height: 337px;width: 780px;}

/* -- MENU PRINCIPAL -- */
#menu {margin: 30px auto auto 450px; font-weight: bold; font-size: medium;}
#menu ul {margin: 0;padding: 0;}
#menu li {font-weight: bold; margin-left: 2.5em; padding-left: 25px; text-align: justify; line-height: 25px; background: url(images/puce.gif) 0 .7em no-repeat; background-position: left; list-style: none; list-style-position: inside;}
#menu li a {color: #999999; text-decoration: none;}

/* --- CADRE --- */
#cadre {margin: 200px 0 0 auto; -moz-border-radius: 15px; background-color: #fff; width: 506px; }

#contenu {font-family: "Trebuchet MS", Verdana, sans-serif; font-size: small; line-height: 1.5em; text-align:justify; padding: 0.8em;}
#contenu p {margin: 0 0 10px 0;	padding: 0;}
#contenu h1 {margin: 0 0 15px 0;padding: 0;font-size: large;font-weight: bold;letter-spacing: 2px;border-bottom: 1px solid #a2bbe4;color: #6c94d5;}
#contenu h2 {font-size: medium;font-weight: bold;color: #68BD35;margin: 0 0 3px 0;padding: 0;}

/* --- MENU RAPIDE ---*/
#menurapide {margin: 0 0 0 auto;text-align: center;letter-spacing: 1px;	padding: 0.8em;	color: #6C94D5;}
#menurapide a {color: #6C94D5;	text-decoration: none;}
#menurapide a:hover {color: orange;}

/* --- FOOTER --- */
#footer {position: relative;margin: 0 0 0 auto; padding: 0.8em 0 0.8em 0;	width: 506px;text-align: center;font-size: x-small;color: #FFFFFF;letter-spacing: 1px;}
#footer a {color: #FFFFFF;text-decoration: none;}

Modifié par Libellule (31 Dec 2005 - 07:55)
Salut,
Je viens de monter ta page en xhtml 1.0 strict et je suis comme Philippe je ne vois pas ton problème. Pas de différence entre IE6 et FF.
Par contre si tu n'as pas indiqué de doctype, c'est sur que ç'est pas jolijoli. IE passe en mode brouillon et c'est n'importe quoi.

Détrompe moi. Smiley cligne
Euh.... mais.... euh....

C'est bizarre cette histoire... je vais mettre la page sur le serveur pour être sûre car chez moi, en visualisant en local avec Firefox il y a une belle marche en haut et pas sur IE.

Papyjo : le doctype est bien là ! Smiley cligne
Apparamment, IE n'interprete pas l'instruction CSS :
"moz-border-radius: 15px;"

Mais ca reste lisible et le design n'est pas "défiguré" Smiley ohwell
Modifié par philippe84 (30 Dec 2005 - 13:22)
Oui oui... je sais bien et ce n'est pas grave du tout. C'est un petit plus pour les personnes utilisant les navigateurs comme firefox Smiley cligne

Mon problème c'est la marge du haut dans Firefox, je n'arrive pas à coller le tout sur le haut de la fenêtre du navigateur.
Ce ne serait pas le "margin 30px" qui poserait problème alors ?

#menu {margin: 30px auto auto 450px; font-weight: bold; font-size: medium;}
Bonjour et bienvenue,

Essayes d'enlever la marge de #menu:
#menu {
	margin: [b]0[/b] auto auto 450px;
	font-weight: bold;
	font-size: medium;
}


édit: grillé Smiley biggrin
Modifié par Igor (30 Dec 2005 - 13:40)
Génial ! Smiley lol ça fonctionne !
Merci pour votre aide les gars Smiley ravi

Comme je suis en train d'apprendre et que j'aime comprendre les choses : pourriez-vous m'expliquer pourquoi Firefox voulait pas le margin à 30 par zazard ?
Firefox et IE ne gerent pas les "padding" et "margin" de la même facon.
Je ne sais pas trop pourquoi ???
Des spécialistes des CSS pourront peut-être nous l'expliquer ?????

Smiley confused Smiley ohwell
Sujet clos
Aller à