Salut à tous,
J'ai un gros problème avec IE : j'ai développé un desing :
Le problème, c'est que sous IE9, 8 et 7, le margin: 0 auto ne fonctionne plus :
Mon header et mon contenu sont disposés comme tel :
<div id="submenu">
<div class="wrapper">
<span class="title"><!-- Title --></span>
</div>
</div>
<div id="top">
<div class="wrapper">
<!-- Contenu Top -->
</div>
</div>
<div id="bottom">
<div class="wrapper">
<!-- Contenu Bottom -->
</div>
</div>C'est désespérant de voir qu'IE réduit à néant tous nos efforts.
Cordialement, Paul9.
11 réponses
Ça y est ! J'ai réussi ! J'ai simplement réécris default.ctp et c'est bon. J'en ai profité pour le tester avec l'excellent IETester, qui permet d'emuler IE en version 9 à 5.5. Merci à tous pour vos réponses :)
On peut avoir un exemple en ligne comme ça on pourra inspecter ton CSS ?
Essaie de mettre ton body en text-align :center; et les wapper en text-align:left;
Voici mon CSS :
.grid1, .grid2, .grid3, .grid4, .grid5, .grid6, .grid7, .grid8, .grid9, .grid10, .grid11, .grid12 { display: inline; float: left; position: relative; padding-left: 10px; padding-right: 10px; padding-bottom: 10px; }
.grid1 { width: 60px; }
.grid2 { width: 140px; }
.grid3 { width: 220px; }
.grid4 { width: 300px; }
.grid5 { width: 380px; }
.grid6 { width: 460px; }
.grid7 { width: 540px; }
.grid8 { width: 620px; }
.grid9 { width: 700px; }
.grid10 { width: 780px; }
.grid11 { width: 860px; }
.grid12 { width: 940px; }
.alpha { padding-left: 0; }
.omega { padding-right: 0; }
.clear { clear: both; }
.wrapper { margin: 0 auto; position: relative; width: 940px; }
h1, h2, h3 { border-bottom: 1px solid #909090; font-size: 1.2em; margin: 0 0 5px; }
a { color: #000; }
a:hover { text-decoration: none; }
body { background: url('../img/background_black.png'); font: 12.5pt/1em Calibri, Candara, Arial, sans-serif; margin: 0; padding: 0; }
#header { background: url('../img/background_header.png'); box-shadow: 1px 1px 7px #000; height: 50px; line-height: 50px; margin: 0; position: fixed; top: 0; width: 100%; z-index: 500; }
#header a.logo { background: url('../img/logo.png') center no-repeat; display: block; float: left; height: 25px; margin: 14px 0 0; width: 198px; }
#header ul { list-style: none; margin: 0; padding: 0; }
#header ul.navigation { float: left; margin: 0 0 0 15px; }
#header ul.users { float: right; }
#header ul li { display: block; float: left; margin: 0 0 0 20px; }
#header ul li a { color: #DDD; font-size: 1.1em; text-decoration: none; }
#header ul li a:hover, #header ul li a.current { color: #FFF; text-shadow: 0 0 7px #DDD; }
#header ul li { float: left; margin: 0 0 0 15px; }
#header ul li a { color: #CCC; margin: 0 10px; text-decoration: none; }
#header ul li a:hover, #header ul li a.current { color: #FFF; }
#content { margin: 40px 0 0; }
#content #submenu, #content #top, #content #bottom { line-height: 20pt; padding: 40px 0; text-align: justify; }
#content #top a { color: #FFF; }
#content #submenu { color: #DDD; padding: 30px 0 10px; }
#content #submenu .title { float: left; font-size: 2em; font-weight: bold; margin: 5px 0 0; text-shadow: 1px 1px 7px #000; }
#content #top { border-bottom: 1px solid #000; color: #DDD; }
#content #top .carousel { background: #FFF; border: 5px solid #FFF; box-shadow: 1px 1px 7px #000; height: 300px; position: relative; }
#content #top .carousel .post { position: absolute; }
#content #top .carousel .title { background: rgba(255, 255, 255, 0.8); bottom: 0; color: #555; display: block; padding: 10px 15px; position: absolute; width: 900px; }
#content #top .carousel .navigation { bottom: -30px; left: 395px; position: absolute; text-align: center; }
#content #top .carousel .navigation .item { background: #DDD; border-radius: 5px; box-shadow: inset 0 0 5px #000; display: block; float: left; height: 10px; margin: 0 5px; width: 10px; }
#content #top .carousel .navigation .current { background: #f65445; box-shadow: inset 0 0 5px #000; }
#content #top .video { border: 0; height: 585px; width: 100%; }
#content #bottom .comment { margin: 5px 0 15px; }
#content #bottom { background: url('../img/background_white.png'); box-shadow: inset 0 0 7px #353535; color: #555; }
#footer { color: #FFF; padding: 40px 0; text-align: center; text-shadow: 0 0 7px #FFF; }Avant d'appliquer ton css as-tu mis en place un reset css ?
Je ne dis pas que ça réglera ton problème mais le reset css permet de tout remettre à zéro, proprement quelque soit le navigateur.
Présentation du reset CSS
J'ai un nouvel élément : lorsque je code le design à part, uniquement en html, tout ce passe très bien. Mais une fois le passage vers cakePHP effectué, le style se casse. J'ai testé un truc : j'ai pris le code généré par cakePHP depuis mon projet et je l'ai ouvert depuis une page html simple, ça à fonctionné !