28172 sujets

CSS et mise en forme, CSS3

Bonjour à tous,

J'ai beau chercher je ne vois vraiment pas pourquoi, ou plutôt je sais pourquoi(à mort IE) mais je ne sais pas comment corriger les espaces que IE place sur la page d'accueil. Sur les autres pages du sites il n'y a pas d'espaces dans le header.

Internet Explorer:
upload/14083-ie.JPG

Firefox:
upload/14083-firefox.JPG

Le site : http://www.vaguematch.com/

Merci beaucoup pour votre aide.
Modifié par Colombanois (19 Mar 2009 - 06:17)
Voici la partie du code dans le html:
<div id="min-width"><div id="width">
	<div id="header" style="padding-bottom: 0px;">
		<div class="box"><div class="tl-b"><div class="tr-b"><div class="bl-b"><div class="br-b">
			<div id="nav" style="">
				<h1><a href="{url_main}" title="{title}"><img src="{url_tmpl_main}images/logo.png" style="behavior: url('./_server/design/pngbehavior.htc');" alt="{title}"></a></h1>
			<ul>
				<li class="first" id="n-tour"><a href="{url_main}news.php?view=4" title="{l_site_tour}">{l_site_tour}</a></li>
				<li id="n-stories"><a href="{url_main}news.php?cat=2" title="{l_success_stories}">{l_success_stories}</a></li>
				<li id="n-info"><a href="{url_main}news.php" title="{l_date_info}">{l_date_info}</a></li>
			</ul>
			</div>
		

	</div>

	<center><span style="color: #F7941C;font-size: 11px;"><b>{login_message}</b></span></center>
	<div id="login"><div id="log-in">
	<form method="post" action="{url_main}join.php?cmd=login" id="login-f" class="clearfix">
		<input name="cmd" type="hidden" value="login" />
		<label for="members">{l_members}:</label>
		<input name="user" type="text" id="members" value="{user}" tabindex="1" />
		<input name="password" type="password" id="password" value="{password}" tabindex="2" />
		<input type="image" src="{url_tmpl_main}images/btn-go.gif" id="btn-go" />
		<br />
		<input name="remember" value="1" type="checkbox" id="chk" />
		<label for="chk">{l_remember_me}</label>
		| <a href="{url_main}forget_password.php" title="{l_forgot_password}">{l_forgot_password}</a>
	</form>
	</div>
	</div></div></div></div></div>
	</div>	



Et la partie du code dans le css:
/* defaults=1 */
html, body {margin: 0;padding: 0;line-height: 1.0;}
h1,h2,h3,h4,h5,h6,pre,code {font-size: 1em;}
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input {margin: 0;padding: 0;}
ul,ol {list-style: none;}
label {cursor: pointer;cursor: hand;}
dd, blockquote {margin-left: 1em;}
fieldset {border: solid 0 transparent;}
input, select, textarea {font-size: 100%;}
img {border: 0;}

#min-width {position:relative; height:1px; text-align: center; padding: 50px 0 30px 0; width: expression((document.body.clientWidth<=940)?'940px':'auto'); voice-family: "\"}\""; voice-family: inherit; width: auto;}
html>body #min-width {min-width:940px; height:auto;}

#width{width: 800px;text-align: left;margin: 0 auto;}

