Page 1 sur 2
Overflow, li et div
Posté : 25 déc. 2011, 12:41
par xTG
Bonjour à toutes et à tous,
j'ai actuellement un problème de CSS relatif à un li dans une balise pre en overflow auto.
Le background de la balise li ne s'étend pas au delà de ce qui n'est pas visible à cause de l'overflow...
Comment puis-je résoudre ce problème d'affichage ?
http://img204.imageshack.us/img204/1781/capturegxc.png
Pas de css bien particulier, donc je suppose que c'est un comportement de base. :/
Re: Overflow, li et div
Posté : 25 déc. 2011, 13:02
par juliette
je suis pas sur d'avoir compris:
<div>
<pre overflow="auto" style="background:red;">
<ul>
<li>test</li>
</ul>
</pre>
</div>
est ce que ça ressemble a ça ?
la le background prend la totalité de la div
Re: Overflow, li et div
Posté : 25 déc. 2011, 13:16
par juliette
Re: Overflow, li et div
Posté : 25 déc. 2011, 13:49
par xTG
Voici le cheminement exact :
<div class="code">
<pre class="php" style="font-family:monospace;">
<ol>
<li style="background: #fefefe;">
<div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">
<span style="color: #000088;">$resultat</span>
.code {
overflow-x: auto;
}
Il y a une série de balises span dans le dernier div (permettant la coloration syntaxique - GeShi).
A noter que même si je change le background: none qui traine par une couleur, cela revient au même. :/
Le topic ne m'a malheureusement rien apporté, je teste sous Firefox et Chrome et obtient le même résultat.
Re: Overflow, li et div
Posté : 25 déc. 2011, 17:13
par Invité
Re: Overflow, li et div
Posté : 25 déc. 2011, 17:26
par xTG
Je suppose que tu parles de cela :
Comme vous pouvez le constater la propriété de feuille de style css overflow-x n'est pas compatible avec les navigateurs comme Firefox>1.5/Nestcape.
Sauf que ce n'est plus le cas depuis pas mal de versions.
Preuve est qu'avec juste overflow-x j'ai bien la scrollbar attendue, c'est juste que j'ai ma couleur de background qui ne suit pas.
Et d'ailleurs j'ai le même comportement avec IE9, donc cela semble commun à tous les navigateurs. Je dois avoir zappé un truc...
Re: Overflow, li et div
Posté : 25 déc. 2011, 17:30
par juliette
oui, j'étais chez mes parents et pas connecter...
as tu fire-bug pour regarder les propriété ?
as tu essayer <ul> a la place de <ol> ?
ce sont bien les <li> qui ne sont pas asse long ?
Re: Overflow, li et div
Posté : 25 déc. 2011, 17:39
par xTG
Oui ce sont bien les balises li dont le background ne s'étend pas sur toute la largeur, il se stoppe à la largeur initiale du div et on voit donc du vide dès qu'on utilise la scrollbar (cf image).
J'ai firebug et j'ai tenté de changé pas mal d'attributs CSS mais sans obtenir une hausse de la largeur du background.
ul ou ol ne change pas vu que la base css reste la même, ce n'est que la représentation des puces qui change.
Re: Overflow, li et div
Posté : 25 déc. 2011, 17:47
par juliette
et si tu fait:
li: {display: block; width:100%;}
moi je teste ca:
<div class="code" style="overflow-x: auto;">
<pre class="php" style="font-family:monospace;">
<ol>
<li style="background: #fefefe;">
<div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">
<span style="color: #000088;">$resultat</span>
</div>
</li>
</ol>
</pre>
</div>
et ça donne:
http://i45.servimg.com/u/f45/13/05/90/60/captur12.png
Re: Overflow, li et div
Posté : 25 déc. 2011, 17:54
par juliette
as tu essayer aussi:
.code {
overflow-x: auto 100%;
}
ou
<div class="code" style="overflow-x: auto; width:100%;">
je commence a comprendre ce que vous voulez dire quand je ne vous donne pas toutes les infos, ce n'est pas une critique loin de la mais je me rend compte qu'il est tres dure d'imaginer le code de quelqu'un d'autre...
peux tu me faire voir ton css complet ?
Re: Overflow, li et div
Posté : 25 déc. 2011, 18:02
par juliette
si tu met: <pre class="php" style="font-family:monospace; background:red;"> on pourras voir sa taille exact grâce au fond rouge, je cherche de ce cote car chez moi les <li> prennent toutes la largueur...
as tu du css sur tes <li> ?
Re: Overflow, li et div
Posté : 25 déc. 2011, 18:25
par xTG
Voici un code épuré et stand-alone qui reproduit le bug : (FF 8, Chrome 16)
<html>
<body>
<div class="code" style="width:300px; overflow-x: auto;background: yellow;">
<pre style="background:red;">
<ol>
<li style="background:#dedede;">ttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt</li>
</ol>
</pre>
</div>
</body>
</html>
J'arrive à recouvrir un peu plus du background des li en utilisant width et en spécifiant une taille supérieure à 300 en pixel, cependant ma largeur de li est dynamique sur mon site final donc cela ne me convient pas. :/
Par contre je viens de me rendre compte que ce code fonctionne très bien sous IE 9.0, mais pas mon code final.
M'enfin, dans l'optique je veux avant tout un fonctionnement Chrome/FF.
Re: Overflow, li et div
Posté : 25 déc. 2011, 18:50
par juliette
j'ai le même soucis que toi, la seul chose que je trouve pour le moment est le <pre> a 400% par exemple ou le chiffe qui te conviens mais c'est pas une solution...
ça me fait me dire que comme tu le pense le <pre> se fixe a la taille de 300px je cherche encore...
Re: Overflow, li et div
Posté : 25 déc. 2011, 19:20
par juliette
teste ca, je pense que c'est bon:
<html>
<body>
<div class="code" style="width:300px; overflow-x:auto; background:yellow;">
<pre style="background:red; display:inline-block;">
<ol>
<li style="background:#dedede; margin-right:10px;">ttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt</li>
</ol>
</pre>
</div>
</body>
</html>
marche avec fire-fox et chrome, comportement un peut différent avec ie, les <li> font le double en hauteur...
Re: Overflow, li et div
Posté : 25 déc. 2011, 19:42
par xTG
Impeccable ! Merci Juliette.
Pour la hauteur des li sous IE je pense qu'un line-height suffira pour régler le problème.
