hello :hello:
je suis confronté à un problème de Doctype. J'ai choisi d'utiliser XHTML strict 1.1. Et je tiens à etre valide dans ce sens. (et je précise aussi que je veux me passer de js pour l'instant)
j'ai un script css (inspiré de cssplay.co.uk) qui fait une sorte de "zoom" sur une image.
le problème est le suivant :
sous IE, ca marche comme je veux. c'est à dire que le zoom est centré sur l'image.
sous firefox :
-> si le doctype est déclaré, l'image se décale vers le haut, je ne comprends pas pourquoi.
-> si le doctype n'est pas déclaré, ca passe
sous opéra, dans tous les cas, ca merde.
le html :
le css :
un exemple est visible ici :
http://nabbo.free.fr/avec.html -> avec doctype
http://nabbo.free.fr/sans.html -> sans doctype
voilà, je demande des avis éclairés, parce que là je ne suis plus...
:jap:
je suis confronté à un problème de Doctype. J'ai choisi d'utiliser XHTML strict 1.1. Et je tiens à etre valide dans ce sens. (et je précise aussi que je veux me passer de js pour l'instant)
j'ai un script css (inspiré de cssplay.co.uk) qui fait une sorte de "zoom" sur une image.
le problème est le suivant :
sous IE, ca marche comme je veux. c'est à dire que le zoom est centré sur l'image.
sous firefox :
-> si le doctype est déclaré, l'image se décale vers le haut, je ne comprends pas pourquoi.
-> si le doctype n'est pas déclaré, ca passe
sous opéra, dans tous les cas, ca merde.
le 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" >
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Index page de test</title>
<link href="css/style3.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="raised">
<b class="top"><b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b></b>
<div class="boxcontent">
<a href="#"><img alt="img" src="./images/petitlion.jpg" /></a>
<h4><span class="titre">toto</span></h4>
<p class="desc_courte">
avec doctype<br />
bla<br />
bla<br />
</p>
</div>
<b class="bottom"><b class="b4b"></b><b class="b3b"></b><b class="b2b"></b><b class="b1b"></b></b>
</div>
</body>
</html>
le css :
.raised {background: transparent; width:487px; margin:10px 30px 10px 0px; float:right;display:inline;}
.raised .boxcontent {
display:block;
background:#FBFBE5;
border-left:1px solid #fff;
border-right:1px solid #999;
padding:5px 10px;
height: 90px;
text-align: left;
}
.raised .top, .raised .bottom {display:block; background:transparent; font-size:1px;}
.raised .b1, .raised .b2, .raised .b3, .raised .b4, .raised .b1b, .raised .b2b, .raised .b3b, .raised .b4b {display:block; overflow:hidden;}
.raised .b1, .raised .b2, .raised .b3, .raised .b1b, .raised .b2b, .raised .b3b {height:1px;}
.raised .b2 {background:#FBFBE5; border-left:1px solid #fff; border-right:1px solid #eee;}
.raised .b3 {background:#FBFBE5; border-left:1px solid #fff; border-right:1px solid #ddd;}
.raised .b4 {background:#FBFBE5; border-left:1px solid #fff; border-right:1px solid #aaa;}
.raised .b4b {background:#FBFBE5; border-left:1px solid #eee; border-right:1px solid #999;}
.raised .b3b {background:#FBFBE5; border-left:1px solid #ddd; border-right:1px solid #999;}
.raised .b2b {background:#FBFBE5; border-left:1px solid #aaa; border-right:1px solid #999;}
.raised .b1 {margin:0 5px; background:#fff;}
.raised .b2, .raised .b2b {margin:0 3px; border-width:0 2px;}
.raised .b3, .raised .b3b {margin:0 2px;}
.raised .b4, .raised .b4b {height:2px; margin:0 1px;}
.raised .b1b {margin:0 5px; background:#999;}
.boxcontent a img {
width:120px; height:90px;
border:0;
position: absolute;
z-index: 50;
}
.boxcontent a:hover {
position:relative;
}
.boxcontent a:hover img {
width:130px; height:100px;
position:absolute;
left:-5px; top:-5px;
border:0;
z-index: 100;
margin:0px;
padding:0px;
}
.boxcontent h4{
margin: 0px 0px 5px 130px;
border-bottom: 1px solid #6878C6;
font-weight: bolder;
color: #6878C6;
}
.boxcontent .desc_courte{
margin: 0px 0px 0px 130px;
}
un exemple est visible ici :
http://nabbo.free.fr/avec.html -> avec doctype
http://nabbo.free.fr/sans.html -> sans doctype
voilà, je demande des avis éclairés, parce que là je ne suis plus...
:jap:
, neanmoins le selecteur universelle peut encore "nivellé le terrain "