04. maj 2004 - 21:27Der er
9 kommentarer og 2 løsninger
Bullets floating around image
Jeg har dette stykke html som er placeret i BODY tag'et. Punktopstillingen burde flyde pænt omkring billedet som alle andre elementer. Det gør den bare ikke. I MSIE 6.0 kan punkterne ikke ses fordi de ligger bag billedet og i den nyeste mozilla ligger de oveni billedet. Er der nogen der har løst dette problem? Det du'r ikke at tilføje stylen 'list-style-position:inside' til UL tag'et da punkter bestående af flere linjer så kommer til at se forkert ud.
<img src="image.jpg" width="180" height="425" style="float:left;" /> <div style="float:left;"> <ul> <li>Punkt 1</li> <li>Her er et punkt, som helt klart kommer til at fylde adskillige linjer. Punkt 2 Her er et punkt, som helt klart kommer til at fylde adskillige linjer. Her er et punkt, som helt klart kommer til at fylde adskillige linjer. Her er et punkt, som helt klart kommer til at fylde adskillige linjer. </li> <li>Punkt 3</li> <li>Punkt 4</li> </ul> </div>
Det virkede tak for det. Jeg har efterfølgende forsøgt at placere et billede der flyder til højre. For at dette ville virke blev jeg nødt til at lægge en border på UL tag'et ellers så punktopstilligen forkert ud. Borderen har så samme farve som baggrunden.
Det virker "selvfølgelig" kun i MSIE. Opera og Mozilla smider punktopstillingen ned bag alt teksten og MSIE og Safari på Mac har jeg ikke forsøgt mig med endnu.
Jeg har så ikke kigget i de andre browsere, men float:right; i IE var da ligetil:
<img src="image.jpg" width="180" height="425" style="float:right;" /> <ul> <li>Punkt 1</li> <li>Her er et punkt, som helt klart kommer til at fylde adskillige linjer. Punkt 2 Her er et punkt, som helt klart kommer til at fylde adskillige linjer. Her er et punkt, som helt klart kommer til at fylde adskillige linjer. Her er et punkt, som helt klart kommer til at fylde adskillige linjer. </li> <li>Punkt 3</li> <li>Punkt 4</li> </ul>
-- det ser godt nok mystisk ud (i Mozilla !-), som om ul-tagget ophæver div'ens blok ?-)
Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.