Op deze website gebruiken we cookies om content en advertenties te personaliseren, om functies voor social media te bieden en om ons websiteverkeer te analyseren. Ook delen we informatie over uw gebruik van onze site met onze partners voor social media, adverteren en analyse. Deze partners kunnen deze gegevens combineren met andere informatie die u aan ze heeft verstrekt of die ze hebben verzameld op basis van uw gebruik van hun services. Meer informatie.

Akkoord

Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

Vreemd gedrag IE6

None
9 antwoorden
  • Hoewel ik nog niet toe ben aan de "officiele" sitecheck (die zeker gaat komen, maar de site is gewoon nog lang niet af) toch even een vraag naar de mening van anderen mbt een merkwaardig probleem. Het gaat over een Wordpress thema waar ik mee bezig ben.

    probleem:
    Als ik de site bekijk met IE (in mijn geval versie 6) dan blijken er regelmatig delen van de (rechter)hoofdkolom onzichtbaar te zijn. Soms is dit al meteen bij het opvragen van de pagina en vaak als je met je muis over de plaatjes van het topmenu in de linker(!) kolom hovert (reiziger, links, contact, archieven).
    De 'verdwenen' delen zijn echter niet verdwenen maar blijken gewoon te selecteren te zijn en als je dat eenmaal hebt gedaan is deze weer zichtbaar. Scroll je het even uit beeld en weer terug, dan zie je het ook weer. Bizar.

    Achtergrond:
    Dit probleem is begonnen nadat ik bezig was geweest in de rechter "hoofd kolom" om het 'category plaatje' en de post-titel achter elkaar op één regel te krijgen (b.v. [plaatje] Semantiek)
    Het plaatje is gewoon een link met een plaatje, en de titel is een H2. Omdat H2 een block level element is wil deze default op een nieuwe regel beginnen, dus daar moest wat ge CSS'ed worden om plaatje en H2 op één regel achter elkaar te krijgen. So far so good, dat werkte prima, todat de rest van het berichtje ook dolgraag achter de H2 wilde aansluiten. En dat is natuurlijk weer niet de bedoeling want het bericht zelf moet wel degelijk op een nieuwe regel beginnen. Ook daar vond ik iets op: ik voegde een clear:both; toe aan de stijl voor de messagbody (de tekst van het berichtje zelf)
    en zodra ik die clear had toegevoegd begonnen de problemen met IE. haal ik het weer weg, dan zijn de problemen ook weer weg, maar zit ik dus weer met een berichtje dat direct achter de H@ aansluit.

    Goed, stukje code:

    de CSS
    [code:1:8042f3a2f5]
    .caticon {
    float: left;
    margin: 0;
    margin-top: 5px;
    margin-right: 5px;
    }

    h2.messageheader {
    margin-top: 5px;
    font-size: 16px;
    font-weight: 900;
    color: #069;
    letter-spacing: 1px;
    float: left;
    }
    h2.messageheader:first-letter {
    font-size: 36px;
    color: #fc3;
    font-weight:bold ;
    text-transform: uppercase;
    }
    .messagebody {
    text-align: justify;
    clear: both;
    }
    [/code:1:8042f3a2f5]
    De 'caticon' is de stijl van het plaatje
    de 'messageheader' van de H2 titel.
    De first-letter heb ik er voor alle volledigheid even extra bij vermeld omdat ik niet weet of die in het hele verhaal meespeelt of niet.
    messagebody is de stijl van de tekst van het berichtje met de 'clear' er in.

    De (uiteindelijk door PHP geparste) html code is:
    [code:1:8042f3a2f5]
    <div class="caticon"><a href="http://www.denhaag-gilzerijen.nl/wordpress/?cat=12" title="Reis mijmeringen"><img border="0" src="http://www.denhaag-gilzerijen.nl/wordpress/wp-content/uploads/cat_mijmeringen.jpg" width="32" height="32" id="reis-mijmeringen" alt="Reis mijmeringen" title="Reis mijmeringen" /></a></div>
    <h2 class="messageheader">Semantiek</h2>
    <div id="post-20">
    <div class="messagebody">
    <p>enz.</p>
    <p>enz.</p>
    </div><!– end messagebody–>
    <div class="messagefooter">
    de Reiziger op maandag 12 mei 12:16 | <a href="http://www.denhaag-gilzerijen.nl/wordpress/?p=20#comments" title="Reactie op Semantiek">11 reacties</a></div><!– end messagefooter –>
    </div><!– end post-20 –>
    [/code:1:8042f3a2f5]

    Wellicht ben ik bij wijze van workaround ook geholpen met een alternatieve manier om plaatje en H2 op één regel te krijgen zonder een clear te hoeven grbruiken voor het berichtje. Want ik heb in dat kader ook nog een ander probleem met Opera, die beide elementen niet precies uitlijnt (Plaatje blijft hardnekkig iets hoger staan dan de H2) Met Firefox en IE gaat het wel goed.

    Voor wie een compleet overzicht wil:
    De website
    De code
    De stylesheet
  • Ik kan het probleem hier inderdaad repliceren met IE6, dus zal het probleem niet bij je eigen computer liggen.

    Vraagje: waarom wil je een plaatje vóór de h2 invoegen? In dit geval is het waarschijnlijk logischer om de afbeelding als niet-herhalende achtergrond van de h2 te zetten (tenzij de afbeelding een aparte link moet worden). De tekst kan je dan positioneren met margin/padding.

    Hopelijk helpt het bij het verwijderen van je spooktekst. ;)

    - Bas
  • Het plaatje is een link naar de categorie waartoe het betreffende berichtje behoort,(Het kan dus ook elke keer een ander plaatje zijn) daarom is het helaas niet mogelijk om hem als achtergrond te gebruiken.
    En er voor, tja, omdat ik dat nu eenmaal het mooiste vind :-)

    Ik heb nu ook geprobeert om een div om de afbeelding en de H2 samen heen te zetten, in de hoop dat ik dan geen clear meer hoefde te gebruiken voor het berichtje eronder. Maar helaas blijft het ding even hardnekkig aansluiten achter de H2.
  • Als ik btw de site bekijk in Firefox 3 Beta 5, en in navigeer naar reacties / reageer. Dan komt de textaera gedeeltelijk buiten je rechterkolom uit.
  • [quote:1af991f2d8="Bright"]Als ik btw de site bekijk in Firefox 3 Beta 5, en in navigeer naar reacties / reageer. Dan komt de textaera gedeeltelijk buiten je rechterkolom uit.[/quote:1af991f2d8]
    Klopt, dat is in elke browser zo, de site is nog niet af ;-)
  • Het was ook geen comentaar, maar meer een opmerking.
  • Je hoeft natuurlijk ook alleen het plaatje te laten floaten en niet de h2, die geef je een linker padding en negatieve linker margin ter grote van het plaatje, je kan ook beter een span om het plaatje zetten dan is dat ten minste geen block level elemen.
  • [quote:8afa0a8ecc="Drewster"]Je hoeft natuurlijk ook alleen het plaatje te laten floaten en niet de h2, die geef je een linker padding en negatieve linker margin ter grote van het plaatje, je kan ook beter een span om het plaatje zetten dan is dat ten minste geen block level elemen.[/quote:8afa0a8ecc]
    Kijk en zo ben ik dan toch weer een stuk verder.
    "Less is more" Hier een floatje weg, daar een cleartje d'r af, en het draait als een zonnetje ;-)
  • Ik ben er wederom tegenaan gelopen en dit keer zo te zien geen workaround mogelijk. Dus weer op zoek gegaan en er achter gekomen dat ik te maken heb met de IE6 peekaboo bug
    (Dit ter completering van de forum content ten behoeve van toekomstige wanhopigen)

Beantwoord deze vraag

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.