Weergegeven resultaten: 1 t/m 13 van 13
  1. #1
    Member Floyd's schermafbeelding
    Lid sinds
    17/07/02
    Locatie
    Strombeek-Bever
    Berichten
    2.962
    iTrader
    0

    CSS: Compatibiliteitsproblemen in IE (divs)

    Hello,
    Ik ben bezig aan mijn nieuwe site, deze keer volledig (of toch bijna volledig) gelayout met divs en css. In Firefox werkt alles prima, maar in IE kom ik natuurlijk weer enkele problemen tegen...

    De site staat hier: http://jelle.neewel.be/index.php

    Om het snelst te zien wat er aan de hand is moet je dezelfde url maar eens zowel met IE als FF openen, maar ik zal hier toch even verduidelijken wat ik bedoel:

    - het menu sluit niet aan bij de witte div (div.wit) eronder bij hover
    - de titel sluit niet aan bij de witte div (div.main) eronder

    En dan nog een groot probleem (eigenlijk veel groter dan de voorgaande), op volgende pagina: http://jelle.neewel.be/fotos.php
    Zoals je kan zien is de breedte niet goed in IE, in tegenstelling tot FF waar het perfect is. Als ik het probeer te fixen voor IE door de width van de betreffende <div> op 570px te zetten (ipv 260px, wat samen met de 310px padding ook 570px maakt), komt het natuurlijk veel te breed uit in Firefox...

    Weet iemand een oplossing voor deze lastige compatibiliteitsproblemen?

    Enorm bedankt bij voorbaat!

  2. #2
    Member orez's schermafbeelding
    Lid sinds
    17/07/02
    Locatie
    Meulebeke
    Berichten
    4.405
    iTrader
    7 (89%)
    voor het eerste probleem moetek nog eens zien, maar uw 2de probleem is supersimpel op te lossen.

    In plaats van op die div padding te zetten, zet op uw elementen binnen uw div een margin

  3. #3
    Member Floyd's schermafbeelding
    Lid sinds
    17/07/02
    Locatie
    Strombeek-Bever
    Berichten
    2.962
    iTrader
    0
    Wat ik nog vergeten ben daarstraks is de css te kopiŽren die ik gebruik, om het jullie wat makkelijker te maken qua opzoekwerk:

    div.container {
    width: 600px;
    }

    div.menu {
    font-size: 17px;
    font-weight: bold;
    height: 40px;
    vertical-align: bottom;
    line-height: 50px;
    position: relative;
    top: 7px;
    }

    div.wit {
    position: relative;
    top: 5px;
    background-color: #eeeeee;
    font-size: 8px;
    }

    div.titel {
    font-size: 48px;
    font-weight: bold;
    text-align: right;
    height: 43px;
    vertical-align: top;
    }

    div.main {
    background-color: #eeeeee;
    padding: 15px;
    font-family: arial;
    font-size: 12px;
    line-height: 20px;
    color: black;
    text-align: left;
    }


    foto's

    div.bbq a {
    width: 260px;
    height: 185px;
    background: url(../img/inhoud/fotos/bbq.gif) 0 0 no-repeat;
    float: left;
    padding-left: 310px;
    }

    div.ff a {
    width: 260px;
    height: 185px;
    background: url(../img/inhoud/fotos/ff.gif) 0 0 no-repeat;
    float: left;
    padding-left: 310px;
    }

    div.polen a {
    width: 260px;
    height: 185px;
    background: url(../img/inhoud/fotos/polen.gif) 0 0 no-repeat;
    float: left;
    padding-left: 310px;
    }

    div.bbq a:hover, div.ff a:hover, div.polen a:hover {
    background-color: #e3e3e3;
    background-position: 0 -185px;
    width: 260px;
    height: 185px;
    padding-left: 310px;
    }


    Orez, kan je eens verduidelijken wat je exact bedoelt (mss door middel van een code-voorbeeld) want ik heb het niet helemaal door, denk ik. Na het lezen van je tip veranderde ik de padding-left's in margin-left's (zonder goed resultaat), maar dat was niet wat je bedoelde denk ik.
    Nogmaals: dank.

  4. #4
    Member orez's schermafbeelding
    Lid sinds
    17/07/02
    Locatie
    Meulebeke
    Berichten
    4.405
    iTrader
    7 (89%)
    wel floyd

    stel je hebt een div laat hem mij "vb" noemen met een p element erin.

    HTML-code:
    <div id="vb">
      <p></p>
    </div>
    je hebt 2 mogelijkheden om het p element te gaan uitlenen zoals je wenst.
    Of je voegt padding toe aan je div element.

    Code:
    #vb { padding-left : 300px; width: 300px }
    waar uw probleem zich dus situeert.
    of je doet het volgende:

    Je geeft een margin-left mee aan je p element en geen padding aan het div-element.

    Code:
    #vb { padding: 0; width: 300px; }
    #vb p { margin-left: 300px; }
    op bovenstaande manier met de margin toe te passen op het p element (of in u geval, de elementen binnen de probleem div) zou het perfect moeten werken.

  5. #5
    Member Floyd's schermafbeelding
    Lid sinds
    17/07/02
    Locatie
    Strombeek-Bever
    Berichten
    2.962
    iTrader
    0
    Oh ja ik begrijp het. Dus ik steek die tekst die naast de foto moet komen in een <p> of in een <span> en geef dat een margin. Ik zal dat morgen eens proberen. Bedankt!

  6. #6
    Member Xavez's schermafbeelding
    Lid sinds
    29/11/04
    Locatie
    My attic
    Berichten
    5.938
    iTrader
    0
    Zet ze meteen in een P-element, waar tekst sowieso hoort en geef die dan nog een class mee

  7. #7
    Member Floyd's schermafbeelding
    Lid sinds
    17/07/02
    Locatie
    Strombeek-Bever
    Berichten
    2.962
    iTrader
    0
    OK. Wat is er verkeerd aan een span?

  8. #8
    Member orez's schermafbeelding
    Lid sinds
    17/07/02
    Locatie
    Meulebeke
    Berichten
    4.405
    iTrader
    7 (89%)
    een span dient om een stukje tekst binnen een p te highlighten.

    Dus stel dat ge iets vetgedrukt wilt binnen uw paragraaf. dan gebruik je daarvoor infeite een span. (aangezien <b> deprecated is) en met een span kun je natuurlijk ook veel meer dan enkel vet/onderlijnd/cursief

    dus infeite als volgt:

    HTML-code:
    <p>
     hier komt mijn tekst en uitleg bij de desbetreffende foto.
     <span>Dit wil ik wat laten opvallen</span> hier gaat je tekst dan weer verder
    </p>
    get it?

  9. #9
    Member Floyd's schermafbeelding
    Lid sinds
    17/07/02
    Locatie
    Strombeek-Bever
    Berichten
    2.962
    iTrader
    0
    Yes, absoluut, maar dat wist ik eigenlijk al. Mooi uitgelegd, wel. Wat ik mij eerder afvroeg is waarom je dan niet gewoon mag doen:
    HTML-code:
    <span>
    hier komt mijn tekst en uitleg bij de desbetreffende foto. <span>
    Dit wil ik wat laten opvallen</span> hier gaat je tekst dan weer verder
    </span>
    Met andere woorden: waarom bestaat juist <p>, als het (voor zover ik momenteel kan zien) toch hetzelfde doet als een <span> ?

  10. #10
    Member Floyd's schermafbeelding
    Lid sinds
    17/07/02
    Locatie
    Strombeek-Bever
    Berichten
    2.962
    iTrader
    0
    orez, ik heb je methode geprobeerd en het werkte niet.. hier is de code die ik gebruikte:

    HTML-code:
    <div class="main" style="height: 185px;">
    <div class="bbq">
    <p class="fotos"><a href="http://demosbeq2.free.fr/jelle/bbq/" target="_blank"><i>06/05/2006</i><br><b class="titel">Housewarming BBQ Lore en Steve</b></a></p>
    </div>
    </div>
    Code:
    div.bbq a {
    width: 260px;
    height: 185px;
    background: url(../img/inhoud/fotos/bbq.gif) 0 0 no-repeat;
    float: left;
    }
    
    p.fotos {
    margin-left: 300px;
    }
    Zie je (of iemand anders) nog een oplossing?

  11. #11
    Member orez's schermafbeelding
    Lid sinds
    17/07/02
    Locatie
    Meulebeke
    Berichten
    4.405
    iTrader
    7 (89%)
    trouwens floyd:

    <p class="fotos"><a href="http://demosbeq2.free.fr/jelle/bbq/" target="_blank"><i>06/05/2006</i><br><b class="titel">Housewarming BBQ Lore en Steve</b></a></p>

    dit is niet semantisch correct.
    Wat beter is: <h2><a href=""><span></span></a></h2>
    gebruik geen p's etc... om titels te definieren maar de h tags
    h1, h2, h3, h4, h5, h6, ...

    voor uw probleem zal ik straks eens zien, ben nu ff bezig

  12. #12
    Member Floyd's schermafbeelding
    Lid sinds
    17/07/02
    Locatie
    Strombeek-Bever
    Berichten
    2.962
    iTrader
    0
    Ja, juist, bedankt. Ik ga mij voorlopig niet bezig houden met dit allemaal aan te passen, maar het zit in mijn achterhoofd.

  13. #13
    Member Floyd's schermafbeelding
    Lid sinds
    17/07/02
    Locatie
    Strombeek-Bever
    Berichten
    2.962
    iTrader
    0
    een schaamvolle... *bump*!
    orez, of iemand anders, als je het nog eens zou willen bekijken... vreselijk bedankt!

Discussie informatie

Users Browsing this Thread

Op dit moment bekijken 1 gebruikers deze discussie. (0 leden en 1 gasten)

Regels voor berichten

  • Je mag geen nieuwe discussies starten
  • Je mag niet reageren op berichten
  • Je mag geen bijlagen versturen
  • Je mag niet je berichten bewerken
  •