Live functie geeft ander beeld dan in IE10

[Winniemie]

Hallo,

ik heb een website, gemaakt in een vroegere versie van DW, maar nu bewerkt in DW cs6.
In de linker kolom van de template staan elementen die ik niet op de goeie hoogte krijg.

Een voorbeeld vind je op www.canisha.be.
Links heb je het nieuwskader (dat ik dank zij hulp van dit forum op alle pagina's op dezelfde hoogte kan houden).
Onder dat nieuwskader staan het FB logo, nog een logo en enkele woorden tekst. Het FB logo zou juist onder het nieuwskader moeten komen, want anders wordt in de cel ernaast teveel witruimte gecreëerd. Wanneer ik in DW deze gegevens in Live goed zet, staan ze in IE10 half achter het nieuwskader verscholen. Ik laat ze dus zakken tot het in IE goed is, maar dan is de ruimte tussen kader en logo weer te groot in Google Chrome.
Ik vermoed dat het vrij eenvoudig kan opgelost worden, maar heb niet veel kaas gegeten van html code schrijven.
Kan iemand mij helpen aub? Alvast bedankt voor de moeite!

Winnie

 

[Winniemie]

Wederom hallo,

Is hier niemand die mij een antwoord kan geven op mijn vraag aub?

Bij voorbaat dank!

Winnie

 

[csshunter]

Hoi Winnie,
Je hebt nu staan:

<table width="100%" cellspacing="0" cellpadding="0" bordercolor="#000000" border="1" bgcolor="#CCC4AD" align="left">
   <tbody>
      <tr>
         <td>
            <div style="width:200px;height:200px;overflow:auto;bgcolor:#ccc4ad;">
               <p align="left" class="nieuws">16/02<br>
                  <a href="nieuws.html"><font color="#000000">Sponsorloop</font></a></p>
               <p align="left" class="nieuws">1/02<br>
                  <a href="nieuws.html#n01022013"><font color="#000000">Eerste jaarfeest - een impressie</font></a></p>
               <p align="left" class="nieuws">18/01<br>
                  <a href="nieuws.html#n18012013"><font color="#000000">De Muppetshow</font></a></p>
               ...
               enz.
            </div>
         </td>
      </tr>
   </tbody>
</table>

<div>
   <p align="center">&nbsp;</p>
   <p align="center">&nbsp;</p>
   <p align="center">&nbsp;</p>
   <p align="center">&nbsp;</p>
   <p align="center">&nbsp;</p>
   <p align="center"><br>
      <a target="_blank" href="https://www.facebook.com/#!/groups/455053954521728/"><img 
      width="50" height="50" border="0" align="top" alt="Join us on Facebook" src="images/logo_facebook.jpg"></a></p>
   <p align="center"><span class="gewonetekst"><strong>kandidaat lid</strong></span><br>
      <a target="_blank" href="lidmaatschap_ADEu.pdf"><img 
      width="120" height="60" border="0" alt="ADEu" src="images/logo_ADEu.jpg"></a></p>
   <p align="center" class="gewonetekst"><strong>lid<br>
      <span class="style5">Belgian Assistance Dog Federation</span></strong></p>
</div>

Als je daarvoor in de plaats dit probeert:

<div id="nieuws">
   <p>16/02<br>
      <a href="nieuws.html">Sponsorloop</a></p>
   <p>1/02<br>
      <a href="nieuws.html#n01022013">Eerste jaarfeest - een impressie</a></p>
   <p>18/01<br>
      <a href="nieuws.html#n18012013">De Muppetshow</a></p>
   <p>04/01<br>
      <a href="nieuws.html#n04012013">Lagun betekent 'vriend'</a></p>
   <p>28/12<br>
      <a href="nieuws.html#n28122012">Gulle schenker</a></p>
   <p>20/12<br>
      <a href="nieuws.html#n20122012">Kerstmarkt Nike Laakdal</a></p>
   ...
   enz.
</div>

<div id="onderNieuws">
   <p><a target="_blank" href="https://www.facebook.com/#!/groups/455053954521728/"><img 
      src="images/logo_facebook.jpg" width="50" height="50" alt="Join us on Facebook"></a></p>
   <p><strong>kandidaat lid</strong><br>
      <a target="_blank" href="lidmaatschap_ADEu.pdf"><img 
      src="images/logo_ADEu.jpg" width="120" height="60" alt="ADEu"></a></p>
   <p><strong>lid<br>
      <span class="style5">Belgian Assistance Dog Federation</span></strong></p>
</div>

... en in de css toevoegt:

#nieuws {
   width: 190px;
   padding-left: 10px;
   height: 200px;
   overflow: auto;
   background-color: #E5E1D3;
   border: 1px solid #00A1F9;
   font-family: Verdana,Arial,Helvetica,sans-serif;
   font-size: 11px;
   font-style: italic;
   }
#nieuws a {
   color: #000000;
   }

#onderNieuws {
   margin-top: 50px;
   font-family: Verdana,Arial,Helvetica,sans-serif;
   font-size: 12px;
   text-align: center;
   }
#onderNieuws p {
   margin: 25px 0;
   }
#onderNieuws a img {
   border: 0;
   }

... gaat het dan beter in alle browsers?

Toelichting:

• Een combinatie van opmaak met tabellen en opmaak met css-div's gaat vaak de mist in.
• Voor het nieuwsblok kan de omringende extra tabel gemist worden.
• De css kan drastisch vereenvoudigd worden door de eigenschappen voor de <p>'s e.d. binnen een bepaalde <div> niet telkens opnieuw aan de <p>'s zelf te geven, maar ze in één klap tegelijk te pakken via de eigenschappen van de <div> zelf.
• Door het waterval-systeem van de css (cascade style sheets!) worden namelijk de meeste eigenschappen geërfd door alles wat binnen een bepaald element zit.
• Tegelijkertijd ben je ook mooi af van opmaak-tags als <font> in de html: die zijn eigenlijk achterhaald en fout (zie ook hier).

Met vriendelijke groet,
CSShunter

 

[Winniemie]

Amai, CSShunter, welbedankt voor al de moeite die je gedaan hebt!
Het werkt prima nu! Ik heb alleen Google Chrome en Internet Explorer als browsers maar in beide is het probleem nu opgelost.
Dat had ik nooit zelf gekund. HTML-code lezen lukt meestal nog wel, maar het schrijven, ho maar!
Nog eens van harte bedankt!
Groetjes van een blije
Winnie