28220 sujets

CSS et mise en forme, CSS3

Problème div avec IE

Bonjour

Le code ci dessous pose un problème avec IE. En effet, le DIV du titre n'est pas complet (il manque la partie supérieur). Sinon cela fonctionne parfaitement avec Firefox !

Si quelqu'un à une solution... Merci


    #stud {
width: 100%;
font: bold 1.2em/115% Verdana, Geneva, Arial, Helvetica, sans-serif;
}

    #stud div.title {
background-color: #FFF;
color: #000;
}

    #stud div.title span {
padding: 0.5em 0.5em;
background-color: #F8F7E3;
border: 1px solid #CCCCCC;
}

    #stud div.body {
margin: 0 0 0 1.5em;
padding: 1.5em 1.5em;
border: 1px dashed #CCCCCC;
background-color: #FDFCF2;
color: #000;
font: normal .8em/125% Verdana, Geneva, Arial, Helvetica, sans-serif;
}

    #stud div.body span {
font-variant: small-caps;
font-weight: bold;
}




echo "<div id='stud'>";
echo "<div class='title'><span>Un test</span></div>";
echo "<div class='body'>Un autre test</div>";
echo "</div>";


EDIT par jb : coupé les lignes de codes trop longues
Modifié par jb_gfx (08 Jun 2005 - 15:36)
As tu as essayé en donnant des dimensions à ton bloc?

Ton code m'a l'air tordu vu comme ça, peux tu poster un lien vers ta page d'exemple, ça aidera pour trouver le problème.

Je ne comprend pas non plus pourquoi tu utilise du php (echo) pour afficher ton code html, c'est pas logique.


?>
<div id="stud">
<div class="title"><span>Un test</span></div>
<div class="body">Un autre test</div>
</div> 
<?php


ça ne te semple pas plus simple?
Voici ce que cela donne avec IE

upload/2059-studie.gif

avec firefox

upload/2059-studfx.gif

Sinon pour le code PHP c'est parce que mes textes sont en fait des variables
Alors pourquoi ne pas utiliser simplement une balise de titre qui est faite pour ça plutot qu'un div.title + span?

Tu pourra aussi simplifier tes déclarations de styles par la même occasion.


#stud h2 {
margin: 0;
padding: 0.5em;
background-color: #F8F7E3;
border: 1px solid #CCCCCC;
}


<div id="stud">
<h2>Titre</h2>
...


Par contre tes captures d'écrans n'ont pas l'air de correspondre au code que tu as posté. Comment se fait t'il que tu ais un retrait sur le titre sur tes captures alors qu'il n'y aucune trace de positionement dans ton code CSS?
avec cela

#stud div.title span { height: 24px; padding: 0.5em 0.5em; background-color: #F8F7E3; border: 1px solid #CCCCCC; }

mon Titre est maintenant décalé vers le haut sous IE !

upload/2059-studie1.gif
Les captures postées ne sont qu'une partie de la page web Smiley cligne

Je vais essayer avec ton code...
Oui, comme la balise h2 à des propriétés par défaut (marge, padding et typo) il faut que tu les redéfinisse pour l'affichage que tu souhaite avoir.

J'ai déjà redéfini margin et padding, maintenant à toi d'ajouter la propriété "font" avec les valeurs qui te conviennent.
Et si tu ne souhaite pas que le titre occupe toute la largeur, applique lui la propriété display:inline;

Note que d'un point de vu strucutre il est plus logique d'avoir une balise hn (ici h2) pour afficher des titres, cela leur donne une valuer sémnatique plus importante que le texte qui suit.
Modifié par jb_gfx (08 Jun 2005 - 16:12)
Bonjour Iris,

Je sais pas si c'est ce qui te conviendrai le mieux, mais tu peux plutot passer des balises textes genre P et les placer en absolue:

un peu comme ca:

body{
	margin:0;
}

#stud {
position: relative;
width: 100%;
font: bold 1.2em/115% Verdana, Geneva, Arial, Helvetica, sans-serif;
}

p#title{
	background-color: #F8F7E3;
	color: #000;
	position: absolute;
	z-index:100;
	left: 78px;
	top: 20px;
	height: 32px;
	width: 185px;
	border: 1px dotted #cccccc;
	text-align: center;
	vertical-align: middle;
	clip: rect(0px,auto,auto,auto);
	padding-top: 10px;
}

p#corp_texte{
	position: absolute;
	margin: 0 0 0 1.5em;
	padding: 1.5em 1.5em;
	border: 1px dashed #CCCCCC;
	background-color: #FDFCF2;
	color: #000;
	font: normal .8em/125% Verdana, Geneva, Arial, Helvetica, sans-serif;
	left: 77px;
	top: 60px;
	width: 650px;
}

<div id="stud">
<p id="title">Test</p>
<p id="corp_texte">Un autre test</p>
</div>


bon courage
Ok pour la définition de la font (...etc...) dans le h2, mais l'important c'est que le titre chevauche le DIV du texte comme dans le premier exemple sous firefox Smiley langue

et là, cela ne le fait plus Smiley sweatdrop
Sujet clos
Aller à