/* ta-da! */
body{font-family: Tahoma, sans-serif; font-size: .7em; background: #990000 url(../images/bg-main.gif) repeat-x top left; color: #000000;}

#header{padding: 0 1px 0 1px;}

.box {position:relative; border:none ;}
 

html>body .tr-b {bottom:0 !important}
html>body .bl-b {bottom:-2px !important}
html>body .br-b, html>body .box {height:auto;}

#nav h1 a{float:left; overflow: hidden; display:block;}
#nav ul{float: right; padding: 11px 32px 0 0;}
#nav li{float: left; padding-left: 16px; padding-top: 0px; display: block; background: url(../images/nav-b.gif) no-repeat 0 0;}
li.first{background: none !important;}
#nav li a{margin-right: 10px;text-indent: -999em; overflow: hidden; display: block;background-position: 0 0; background-repeat: no-repeat;}
#n-tour a{background: url(../images/nav-1.gif); width: 80px; height: 20px;}
#n-stories a{background: url(../images/nav-2.gif); width: 80px; height: 20px;}
#n-info a{background: url(../images/nav-3.gif); width: 80px; height: 20px;}
#n-partner a{background: url(../images/nav-4.gif); width: 270px; height: 13px;}

#login{padding: 0 58px 0 407px;text-align: center;background: url(../images/bg-header.gif) no-repeat 67px 100%;color: #ff6868;}
#log-in{width: 450px; margin: 0 auto;text-align: left;position: relative;padding: 17px 0 27px 0;}
#login label{margin-right: 4px;color: #FFF !important;}
#login input{font-size: 1em;padding: 1px;margin-right: 4px;}
#btn-go{border: none !important;width: 29px; height: 30px;position: absolute;margin: -7px 0 0 3px;_margin-left: 0 !important;}
#members, #password{width: 120px;border: 1px solid #ff6868;}
#chk{margin-left: 42px;width: 15px;height: 15px;}
#login a{color: #ff6868;}
Salut,

Colombanois a écrit :
J'ai beau chercher je ne vois vraiment pas pourquoi, ou plutôt je sais pourquoi(à mort IE)
en même temps ça fonctionnerait mieux sans utiliser des sélecteurs qu'il ne reconnaît qu'avec la version 8 : html>body .tr-m (en l'occurrence parfaitement inutile puisque .tr-m aurait suffit. Smiley cligne

Par ailleurs tu sembles atteint de divite aiguë.
J'ai modifié le css comme tu m'a dis, mais IE n'aime pas encore:

/* defaults=1 */
html, body {margin: 0;padding: 0;line-height: 1.0;}
h1,h2,h3,h4,h5,h6,pre,code {font-size: 1em;}
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input {margin: 0;padding: 0;}
ul,ol {list-style: none;}
label {cursor: pointer;cursor: hand;}
dd, blockquote {margin-left: 1em;}
fieldset {border: solid 0 transparent;}
input, select, textarea {font-size: 100%;}
img {border: 0;}

#min-width {position:relative; height:1px; text-align: center; padding: 50px 0 30px 0; width: expression((document.body.clientWidth<=940)?'940px':'auto'); voice-family: "\"}\""; voice-family: inherit; width: auto;}
#min-width {min-width:940px; height:auto;}

#width{width: 800px;text-align: left;margin: 0 auto;}

/* ta-da! */
body{font-family: Tahoma, sans-serif; font-size: .7em; background: #990000 url(../images/bg-main.gif) repeat-x top left; color: #000000;}

#header{padding: 0 1px 0 1px;}

.box {position:relative; border:none ;}
 

.tr-b {bottom:0 !important}
.bl-b {bottom:-2px !important}
.br-b, .box {height:auto;}

#nav h1 a{float:left; overflow: hidden; display:block;}
#nav ul{float: right; padding: 11px 32px 0 0;}
#nav li{float: left; padding-left: 16px; padding-top: 0px; display: block; background: url(../images/nav-b.gif) no-repeat 0 0;}
li.first{background: none !important;}
#nav li a{margin-right: 10px;text-indent: -999em; overflow: hidden; display: block;background-position: 0 0; background-repeat: no-repeat;}
#n-tour a{background: url(../images/nav-1.gif); width: 80px; height: 20px;}
#n-stories a{background: url(../images/nav-2.gif); width: 80px; height: 20px;}
#n-info a{background: url(../images/nav-3.gif); width: 80px; height: 20px;}
#n-partner a{background: url(../images/nav-4.gif); width: 270px; height: 13px;}

#login{padding: 0 58px 0 407px;text-align: center;background: url(../images/bg-header.gif) no-repeat 67px 100%;color: #ff6868;}
#log-in{width: 450px; margin: 0 auto;text-align: left;position: relative;padding: 17px 0 27px 0;}
#login label{margin-right: 4px;color: #FFF !important;}
#login input{font-size: 1em;padding: 1px;margin-right: 4px;}
#btn-go{border: none !important;width: 29px; height: 30px;position: absolute;margin: -7px 0 0 3px;_margin-left: 0 !important;}
#members, #password{width: 120px;border: 1px solid #ff6868;}
#chk{margin-left: 42px;width: 15px;height: 15px;}
#login a{color: #ff6868;}

.box-m {position:relative; border: 3px solid #ff6868; height:1px;background: #FFF url(../images/bg-sp-0.jpg) repeat-y top left;}
.tl-m, .tr-m, .bl-m, .br-m {position:relative; background-repeat:no-repeat}
.tl-m {background-image:url(../images/tl-m.png); background-position:0 0; top:-3px; left:-3px}
.tr-m {background-image:url(../images/tr-m.png); background-position:100% 0; right:-6px}
.bl-m {background-image:url(../images/bl-m.png); background-position:0 100%; bottom:-6px !important; bottom /**/:-6px; left:-6px}
.br-m {background-image:url(../images/br-m.png); background-position:100% 100%; width:auto !important; width /**/:100%; right:-6px; bottom:0 !important; bottom /**/:0; height:1px}
.tr-m {bottom:0 !important}
.bl-m {bottom:-6px !important}
.br-m, .box-m {height:auto}
Colombanois a écrit :
C'est est un script que ma cliente avait déjà payée(et même très cher), je dois faire avec.
Sauf que c'est du grand n'importe !

Juste pour rire :
<div class="box">
  <div class="tl-b">
    <div class="tr-b">
      <div class="bl-b">
        <div class="br-b">			
          <div id="nav" style="">				
            <h1><a><img /></a></h1>			
            <ul>				
              <li><a></a></li>				
              <li><a></a></li>				
              <li><a></a></li>			
            </ul>			
          </div>		 	
        </div>	
        <center>
          <span style="color: #F7941C;font-size: 11px;"><b></b>
          </span>
        </center>	
        <div id="login">
          <div id="log-in">	
            <form>
              ...
            </form>	
          </div>	
        </div>
      </div>
    </div>
  </div>
</div>
Smiley scared

Tout ça pour 1 H1, 1 UL et 1 FORM !
(Sans parler de l'élément CENTER vide - et d'ailleurs obsolète depuis 1973 Smiley lol -)

Bref c'est illisible...

Une piste serait de donner une largeur (width) à <div id="login">... mais le mieux serait de tout réécrire...
Modifié par Heyoan (21 Mar 2009 - 11:29)
J'ai enlevé quelques DIV de trop:

<div id="min-width"><div id="width">
	<div id="header" style="padding-bottom: 0px;">
		<div class="box">
			<div id="nav" style="">
				<h1><a href="{url_main}" title="{title}"><img src="{url_tmpl_main}images/logo.png" style="behavior: url('./_server/design/pngbehavior.htc');" alt="{title}"></a></h1>
			<ul>
				<li class="first" id="n-tour"><a href="{url_main}news.php?view=4" title="{l_site_tour}">{l_site_tour}</a></li>
				<li id="n-stories"><a href="{url_main}news.php?cat=2" title="{l_success_stories}">{l_success_stories}</a></li>
				<li id="n-info"><a href="{url_main}news.php" title="{l_date_info}">{l_date_info}</a></li>
			</ul>
			</div>
		

	</div>

	<center><span style="color: #F7941C;font-size: 11px;"><b>{login_message}</b></span></center>
	<div id="login"><div id="log-in">
	<form method="post" action="{url_main}join.php?cmd=login" id="login-f" class="clearfix">
		<input name="cmd" type="hidden" value="login" />
		<label for="members">{l_members}:</label>
		<input name="user" type="text" id="members" value="{user}" tabindex="1" />
		<input name="password" type="password" id="password" value="{password}" tabindex="2" />
		<input type="image" src="{url_tmpl_main}images/btn-go.gif" id="btn-go" />
		<br />
		<input name="remember" value="1" type="checkbox" id="chk" />
		<label for="chk">{l_remember_me}</label>
		| <a href="{url_main}forget_password.php" title="{l_forgot_password}">{l_forgot_password}</a>
	</form>
	</div>
	</div>
	</div>