Indhold forsvinder i DIV's

<ole>

Du har nogle ret meningsløse konstruktioner:
    <span style='line-height:7px;'><br /></span>

- men om de er årsagen, ved jeg ikke. Under alle omstændigheder bør du helt klart vælge en anden løsning.

Hvad er det, du forsøger at clear'e med de her:
    <div style="clear:both"></div>

/mvh
</bole>

Ja, det virker næsten som om du forsøger at styre liniehøjden i dine tekster, ved at sætte liniehøjden på lineskift og det er ikke måden at gøre det på. Du skal i stedet sørge for at liniehøjden sættes på den container som teksten ligger i (<p>), eller endnu mere generelt (f.eks. i body, hvis det er en generel egenskab for hele siden).

Well, rent faktisk bør du nok droppe det der linieskift helt og så benytte paragraf-elementet til at skabe den luft der skal være mellem paragrafferne. det vil også give et mere naturligt flow i din HTML (og der vil blive mindre af den). På samme måde vil jeg mene du bør droppe div-elementerne omkring hvert afsnit og bruge styles til at styre hvor meget luft der skal være mellem de forskellige afsnit - du kan man fordel benytte dig af at styles kan defineres under andre styles, dvs. en klasse kan definere hvordan f.eks. h1, h2, h3, p osv. skal se ud når de ligger i denne klasse. På den måde kan du spare en del HTML og inline-styling og gøre din HTML slankere og hurtigere at hente...

- den mand kan ramme 'the softspot' i ethvert koderhjerte!  ;D

Heeey! No mocking! :D

Tværtimod! Din kommentar var som talt ud af mit hjerte!  ;o)

Jeg gør mig så umage... :)

Mange tak for de gode svar.

Denne stump kode har jeg sat mit CMS-system til at indsætte når jeg laver linjeskift over to linje, da to <br> vil give for meget luft.
<span style='line-height:7px;'><br /></span>

Grunden til denne <div style="clear:both"></div> var på hvert afsnit er fordi, hvis der er tilknyttet et billede til afsnittet, så sættes den til float:left, så teksten "slanger" sig op ad billedet. Jeg har nu lavet det sådan, at clear:both kun indsættes i afsnittet, hvis der er et billede tilknyttet.

Jeg har nu erstattet DIV'en rundt om hvert afsnit med en tabel. Det gør faktisk at indholdet ikke længere "fejler". Jeg kan desværre ikke gøre, som du beskriver og sætte eksempelvis padding-top på mine <h> overskrifter, så der kommer luft mellem afsnittene, for hvis ikke jeg har valgt en overskrift på afsnittet i mit CMS, så vil overskriften og dermed <h> tagget slet ikke vises.

Jeg kan bare ikke forstår, at det virkelig er nødvendigt, at erstatte den ydre DIV med en tabel for at løse problemet.

Jeg synes nu stadig du gør det lidt mere besværligt end nødvendigt. I stedet for at gøre sådan for at få luft mellem dine afsnit:

<table>
  <tr>
    <td style="padding-bottom:15px;">
      <h3 style="padding-bottom:1px">Bestilling</h3>
      <p class="text">På skibutikken.dk kan du kun bestille varer. Hvis du har
        forespørgsler til varer som ikke er på siden er du altid velkommen til at
        kontakte os på
        <a href="mailto:webshop@skibutikken.dk">webshop@skibutikken.dk</a><br />
        <span style='line-height:7px;'><br /></span>
        Alle priser på websitet er inkl. moms og andre afgifter.</p>
    </td>
  </tr>
</table>
<table>
  <tr>
    <td style="padding-bottom:15px;">
      <h3 style="padding-bottom:1px">Betaling</h3>
      <p class="text">På skibutikken.dk kan der betales med følgende
        korttyper:<br /><span style='line-height:7px;'><br /></span>
        Dankort & Visa Dankort <br />Visa og Visa Ekectron <br />
        Mastercard <br />Dinners Club<br /> <br />Alle transaktioner på
        skibutikken.dk er gebyrfrie<br /><span style='line-height:7px;'><br /></span>
        Betales der med betalingskort er du altid sikret mod misbrug.
        Du har nemlig mulighed for at afvise en betaling, når du modtager
        din betalingsoversigt. Du har ingen selvrisiko i tilfælde af at dit
        kort bliver misbrugt i en internet-butik, der benytter SSL (Secure
        Socket Layer) i sit betalingssystem. Dermed er du bedre sikret end i
        den fysiske verden, hvor du har en selvrisiko på 1.200 kr. når dit
        dankort misbruges ved brug af pinkoden.<br />
        <span style='line-height:7px;'><br /></span>
        Data du sender i forbindelse med køb betalt med betalingskort er
        krypteret (SSL), og det er således kun PBS, der kan læse dem.
        Hverken skibutikken.dk eller andre har mulighed for at læse disse data.
        <br /><span style='line-height:7px;'><br /></span>
        Beløbet for varerne trækkes først, når varerne sendes fra os, og der kan
        aldrig trækkes et større beløb, end det du har godkendt ved købet. </p>
    </td>
  </tr>
