Avatar billede twami Nybegynder
03. oktober 2007 - 19:00 Der er 21 kommentarer og
1 løsning

Indhold forsvinder i DIV's

Jeg har en ganske frustrerende problem på et site jeg er ved at opbygge. Jeg oplever flere gange at tekstindhold i nogle DIV's forsvinder i IE7. Markerer jeg indholdet, så vises teksten igen (eller hvis siden opdateres).

Det sker typisk når jeg har nogle floatede DIV's og en clear:both div længere nede på siden.

Så eksempel her: http://mogens15.mcbtest.dk/pages/webside.asp?articleguid=33342 (PS: siden er stadig i implementeringsfasen).

Håber nogen kan hjælpe mig med problemet.
Avatar billede olebole Juniormester
03. oktober 2007 - 19:13 #1
<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>
Avatar billede softspot Forsker
03. oktober 2007 - 19:21 #2
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).
Avatar billede softspot Forsker
03. oktober 2007 - 19:31 #3
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...
Avatar billede olebole Juniormester
03. oktober 2007 - 19:35 #4
- den mand kan ramme 'the softspot' i ethvert koderhjerte!  ;D
Avatar billede softspot Forsker
03. oktober 2007 - 19:45 #5
Heeey! No mocking! :D
Avatar billede olebole Juniormester
03. oktober 2007 - 20:24 #6
Tværtimod! Din kommentar var som talt ud af mit hjerte!  ;o)
Avatar billede softspot Forsker
03. oktober 2007 - 20:57 #7
Jeg gør mig så umage... :)
Avatar billede twami Nybegynder
04. oktober 2007 - 06:49 #8
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.
Avatar billede softspot Forsker
04. oktober 2007 - 15:54 #9
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;
}
Avatar billede olebole Juniormester
04. oktober 2007 - 20:19 #10
- og så begynder man nemlig at udfolde CSS' kraft i al dens skønhed  ;o)
Avatar billede roenving Novice
05. oktober 2007 - 06:22 #11
Bingo !-)
Avatar billede twami Nybegynder
10. oktober 2007 - 07:30 #12
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..?
Avatar billede softspot Forsker
10. oktober 2007 - 08:07 #13
Hvis du ikke ved om det span-tag er problemet, er der en hurtig måde at teste det på...! :-)
Avatar billede softspot Forsker
10. oktober 2007 - 08:10 #14
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.
Avatar billede twami Nybegynder
10. oktober 2007 - 10:42 #15
Som jeg skriver, så ved jeg dette span tag IKKE er problemet - jeg har testet det.

Jeg prøver at kigge på DOCTYPE'en
Avatar billede softspot Forsker
10. oktober 2007 - 10:54 #16
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...
Avatar billede twami Nybegynder
12. oktober 2007 - 08:17 #17
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.
Avatar billede softspot Forsker
12. oktober 2007 - 09:36 #18
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">
Avatar billede twami Nybegynder
23. oktober 2007 - 06:58 #19
Det løste problemet :-)

Mange tak for hjælpen.
Avatar billede twami Nybegynder
23. oktober 2007 - 06:58 #20
Kan du svare så jeg kan give points?
Avatar billede softspot Forsker
23. oktober 2007 - 08:41 #21
Ja, velbekomme :)
Avatar billede softspot Forsker
26. oktober 2007 - 09:15 #22
Tak for point :)
Avatar billede Ny bruger Nybegynder

Din løsning...

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.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester