28220 sujets

CSS et mise en forme, CSS3

[ie] Probleme de <ul> avec un dtd strict

Bonjour,
J'ai un petit probleme, voir ici : toutankharton.com/zz/

Voila ce que je veux faire avec mes onglets de langue
http://www.toutankharton.com/zz/bien.gif

Voila ce que ça donne dans IE sans DTD :
http://www.toutankharton.com/zz/moyen.gif

voire sinon sur toutankharton.com/zz/ dans les differents navigateurs avec dtd... Ma CSS et Mon HTML passe au validateur... Je sais vraiment plus quoi faire !

Merci d'avance !
Modifié par Toutankharton (16 Nov 2005 - 16:58)
C'est quelque chose comme cela que tu voudrais ?
body {
background-color: #F7C35A;
font-family: Georgia, Verdana, sans-serif;
font-size: 0.7em;
color: #084A6B;
text-align:center;
}
ul#onglets_langue {
margin:auto;
width:790px;
padding:0;
text-align:left;
}
ul#onglets_langue li {
display:inline;
float:right;
}
ul#onglets_langue a {
display:block;
text-decoration:none;
color: #084A6B;
}
ul#onglets_langue li.fr_on {
background: url(images/onglet_fr_on.gif) left top no-repeat;
width:87px;
height:24px;
font-weight:bold;
}
ul#onglets_langue li.fr_on  a{
padding:5px 0 0 24px;
}
ul#onglets_langue li.en_off {
background: url(images/onglet_en_off.gif) left top no-repeat;
width:72px;
height:24px;
font-size:90%;
color:#3F5E6D;
}
ul#onglets_langue li.en_off a{
padding: 5px 0 0 24px;
}
#header {
width:799px;
padding:0;
margin:auto;
background:url(images/header_background.gif) left top repeat-y;
text-align:left;
clear:both;
}
#htop {
font-size: 1px;
background:url(images/header_haut.gif) left top no-repeat;
width:799px;
height:5px;
margin:0 auto;
padding:0;
top:-1px;
clear:both;
}
#hbottom {
font-size: 1px;
background:url(images/header_bas.gif) left top no-repeat;
width:799px;
height:5px;
margin:0 auto;
padding:0;
}
<ul id="onglets_langue">
	<li class="fr_on"><a href="">Français</a></li>
	<li class="en_off"><a href="">English</a></li>
</ul>

<div id="htop"></div>
<div id="header">
dfdfdfdf<br>
dfdfdfdf<br>
dfdfdfdf<br>
dfdfdfdf<br>
dfdfdfdf<br>
dfdfdfdf<br>
dfdfdfdf<br>
dfdfdfdf<br>
dfdfdfdf<br>
dfdfdfdf<br>
dfdfdfdf<br>
dfdfdfdf<br>
dfdfdfdf<br>
dfdfdfdf<br>
dfdfdfdf<br>
</div>
<div id="hbottom"></div>
en rajoutant un
margin-top:-1px;
à ton style #htop

ca résoud le problème sous FF, mais il reste un pixel sous IE que je ne parviens pas à virer pour l'instant.
J'ai resolu le probleme partiellement, juste pour iexplorer, en mettant une ligne orange en background sous ma liste... Mais comme vous pouvez le voir, ça ne marche pas sous FF (le truc du -1px ne marche pas). Arf ! si proche du but ^^ que puis je faire ?

la partie modifiée concernée
ul#onglets_langue {
margin:auto;
width:699px;
padding-right:100px;
text-align:left;
background:url(images/onglet_background.gif) left bottom repeat-x;
}


Ce que sa donne dans FF :
http://www.toutankharton.com/zz/firefox.gif
Ca devrait faire l'affaire :
body {
background-color: #F7C35A;
font-family: Georgia, Verdana, sans-serif;
font-size: 0.7em;
color: #084A6B;
text-align:center;
}
div#onglets_langue {
margin:auto;
width:790px;
padding:0;
text-align:left;
position:relative;
}
div#onglets_langue span {
display:inline;
float:right;
}
div#onglets_langue a {
display:block;
text-decoration:none;
color: #084A6B;
}
div#onglets_langue span.fr_on {
background: url(images/onglet_fr_on.gif) left top no-repeat;
width:87px;
height:24px;
font-weight:bold;
}
div#onglets_langue span.fr_on  a{
padding:5px 0 0 24px;
}
div#onglets_langue span.en_off {
background: url(images/onglet_en_off.gif) left top no-repeat;
width:72px;
height:24px;
font-size:90%;
color:#3F5E6D;
}
div#onglets_langue span.en_off a{
padding: 5px 0 0 24px;
}
#header {
width:799px;
padding:0;
margin:auto;
background:url(images/header_background.gif) left top repeat-y;
text-align:left;
clear:both;
}
#htop {
font-size: 1px;
background:url(images/header_haut.gif) left top no-repeat;
width:799px;
height:5px;
margin:0 auto;
padding:0;
margin-top:-1px;
clear:both;
}
#hbottom {
font-size: 1px;
background:url(images/header_bas.gif) left top no-repeat;
width:799px;
height:5px;
margin:0 auto;
padding:0;
}
<div id="onglets_langue">
	<span class="fr_on"><a href="">Français</a></span>
	<span class="en_off"><a href="">English</a></span>
</div>
<div id="htop"></div>
<div id="header">
dfdfdfdf<br>
dfdfdfdf<br>
dfdfdfdf<br>
dfdfdfdf<br>
dfdfdfdf<br>
dfdfdfdf<br>
dfdfdfdf<br>
dfdfdfdf<br>
dfdfdfdf<br>
dfdfdfdf<br>
dfdfdfdf<br>
dfdfdfdf<br>
dfdfdfdf<br>
dfdfdfdf<br>
dfdfdfdf<br>
</div>
<div id="hbottom"></div>
J'ai mis à jour le code tel que tu me le donne sur toutankharton.com/zz/ et il y a ce bug sous firefox (pas un bug, mais juste la ligne qui va pas... J'ai mal copié le code ?
Sujet clos
Aller à