[CSS] img float:left en list ernaast geeft bullet probleem

[Ray-zor]

Jullie zijn wellicht bekend met het fenomeen dat in IE een list direct rechts naast een float:left image als resultaat heeft dat de bullets achter die image verdwijnen. Daar waar FF ze wel netjes laat zien. Voor mij als beginneling kwam dit onlangs als een verrassing. Na Googlen totdat ik een ons woog ben ik erachter dat het te maken heeft met het feit dat FF de bullets in de padding (of was het nu margin? ) van <li> plaatst en IE in de margin (of was het nu padding?). En een floated element kan wel over de margin (of was het etc.?) maar niet over de padding (of ...?). Helaas ben ik nog geen stap dichter bij het gewenste resultaat, zijnde dat de bullets netjes naast het plaatje komen te staan, net als in FF.

Er zijn helaas ook enkele complicaties die de mogelijke oplossingen die ik tot nu toe heb gevonden in de weg staan. Zo heeft { list-style-position: inside; } wel het gewenste effect voor de standaard bullets, maar aangezien in mijn geval die bullets vervang door images { background:transparent url(bullet_li.gif); } werkt het toch weer niet. Ook ad-hoc layout truukjes met tabellen, margin-left of width gaan niet werken omdat de pagina dynamisch wordt opgebouwd. Het is geen gegeven dat er een plaatje is en welke dimensies die dan heeft. En of er überhaupt lijsten in de tekst staat en of die lijst dan ter hoogte van dat plaatjes is.

Had van tevoren eigenlijk gedacht dat dit wel een bekend probleem zou zijn en er dus veel over te vinden zou zijn. Maar het aantal nuttige hits in Google was relatief beperkt. En in GoT zelfs niet-bestaand.
Enige hoop die ik nu nog heb is dat er een CSS hack voor IE is die de browser toch de bullets naast een floated image netjes weergeeft. Ik acht de kans klein, maar zie het maar als een uitdaging

[crisp]

Als je de bullets vervangt dmv een background-image dan zou ik gewoon list-style: none opgeven om de standaard bullets helemaal te verbergen

[Ray-zor]

crisp schreef op donderdag 28 juli 2005 @ 11:36:
Als je de bullets vervangt dmv een background-image dan zou ik gewoon list-style: none opgeven om de standaard bullets helemaal te verbergen

Ze zijn normaal ook verborgen met {list-style: none} . Ik had ze alleen even weer tevoorschijn gehaald om te testen wat { list-style-position: inside; } precies voor een effect had.

Achtergrond info: ik heb hier op het werk te maken met een vrije geavanceerde stylesheet van 700+ regels gemaakt door een specialistische externe partij. Deze css blijkt nu in een enkel geval (zoals deze) toch niet helemaal IE-proof, wat eigenlijk wel de eis is binnen de organisatie. Dus ben ik nu die stylesheet aan het doorgronden en aanpassen waar nodig.

[Ray-zor]

Eureka! Ik heb iets gevonden wat me in ieder geval een heel stuk verder helpt. Voor de betreffende gedeeltes waar de tekst een lijst kan bevatten en er een floated image kan staan, definieer:
ul { height:1%; }

Soortgelijke IE hack (ik meen dat het de "Holy Hack" heet...) was ik al tegengekomen tijdens mijn zoektocht en staat zelfs op een bepaalde plek ook al in de stylesheet. Maar mijn kennis was te beperkt om te bedenken dat dit ook voor mijn situatie kon helpen. Vraag me ook niet wat het eigenlijk doet.
Voor <ol> zal er iets anders verzonnen moeten worden. ol { list-style-position:inside; } helpt maar dat brengt op andere plaatsen ongewenst gedrag teweeg. Maar goed, dat daar komen we wel uit.

[crisp]

De Holly Hack foceert hasLayout in IE waardoor een aantal tekortkomingen van het IE floatmodel omzeilt worden

[Ray-zor]

crisp schreef op vrijdag 29 juli 2005 @ 11:24:
De Holly Hack [...]

LOL. En het was niet eens een type fout. Las echt elke keer "Holy" . Ik word zeker dislectisch. Anyway, thx voor de toelichting. Wat mij betreft kan dit draadje op slot.

[ Voor 4% gewijzigd door Ray-zor op 29-07-2005 12:34 ]