[Résolu] Faire déborder le contenu d'un div avec IE ?

Bonjour,

Je souhaite faire déborder une image d'un bloc.
Ci-dessous les exemples en version simplifiée:

A la verticale:

Le HTML:

<div id="top">
  <img src="montitre" height="25px" />
</div>

Le CSS:

div#top {
  height: 20px;
  overflow: visible;
  border-bottom: solid 1px green;
}

div#top img {
  float: left;
}

Résultat:


EDIT: ce problème a été résolu en utilisant

div#top img {
  position: absolute;
}

A l'horizontale:

Le HTML:

<ul id="menu">
  <li>texte</li>
</ul>

Le CSS:

ul#menu {
  position: absolute;
  margin: 0;
  padding: 0;
  list-style-type: none;
  
  overflow: visible;
  border-left: solid 10px #ff6600;
}

ul#menu li {
  margin-left: -10px;
  padding-left: 20px;
  background: url('puce.png') no-repeat 0 0;
}

Résultat:


Ici, c'est le "position: absolute;" qui semble poser problème mais je n'ai pas compris pourquoi... ça ne marche pas mieux avec "position: relative;".
Modifié par elvex (12 Dec 2005 - 01:03)

Salut,

Tu utilises position absolute, mais je ne vois pas de top, left, bottom ou right.
C'est normal ?

Salut et bienvenue ici

Ce ne serait pas plus logique de faire un simple décalage à l'aide d'une position relative ?

Exemple :

div#top img {
position: relative;
top: 5px;
}

@marvin:
pas de top, left, right, bottom, c'était juste pour pas surcharger le code... j'ai laissé seulement les propriétés significatives. J'ai testé les exemples tels quels, ils rendent bien le bug visible.

@raphaël:
euh... je vois pas pourquoi relative ? mon image est collée en haut du div, c'est juste qu'elle doit déborder par-dessus la bordure bottom.

En revanche je trouve toujours pas de solution pour le débordement de ma liste...

Salut,

simplement à titre de vérification, est ce que ton document html a bien un doctype en entête ?

oui oui... sauf attribut target, le document est valide xhtml 1.0 strict... et sans prologue xml, j'ai cru comprendre que c'était pas bon à cause du doctype switching.
Modifié par elvex (08 Dec 2005 - 19:32)

Bonsoir,

Il est beaucoup plus simple de jouer sur un déplacement latéral des <li> en position relative :

<style type="text/css">
<!-- 
ul#menu {
list-style-type: none;
background: red;
width: 100px;
margin: 0;
padding: 5px 0;
}

ul#menu li {
background: yellow;
[b]position: relative;
left: -10px;[/b]
margin: 5px [b]-10px[/b] 0 0;
padding-left: 20px;
}
-->
</style>

<ul id="menu">
  <li>texte</li>
  <li>texte</li>
  <li>texte</li>
  <li>texte</li>
</ul>

Modifié par Laurent Denis (08 Dec 2005 - 20:58)