Overflow, li et div

25 déc. 2011, 12:41

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

25 déc. 2011, 13:02

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

25 déc. 2011, 13:16

au cas ou: http://forum.alsacreations.com/topic-4-28544-1.html

25 déc. 2011, 13:49

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.

25 déc. 2011, 17:13

regarde la: http://www.zonecss.fr/style_css/feuille ... low_x.html

25 déc. 2011, 17:26

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

25 déc. 2011, 17:30

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 ?

25 déc. 2011, 17:39

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.

25 déc. 2011, 17:47

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

25 déc. 2011, 17:54

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 ?

25 déc. 2011, 18:02

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> ?

25 déc. 2011, 18:25

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.

25 déc. 2011, 18:50

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

25 déc. 2011, 19:20

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

25 déc. 2011, 19:42

Impeccable ! Merci Juliette.

Pour la hauteur des li sous IE je pense qu'un line-height suffira pour régler le problème.

Overflow, li et div

Qui est en ligne