Jeg har en hjemmeside lavet med php og stylesheets. I teksten anvender jeg her og der bullet points med <li> (dog uden <ul>).
Til tekstfelter laver jeg 2 felter stylemæssigt: Eet felt, der har en grå farve med en margen. Inden for margenen laver jeg et hvidt felt ovenpå til teksten og igen med en margen, så der er afstand mellem tekst og det hvide felts kant. Da det hvide felt er mindre, er resultatet en grå ramme uden om det hvide felt.
Chrome viser de enkelte bulletpoints helt korrekt.
Men IE 9 viser bullet points forkert. Her overskrider bullet points nemlig det hvide felts kant, så hver bullet points faktisk går ind i det grå underliggende felt. Se tegningen herunder. Øverst er det Chromes udgave, og nederst er det IE9's udgave.
Er der nogen her, der har forstand på, hvordan jeg tackler mit stylesheet, så IE9 viser det korrekt?
Du bør starte med at sætte ul omkring dine lister. Det er ikke valid kode uden ul eller ol omkring li.
Det løser muligvis allerede problemet.
Det giver ikke mening at begynde at rette ikke valid kode i dit stylesheet. Når du ikke har ul omkring, så vil du aldrig vide om det virker i alle browsere. Selv hvis det gør, vil der være en risiko for at det virker i fremtidige browsere. Er der nogen grund til at du har udeladt ul?
Tak for svaret. Jeg kan prøve med <ul>. Ja, der er en meget klar årsag til, at jeg undgår <ul>, og det er, at <ul> indsætter ekstra mellemrumslinjer. De er ikke til at slippe af med, hvis din tekst er tilrettet således, at der ikke må være mellemrum mellem tekst og bullet points. Det gøres ofte for at gøre det lettere for læseren at forstå, at bullet points hænger sammen med teksten ovenfor og er ikke noget selvstændigt.
Tak for svaret. Jeg kan prøve med <ul>. Ja, der er en meget klar årsag til, at jeg undgår <ul>, og det er, at <ul> indsætter ekstra mellemrumslinjer. De er ikke til at slippe af med, hvis din tekst er tilrettet således, at der ikke må være mellemrum mellem tekst og bullet points. Det gøres ofte for at gøre det lettere for læseren at forstå, at bullet points hænger sammen med teksten ovenfor og er ikke noget selvstændigt.
I så fald er problemet at du ikke giver en style til ul. Prøv at sætte følgende i din css:
ul { margin: 0; padding: 0;}
Så skulle mellemrum mellem tekst og bullet points gerne forsvinde.
I så fald er problemet at du ikke giver en style til ul. Prøv at sætte følgende i din css:
ul { margin: 0; padding: 0;}
Så skulle mellemrum mellem tekst og bullet points gerne forsvinde.
Tak igen for svar, men jeg vil fortsat gerne have mellemrum mellem bullet points og tekst. Det må ikke forsvinde. Det er afstanden fra bullet points til feltets kant, der skal bevares. Måske kan jeg prøve med dit forslag.
Det gøres ofte for at gøre det lettere for læseren at forstå, at bullet points hænger sammen med teksten ovenfor og er ikke noget selvstændigt.
Hvis det gøres ofte sådan, så gøres det ofte forkert! Alle afstande kan sættes i css. Det er ikke hensigtsmæssigt at lave dårlig kode for at komme sådanne ting til livs. Det vil i længden skabe andre problemer, der er langt sværere at løse (og finde).
Skriv lige om det oprindelige problem forsvandt, når <ul></ul> er omkring li.
Det giver det stik omvendte af, hvad jeg ønsker. Der skal selvfølgelig ikke være mellemrum det øverste "tekster" og bullet points, men tværtimod være mellemrum mellem nederste bullet points og nederste "tekster". Jeg har selvfølgelig prøvet at bytte om, så margin er 1 og padding er 0, men så overskrider bullet points igen det hvide felts ramme. Afstanden mellem de nederste linjer kan selvfølgelig klares med <br>, men det mellemrum, som <ul> laver øverst, ved jeg ikke, hvordan jeg fjerner.
En anden årsag til, at jeg undgår <ul>, er at <ul> laver indrykninger, og det må det ikke.
Nå, men jeg takker mange gange for jeres forslag! Nu har jeg i det mindste noget at eksperimentere med.
Du risikerer flere problemer ved at lave invalid kode end ved at springe over fordi nogle elementer pr default ikke giver det ønskede designmæssige resultat. Få i stedet stylet elementerne rigtigt - blandt andet ved at angive korrekt måleenhed (fx px) og arbejd med både top, bottom, left og right margin og padding efter behov (fx margin: 10px 20px 30px 40px;).
bortset fra de andre gode råd som jeg kun kan tilslutte mig (du kan styre alt, hvis du gør det rigtgt og ikke snyder)
så tænker jeg at mellemrummet mellem top teksten og selve ul og det første li måske skyldes teksten ovenover og ikke styling af ul. hvis du sætter ul til en eller anden grim baggrundsfarve er det en god måde at få en ide om hvad der sker og hvor meget de forskellige elementer fylder.
Bliv gratis medlem
Opret bruger