[HTML-CSS] Problème de DOCTYPE

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : [HTML-CSS] Problème de DOCTYPE

nabbo

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 :

Code :

<!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 :

Code :

.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:

Publicité

Pitsy

Hello,

Je te décris ci-dessous ce qui m'a amené à une solution correcte sur IE FF et opéra, mais je n'ai pas vraiment d'explication fondée à te fournir:

D'abord, j'ai décidé de donner le top:0 et left: 0 à .boxcontent a img pour voir si cela changeait quelque chose vu le problème de positionnement:

.boxcontent a img {
width:120px; height:90px;
border:0;
top:0;
left:0;
position: absolute;
z-index: 50;
}

On retrouve ton image tout en haut gauche du navigateur...

Donc je cherche le référent pour se positionnement absolu et là, je vois que c'est le a:hover. Je décide de l'attribuer, plus logiquement à a tout seul, soit:

.boxcontent a {
position:relative;
}

à la place de a:hover

Ceci remet l'image à une place plus logique, néanmoins différente de celle de IE, mais vraisemblablement la même que sur Opéra. Soupçonnant un problème de line-height ou du genre, je décide de passer le a en display:block:

.boxcontent a {
position:relative;
display:block;
}

Bingo, ça marche sur FF et Opéra. Reste à règler le pb du hover qui ne marche plus sur IE. ça c'est un bug que je connais; il suffit de rajouter une propriété bidon à a:hover du genre:

.boxcontent a:hover {
border-width:0;
}

Bref, pas d'explication logique à ton pb de doctype, mais une solution qui devrait fonctionner

Message édité par Pitsy le 10-08-2006 à 00:03:53

nabbo

:love:
et en plus ca marche !!!

:love:
et même sous opéra...

et ca a l'air valide css (j'ai pas testé, je verrai ça demain)

merci beaucoup, Pitsy

:jap:

edit : et pour le Doctype... ça m'empêchera pas de dormir...

Message édité par nabbo le 10-08-2006 à 00:15:03

FORUM HardWare.fr

Programmation

HTML/CSS

[HTML-CSS] Problème de DOCTYPE

Sujets relatifs
problème installation mediawiki en local	probleme de resultat retourné par une variable
[Access] Problème de SQL	probleme de boucle
probleme avec base de donnes SQL	Probleme de relance de sessions sous IE
Delphi : Problème de format de date	Problème avec .find
Problème avec Vlookup et question sur MsgBox	[ASP.NET 2.0] Problème de connexion à la base de donnée
Plus de sujets relatifs à : [HTML-CSS] Problème de DOCTYPE

Page générée en 0.069 secondes