28172 sujets

CSS et mise en forme, CSS3

Safari ne remplie pas l'espace vertical

Bonjour,

Voila, j'ai un problème de mise en forme avec Safari, j'ai une colonne de gauche dans laquelle
se trouve une liste qui compose un sous-menu contextuel dynamique. Je veux profiter de cette structure pour habiller un peu tout ca (background d'en-tête et box-shadow pour le conteneur, gradient et box-shadow inset pour la liste). Bien sûr j'ai besoin que cette colonne prenne toute la hauteur, chose faite en lui assignant display:table-cell (mon conteneur global 'contentWrap' étant agrémenté d'un display:table-row), et height:100% pour les deux éléments. Tout ca fonctionne bien sauf pour Safari avec lequel ma liste n'occupe pas la totalité de la hauteur

Question HTML rien de compliqué:

<div id='contentWrap'>
<div id='aside'>
<ul>
<li><a href='httblablabal'>Bla</a></li>
</ul>
</div>
<div id='content'>
Contenu
</div>
</div>

Quelqu'un aurait-il une solution ?

Cordialement

Sébastien
Bonsoir,

Peut-on voir les styles associés et le doctype utilisé ? Histoire de voir quel style parte en cascade ou non Smiley smile .

Pour rappel : height:100%; avec un parent avec un height:null; ça fait 100% de rien du tout Smiley smile .

Apparemment body devrait être en display:table; et body et html en height:100%; .

min-height ne peut pas servir de valeur de référence pour height .

Cordialement, GC
gc-nomade a écrit :
Bonsoir,

Peut-on voir les styles associés et le doctype utilisé ? Histoire de voir quel style parte en cascade ou non Smiley smile .

Pour rappel : height:100%; avec un parent avec un height:null; ça fait 100% de rien du tout Smiley smile .

Apparemment body devrait être en display:table; et body et html en height:100%; .

min-height ne peut pas servir de valeur de référence pour height .

Cordialement, GC


Bien, c'est un site PHP, qui n'est pas encore en ligne, pour le DOCTYPE:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//En" "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3c.org/1999/xhtm1' xml:lang='fr'>
<head>
<meta http-equiv='Content-type' content='text/html; charset=iso-8859-1' />
<title>JSTeitgen.com</title>
<link rel='stylesheet' media='screen' type='text/css' href='css/jsteitgen.css' />
<!--[if IE]>
<link rel='stylesheet' media='screen' type='text/css' href='css/jsteitgen_ie.css' />
<![endif]-->

La partie CSS concernée:

#contentWrap{
width:100%;
display:table-row;
height:100%;
margin:5px 0 0 5px;
}
/*///////*/
/*ASIDE*/
/*///////*/
#aside{
position:relative;
display:table-cell;
width:141px;
height:100%;
vertical-align:top;
padding:34px 0 0 0;
background:url('../images/asideH.png') no-repeat center top;
position:relative;
border-radius:5px 5px 5px 5px;
box-shadow:1px 1px 2px #555;
}
#aside > ul{
width:139px;
height:100%;
vertical-align:top;
background:#fcc;
background:-moz-linear-gradient(center top, rgb(227, 227, 227), rgb(242, 242, 242));
background:-webkit-gradient(linear, left top, left bottom, from(rgb(247, 247, 247)), to(rgb(242, 242, 242)));
filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorStr=#f7f7f7, endColorStr=#f2f2f2);
padding:0px 0px;
margin:0 1px 0px 1px;
border-radius:0 0 5px 5px;
box-shadow:inset -1px -1px 1px white;
}

De plus je viens de tester:

body{
display:table;
}
body, html{
height:100%;
}

... et ca ne change rien, mon élément UL ne prend toujours pas le hauteur ni pour Safari, ni pour IE (et rien de changé pour FireFox pour lequel tout marche bien dès le départ)

Sébastien
Bon, très surprenant!!

Je n'ai trouvé aucune solution, le passage des body à display:table génére une erreur (découpe de mon background à mi hauteur). En revanche, je me suis décidé à terminer mon intégration, et là SURPRISE ! le traitement des listes de mon "footer" règle le problème sur Safari: l'ul de mon élément "aside" prend enfin toute la hauteur... "va comprendre Charles ...":

#footer ul{
display:table-row;
}
#footer > ul > li{
padding:10px 20px;
display:table-cell;
}

Maintenant, si quelqu'un peut me donner un coup de main pour IE9 je serais assez content de ma journée Smiley cligne

D'ailleurs au passage, si quelqu'un a une solution pour assigner une hauteur égale à des colonnes passées à "float:left;" (pour IE6) ca m'aiderait aussi beaucoup Smiley biggrin

Sébastien
Sujet clos
Aller à