</table>

Så ville jeg da gøre sådan i stedet:

<div>
  <h3>Bestilling</h3>
  <p class="text">På skibutikken.dk kan du kun bestille varer. Hvis du har
    forespørgsler til varer som ikke er på siden er du altid velkommen til at
    kontakte os på <a href="mailto:webshop@skibutikken.dk">webshop@skibutikken.dk</a></p>
  <p class="text">
    Alle priser på websitet er inkl. moms og andre afgifter.</p>

  <h3 style="padding-bottom:1px">Betaling</h3>
  <p class="text">På skibutikken.dk kan der betales med følgende
    korttyper:</p>
  <p class="text">
    Dankort & Visa Dankort <br />
    Visa og Visa Ekectron <br />
    Mastercard <br />
    Dinners Club</p
  <p class="text">Alle transaktioner på skibutikken.dk er gebyrfrie</p>
  <p class="text">Betales der med betalingskort er du altid sikret mod misbrug.
    Du har nemlig mulighed for at afvise en betaling, når du modtager
    din betalingsoversigt. Du har ingen selvrisiko i tilfælde af at dit
    kort bliver misbrugt i en internet-butik, der benytter SSL (Secure
    Socket Layer) i sit betalingssystem. Dermed er du bedre sikret end i
    den fysiske verden, hvor du har en selvrisiko på 1.200 kr. når dit
    dankort misbruges ved brug af pinkoden.</p>
  <p class="text">Data du sender i forbindelse med køb betalt med betalingskort er
    krypteret (SSL), og det er således kun PBS, der kan læse dem.
    Hverken skibutikken.dk eller andre har mulighed for at læse disse data.</p>
  <p class="text">
    Beløbet for varerne trækkes først, når varerne sendes fra os, og der kan
    aldrig trækkes et større beløb, end det du har godkendt ved købet. </p>
</div>

og så styre layoutet i CSS med noget á la dette:

h3 {
  padding-bottom:1px
}
p.text {
  margin-bottom:7px;
}

Nu har jeg ikke lige testet det, men jeg vove den forsigtige påstand, at du kan opnå samme flow i din tekst som du gør med din noget tungere tabelorienterede (eller den forrige div-orienterede fremgangsmåde).

En suboptimering af din HTML kunne være at sætte en class på det omsluttende div-element og så fjerne class fra hvert paragraf-element (specielt hvis samtlige paragraf-elementer er påklistret class="text"). Altså efter følgende opskrift:

<div class="indholdet">
  <h3>Bestilling</h3>
  <p>På skibutikken.dk kan du kun bestille varer. Hvis du har
    forespørgsler til varer som ikke er på siden er du altid velkommen til at
    kontakte os på <a href="mailto:webshop@skibutikken.dk">webshop@skibutikken.dk</a></p>
  <p>
    Alle priser på websitet er inkl. moms og andre afgifter.</p>
  ...
  ...
</div>

Så kan du benytte disse styles i stedet:

.indholdet h3 {
  padding-bottom:1px
}
.indholdet p {
  margin-bottom:7px;
}

- og så begynder man nemlig at udfolde CSS' kraft i al dens skønhed  ;o)

Bingo !-)

Det er jeg helt med på. Jeg bruger også denne CSS teknik mange andre steder på sitet. At jeg ikke har gjort det lige netop her, skyldes nok blot dovenskab. Men det skyldes også, at jeg ved, dette ikke vil løse mit oprindelige problem - nemlig at noget af indholdet "forsvinder" i IE7 når jeg scroller.

For at illustrere det er jeg igen gået tilbage til DIV løsningen og har for god ordens skyld lavet CSS'en på den gode måde (har dog beholdt mine: <span style='line-height:7px;'><br /></span> - men jeg ved dette ikke er problemet).

Har I nogen idé om, hvorfor indholdet "forsvinder"? Er det en IE7 bug eller..?

Hvis du ikke ved om det span-tag er problemet, er der en hurtig måde at teste det på...! :-)

Men du skal vel stadig sørge for at have en fuld specificeret DOCTYPE (selvom det er IE 7.0), eller hvad? Lige nu mangler din DOCTYPE url...

Jeg er ikke klar over om dette også er et problem i IE 7, på samme måde som det var i IE 6.

Som jeg skriver, så ved jeg dette span tag IKKE er problemet - jeg har testet det.

Jeg prøver at kigge på DOCTYPE'en

Aaah OK, sorry, formuleringen snød mig lidt :-)

Jeg har kigget lidt på nogle af de andre sider og jeg synes fejlen går igen på de sider, hvor du bruger den span-løsning der...

Blot for at illustrere det, har jeg nu erstattet denne SPAN løsning med 2 <br> tags. Problemet er det samme.

Jeg har ikke haft tid til at kigge på DOCTYPE'en endnu, men skal nok sige til. Jeg har forhåbninger om, at det løser problemet.

Du kan prøve at udskifte din DOCTYPE med denne:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Det løste problemet :-)

Mange tak for hjælpen.

Kan du svare så jeg kan give points?

Ja, velbekomme :)

Tak for point :)