CSS-bugs en inconsistenties in Firefox 3.x

Er zijn niet veel artikelen over onverenigbaarheden of CSS-verschillen in Firefox alleen - en niet zonder reden.

Firefox heeft altijd uitstekend werk verricht door zowel CSS als JavaScript te ondersteunen op een manier die voldoet aan de standaarden zonder al te lastige bugs.

Er zijn echter enkele CSS-eigenschappen en selectors die niet worden ondersteund door een of meer van de versies die zijn uitgebracht sinds versie 3.0., Die ik hier zal behandelen.

Dit artikel behandelt bugs, inconsistenties en niet-ondersteuning . Dus als u problemen ondervindt met een CSS-eigenschap of selector in Firefox en deze staat hier niet vermeld, dan zult u waarschijnlijk uw lay-out opnieuw moeten bekijken en opnieuw moeten bekijken wat de boosdoener zou kunnen zijn.

Aangezien Firefox 2 virtueel is niet bestaand , Ik zal die versie niet specifiek overwegen, maar deze informatie is standaard standaard op die versie van toepassing.

En ik moet opmerken dat het materiaal voor deze post voornamelijk afkomstig was van de onlangs bijgewerkt SitePoint CSS-referentie , dat is de beste en meest uitgebreide CSS-referentie die overal beschikbaar is.

De Outline Overflow-bug

In Firefox 3.x, wanneer een element de rand van een ouder overschrijdt die de outline eigenschappenset, de omtrek zal uitrekken om te passen in het element dat het bevat, zoals weergegeven in de schermafdruk hieronder:

De juiste implementatie wordt weergegeven in de volgende schermopname uit Chrome:

Zoals hierboven is weergegeven, moet de omtrek het element omvatten dat wordt geschetst en mag dit niet worden beïnvloed door overlopende elementen. Om er zeker van te zijn dat er geen verwarring is, merk op dat dit een bug is bij de implementatie van de outline eigendom, niet het border eigendom.

Referentie: SitePoint CSS Reference: outline Property

Tafels met ingeklapte randen

In Firefox, wanneer een tabel is ingesteld op collapse de ... gebruiken border-collapse eigenschap, de bovenste en linkermarges van de tabel ten opzichte van nabije elementen is 1 pixel uit. Dit wordt weergegeven in een ingezoomd screenshot in de onderstaande afbeelding, die de onderrand van een element op blokniveau (rood) weergeeft dat de bovenrand van een samengevouwen tabel raakt (blauw):

Dit is de juiste implementatie van dit kenmerk / waarde-paar, zoals weergegeven in Chrome:

Zoals hierboven is weergegeven, omdat de randen zijn samengevouwen en omdat de tabel geen blokelement is, moet er een kleine verschuiving in de linkermarge zijn en moet de bovenrand gelijk zijn met de onderrand van het element erboven.

Referentie: SitePoint CSS Reference: border-collapse Property

Lege cellen in tabelrijen

Dit is een eigenschapswaarde die niet goed is geïmplementeerd door een browser, inclusief Firefox. Wanneer een tabelrij geen zichtbare inhoud heeft en alle cellen hun empty-cells eigenschap ingesteld op hide , de hele rij moet zich gedragen alsof deze is ingesteld op "display: none", zonder randen of achtergronden zichtbaar.

Geen enkele browser verwerkt dit correct, dus de tabelrij is nog steeds zichtbaar, zoals in de onderstaande afbeelding.

Referentie: SitePoint CSS Reference: lege cellen Eigenschap

Woordspreiding op inline elementen

In Firefox 3.x, een negatieve waarde op de word-spacing eigenschap wordt behandeld als nul op aangrenzende inline-elementen. De negatieve waarde moet ervoor zorgen dat de inline-elementen elkaar overlappen, zoals het geval zou zijn met tekst, maar dit gebeurt niet. In plaats daarvan krijgen de elementen slechts nul witruimtescheiding zonder overlap.

De afbeelding hieronder toont zowel de juiste als de incorrecte implementaties:

In de bovenstaande voorbeelden worden de drie woorden "Fruit", "Groenten" en "Andere voedingsmiddelen" afzonderlijk ingepakt elementen, terwijl de alinea die ze omsluit zijn zijn word-spacing eigenschap ingesteld op een negatieve waarde.

In het tweede voorbeeld (Firefox) kan de negatieve woordspatiëring niet worden toegepast, behalve tussen de laatste twee woorden, omdat die woorden niet individueel zijn ingepakt in spaties, maar natuurlijke tekstelementen zijn.

Als bijzaak komt deze bug op dezelfde manier voor in IE8, maar niet in eerdere versies van IE.

Referentie: SitePoint CSS Reference: property voor woordtussenruimten

Tekstdecoratie op drijvende afstammelingen

Wanneer een element een waarde voor tekstdecoratie heeft ingesteld, mag die waarde niet worden overgenomen door zwevende afstammelingen. In Firefox 3.x krijgen zwevende nakomelingen dezelfde tekstversieringswaarden als hun bovenliggende elementen, hoewel dit niet het geval zou moeten zijn.

In de afbeelding hierboven is de eerste regel een screenshot van IE8, met een element dreef in een anker. De tekst in de heeft geen zichtbare tekstdecoratie, wat de juiste manier is om het weer te geven. In Firefox (weergegeven in het tweede voorbeeld) wordt de tekstdecoratie onjuist toegepast op zwevend .

Mogelijk hebt u deze fout in Firefox opgemerkt bij het verwijderen van de tekstdecoratie uit zwevende afbeeldingen in ankers.

Referentie: SitePoint CSS Reference: text-decoration Eigenschap

pre-line & pre-wrap voor de eigenschap white-space in FF 3.0

De ... gebruiken white-space eigenschap in Firefox 3.5, kunt u opgeven of meerdere spaties moeten worden samengevouwen tot één spatie of niet. HTML-documenten vouwen standaard meerdere spaties samen tot één spatie. In sommige gevallen kunt u zich aanmelden white-space: pre om te voorkomen dat witte ruimte wordt samengevouwen, wat vergelijkbaar is met het gebruik van de

  HTML-tag.  Vervolgens wilt u misschien die instelling verwijderen met white-space:  pre-line  (om witte ruimte samen te vouwen). 
  Firefox 3.0 ondersteunt deze waarde niet, dus de witte ruimte wordt behouden.  Firefox 3.5 vouwt de ruimte correct in.  De onderstaande afbeelding toont beide voorbeelden: 
  Evenzo, wanneer een alinea van de tekst is ingesteld op white-space:  pre-wrap  , dit zou witte spaties moeten behouden tussen woorden, maar zou natuurlijk ook regeleinden moeten bevatten.  Firefox 3.0 kan dit niet correct implementeren, terwijl latere versies (en alle andere browsers) de natuurlijke regeleinden bevatten.  Beide voorbeelden worden hieronder getoond. 
  Houd er rekening mee dat het buitenste element wordt gegeven white-space: pre  terwijl een innerlijke   probeert het ontbreken van regeleinden te onderdrukken pre-wrap  .  Op zichzelf, pre-wrap  zou geen enkel effect hebben. 
  Firefox 3.x behandelt ook enkele van de white-space  waarden verschillend van andere browsers wanneer die waarden worden toegepast op de </code>  element.  Bijvoorbeeld, toepassen <code>white-space:  nowrap</code>  moet alle getypte tekst in een <code><textarea></code>  om een regel te vormen, maar Firefox 3.x doet dit niet. </p><p>  <strong>Referentie:</strong> <a href="http://reference.sitepoint.com/css/white-space" class=external rel=nofollow>SitePoint CSS Reference: white-space Property</a></p><ul></ul><p class=clearrow></p><h2>  Pagina-einde-eigenschappen </h2><p>  Met CSS kunnen ontwikkelaars opgeven waar pagina-einden wel of niet moeten plaatsvinden met behulp van de drie eigenschappen <code>page-break-before</code>  , <code>page-break-inside</code>  , en <code>page-break-after</code>  .  Opera is de enige browser die deze eigenschappen volledig ondersteunt, terwijl andere browsers gedeeltelijke ondersteuning of geen ondersteuning bieden. </p><p>  De <code>page-break-inside</code>  eigenschap geeft aan of een pagina-einde al dan niet mag plaatsvinden binnen een enkel element op blokniveau.  Firefox biedt geen ondersteuning voor deze eigenschap.  De syntaxis gebruiken <code>page-break-inside:  avoid</code>  , kunt u voorkomen dat een element tijdens het afdrukken wordt verdeeld.  De afbeelding hieronder, uit een afdrukvoorbeeld in Opera 10, laat zien hoe deze eigenschap kan voorkomen dat een ongeordende lijst over twee pagina's wordt verdeeld: </p><div class=article-large-block><img src="https://odwebdesign.net/uploads/c/d1/22/css-bugs-and-inconsistencies-in-firefox-3-x_10.gif" alt="" width=615 height=293 /></div><p>  Bekijk daarentegen de afbeelding hieronder, afkomstig van de afdrukvoorbeeldoptie in Firefox 3.5: </p><div class=article-large-block><img src="https://odwebdesign.net/uploads/9/18/ac/css-bugs-and-inconsistencies-in-firefox-3-x_11.gif" alt="" width=615 height=278 /></div><p>  <strong>Referentie:</strong> <a href="http://reference.sitepoint.com/css/pagedmedia" class=external rel=nofollow>SitePoint CSS Reference: Paged Media Properties</a></p><ul></ul><p class=clearrow></p><h2>  Wezen en weduwen op afdrukbare pagina's </h2><p>  De <code>orphans</code>  en <code>widows</code>  CSS-eigenschappen worden alleen ondersteund door Internet Explorer 8 en Opera sinds versie 9. Deze eigenschap wordt gebruikt om het minimumaantal regels van een enkele alinea op te geven dat op een afgedrukte pagina kan voorkomen, onderaan (wezen) of bovenaan (weduwen ).  Afhankelijk van het gekozen nummer, worden lijnen van de ene pagina naar de volgende (of vorige) verplaatst om te voorkomen dat een enkele regel bovenaan of onderaan een pagina wordt afgedrukt. </p><p>  Zelfs met de <code>orphans</code>  eigenschap ingesteld op een waarde van "3", zoals weergegeven in de onderstaande afbeelding, toont het afdrukvoorbeeld van Firefox een enkele regel onderaan een van de afdrukbare pagina's: </p><div class=article-large-block><img src="https://odwebdesign.net/uploads/e/d0/f4/css-bugs-and-inconsistencies-in-firefox-3-x_12.gif" alt="" width=615 height=162 /></div><p>  Vergelijkbaar met de <code>page-break-inside</code>  eigenschap, Firefox ondersteunt ook de waarden niet <code>avoid</code>  , <code>left</code>  , en <code>right</code>  voor zowel de <code>page-break-before</code>  en <code>page-break-after</code>  eigenschappen. </p><p>  <strong>Referenties:</strong> <a href="http://reference.sitepoint.com/css/orphans" class=external rel=nofollow>SitePoint CSS Referentie: wezen van wezen</a>  | <a href="http://reference.sitepoint.com/css/widows" class=external rel=nofollow>SitePoint CSS Reference: widows Property</a></p><ul></ul><p class=clearrow></p><h2>  De: first-line Pseudo-Element Bug </h2><p>  De <code>:first-line</code>  Met pseudo-element kan de eerste regel van een bepaald tekstblok een andere opmaak hebben dan de rest van de tekst.  De eerste regel van een alinea van de tekst kan bijvoorbeeld worden gewijzigd in hoofdletters of in een andere kleur.  Om dit CSS-element op een praktische manier te laten werken, zou het de mogelijkheid moeten bieden om geneste block-level elementen te gebruiken.  Bijvoorbeeld a <code><div></code>  element dat een bevat <code><p></code>  element zou het moeten toestaan <code>:first-line</code>  pseudo-element om de stijl van de eerste regel tekst in de <code><div></code>  .  In Firefox (en in veel andere browsers) is dit niet mogelijk, tenzij het pseudo-element specifiek de onderliggende alinea target. </p><p>  Internet Explorer 8, Chrome en Safari implementeren deze functie op de juiste manier, waardoor wordt voorkomen dat blokelementen de stijl gaan doorbreken, zoals weergegeven in de afbeelding hieronder: </p><div class=article-large-block><img src="https://odwebdesign.net/uploads/1/82/8f/css-bugs-and-inconsistencies-in-firefox-3-x_13.gif" alt="" width=615 height=249 /></div><p>  In de bovenstaande paragraaf staat de tekst in a <code><p></code>  element, dat zich in een a bevindt <code><div></code>  .  De <code><p></code>  heeft de <code>:first-line</code>  pseudo-element ingesteld op <code>color:  blue</code>  , wat niet lukt in Firefox vanwege het nesten van de alinea in de <code><div></code>  . </p><p>  <strong>Referentie:</strong> <a href="http://reference.sitepoint.com/css/pseudoelement-firstline" class=external rel=nofollow>SitePoint CSS-referentie: eerstelijns pseudo-element</a></p><ul></ul><p class=clearrow></p><h2>  CSS3-ondersteuning in Firefox 3.x </h2><p>  Firefox heeft geleidelijk betere ondersteuning voor CSS3 toegevoegd sinds de release van versie 3.0.  Hieronder volgt een beschrijving van de manier waarop Firefox omgaat met verschillende functies van CSS3.  Sommige hiervan kunnen nog steeds in de <a href="http://www.w3.org/Consortium/Process/Process-19991111/tr.html#RecsWD" class=external rel=nofollow>werkversie</a>  of <a href="http://www.w3.org/Consortium/Process/Process-19991111/tr.html#RecsCR" class=external rel=nofollow>kandidaat-aanbeveling</a>  stadium, daarom kunnen we niet dogmatisch zijn over wat wel en niet moet worden ondersteund voordat ze de <a href="http://www.w3.org/Consortium/Process/Process-19991111/tr.html#RecsW3C" class=external rel=nofollow>aanbeveling</a>  stadium. </p><ul><li>  Firefox 3.0 biedt geen ondersteuning voor de <code>text-shadow</code>  eigendom </li><li>  Firefox 3.x biedt geen ondersteuning voor de <code>box-shadow</code>  eigenschap, behalve bij gebruik van het prefix <code>-moz-</code></li><li>  Firefox 3.x biedt geen ondersteuning voor de <code>box-sizing</code>  eigenschap, behalve bij gebruik van het prefix <code>-moz-</code></li><li>  Firefox 3.x biedt geen ondersteuning voor meerdere kolommen tenzij het eigen prefix <code>-moz-</code>  is gebruikt </li><li>  Firefox 3.0 en 3.5 ondersteunen geen CSS3-gradiënten en meerdere achtergronden (beide zijn recent toegevoegd in 3.6) </li><li>  Firefox 3.0 biedt geen ondersteuning voor de <code>border-image</code>  eigenschap, maar 3.5 ondersteunt het met behulp van de <code>-moz-</code>  eigen prefix </li><li>  Firefox 3.0 biedt geen ondersteuning voor een aantal CSS3 pseudo-klassen (: n-de-kind,: n-de-laatste-kind,: n-de-type, etc.) </li><li>  Firefox 3.0 ondersteunt geen CSS-transformaties </li><li>  Firefox 3.x biedt geen ondersteuning voor CSS-overgangen </li><li>  Firefox 3.x biedt geen ondersteuning voor CSS-animaties </li></ul><p class=clearrow></p><h2>  Andere CSS-functies worden niet ondersteund </h2><p>  Enkele van de meer significante bugs en incompatibiliteiten zijn hierboven besproken, maar er zijn een paar andere vermeldenswaard. </p><ul><li>  Firefox tot versie 3.5 ondersteunt de waarde niet <code>run-in</code>  voor de <code>display</code>  eigendom </li><li>  Firefox biedt geen ondersteuning voor de <code>::selection</code>  pseudo-element </li><li>  De @page-at-rule wordt niet ondersteund door Firefox </li><li>  De @ font-face at-rule wordt niet ondersteund door Firefox 3.0 </li></ul><p class=clearrow></p><h2>  Conclusie </h2><p>  Nadat je dit materiaal hebt doorgenomen, kun je duidelijk zien dat het <strong>gebrek aan ondersteuning van CSS-functies in Firefox minimaal is en in veel gevallen vrij irrelevant</strong> omdat veel van de eigenschappen die hier worden besproken, niet vaak worden gebruikt. </p><p>  Desalniettemin hoop ik dat dit een goede referentie zal zijn voor de belangrijkste bugs en inconsistenties in Firefox.  Als u problemen ondervindt met een bepaalde functie van CSS in Firefox die hier niet wordt vermeld, is de kans groot dat u iets verkeerd doet of bepaalde CSS-concepten en -principes misschien niet volledig begrijpt. </p><p>  Dus in dat opzicht zou deze verwijzing goed <strong>moeten werken als een omgekeerde referentie</strong> , omdat degenen die hier niet worden vermeld betrouwbaar kunnen werken als ze correct met de juiste syntaxis zijn geïmplementeerd. </p><p>  Natuurlijk, als er iets is dat ik heb gemist, of fouten, reageer dan alsjeblieft en ik zal mijn best doen om de nodige correcties en toevoegingen aan te brengen. </p><p class=clearrow></p><h2>  Verdere referenties </h2><ul class=tight_list><li><a href="https://developer.mozilla.org/En/CSS_improvements_in_Firefox_3" class=external rel=nofollow>CSS-verbeteringen in Firefox 3</a></li><li><a href="https://developer.mozilla.org/En/Firefox_3.5_for_developers#Newly-supported_CSS_features" class=external rel=nofollow>Nieuw ondersteunde CSS-functies in Firefox 3.5</a></li></ul><p><br class=spacer_ /></p><p>  <em>Firefox-afbeelding geleverd door</em> <em><a rel=nofollow href="http://rakaz.nl/2004/10/firefox-wallpapers.html" class=external></em>  <em>Rakaz</em></a> <em><br class=spacer_ /></em> </p><p>  <em>Dit bericht is exclusief geschreven voor Webdesigner Depot door Louis Lazaris, een freelance schrijver en webontwikkelaar.</em>  <em>Louis rent</em> <em><a rel=nofollow href="http://www.impressivewebs.com/" class=external></em>  <em>Indrukwekkende webs</em></a>  <em>waar hij artikelen en tutorials over webdesign plaatst.</em>  <em>Je kunt Louis volgen</em> <em><a rel=nofollow href="http://twitter.com/ImpressiveWebs" class=external></em>  <em>op Twitter</em></a>  <em>of neem contact op met hem</em> <em><a rel=nofollow href="http://www.impressivewebs.com/contact" class=external></em>  <em>via zijn website</em></a>  <em>.</em> </p><p><br class=spacer_ /></p>


        <div class="bootstrap-tagsinput">
                        <span class="tag label label-info"><a href="https://nl.odwebdesign.net/tag/css/">css</a> </span>
                        <span class="tag label label-info"><a href="https://nl.odwebdesign.net/tag/firefox/">firefox</a> </span>
                        <span class="tag label label-info"><a href="https://nl.odwebdesign.net/tag/bugs/">bugs</a> </span>
                        <span class="tag label label-info"><a href="https://nl.odwebdesign.net/tag/css-bugs/">CSS-bugs</a> </span>
                        <span class="tag label label-info"><a href="https://nl.odwebdesign.net/tag/firefox-3/">firefox 3</a> </span>
                        <span class="tag label label-info"><a href="https://nl.odwebdesign.net/tag/firefox-fouten/">firefox fouten</a> </span>
                        <span class="tag label label-info"><a href="https://nl.odwebdesign.net/tag/inconsitencies/">inconsitencies</a> </span>
                    </div>
    </div>
</div>
<div class="row">
    <div class="col-md-12">
        <ul class="pager">
            
            <li class="previous"><a href="https://nl.odwebdesign.net/fight-div-itis-and-class-itis-with-the-960-grid-system/">← Bestrijd Div-Itis en Class-Itis met het 960-rastersysteem</a></li>            
            <li class="next"><a href="https://nl.odwebdesign.net/wordpress-vs-expressionengine-apples-and-oranges/">WordPress Vs.  ExpressionEngine: appels en sinaasappels? →</a></li>        </ul>
    </div>
</div>



                                                                
            </div>
                <div class="col-md-3">
                                        <aside class="col-lg-12 side-bar col-md-12">
    <ul class="nav nav-tabs">
        <li class="active"> <a data-toggle="tab" href="#latest" role="tab">Recent</a> </li>
        <li> <a data-toggle="tab" href="#popular" role="tab">De beste</a> </li>
    </ul>

    <!-- Tab panes -->
    <div class="tab-content sidebar-tabing" id="nav-tabContent">
        <div class="tab-pane active" id="latest" role="tabpanel">
            
                        <div class="media"> <a href="https://nl.odwebdesign.net/the-harsh-truth-about-html5s-structural-semantics-part-3/"> <img class="pull-left" style="margin-top: 10px; margin-left: 3px" src="https://odwebdesign.net/uploads//titles/9/bf/d9/the-harsh-truth-about-html5s-structural-semantics-part-3_ors.jpg" alt=""></a>
                <div class="media-body">
                    <div class="title-small-sidebar">
                        <a href="https://nl.odwebdesign.net/the-harsh-truth-about-html5s-structural-semantics-part-3/">The Harsh Truth About HTML5's Structural Semantics (Part 3)</a>
                    </div>
                </div>
            </div>
                        <div class="media"> <a href="https://nl.odwebdesign.net/how-to-use-any-font-you-like-with-css3/"> <img class="pull-left" style="margin-top: 10px; margin-left: 3px" src="https://odwebdesign.net/uploads//titles/e/3e/94/how-to-use-any-font-you-like-with-css3_ors.jpg" alt=""></a>
                <div class="media-body">
                    <div class="title-small-sidebar">
                        <a href="https://nl.odwebdesign.net/how-to-use-any-font-you-like-with-css3/">Hoe u elk lettertype dat u leuk vindt met CSS3 kunt gebruiken</a>
                    </div>
                </div>
            </div>
                        <div class="media"> <a href="https://nl.odwebdesign.net/the-harsh-truth-about-html5s-structural-semantics-part-2/"> <img class="pull-left" style="margin-top: 10px; margin-left: 3px" src="https://odwebdesign.net/uploads//titles/b/37/4b/the-harsh-truth-about-html5s-structural-semantics-part-2_ors.jpg" alt=""></a>
                <div class="media-body">
                    <div class="title-small-sidebar">
                        <a href="https://nl.odwebdesign.net/the-harsh-truth-about-html5s-structural-semantics-part-2/">The Harsh Truth About HTML5's Structural Semantics (Part 2)</a>
                    </div>
                </div>
            </div>
                        <div class="media"> <a href="https://nl.odwebdesign.net/the-harsh-truth-about-html5s-structural-semantics-part-1/"> <img class="pull-left" style="margin-top: 10px; margin-left: 3px" src="https://odwebdesign.net/uploads//titles/a/a4/a1/the-harsh-truth-about-html5s-structural-semantics-part-1_ors.jpg" alt=""></a>
                <div class="media-body">
                    <div class="title-small-sidebar">
                        <a href="https://nl.odwebdesign.net/the-harsh-truth-about-html5s-structural-semantics-part-1/">The Harsh Truth About HTML5's Structural Semantics (Part 1)</a>
                    </div>
                </div>
            </div>
                    </div>
        <div class="tab-pane" id="popular" role="tabpanel">
            
                            <div class="media"> <a href="https://nl.odwebdesign.net/200-free-exclusive-vector-icons-primo/"> <img class="pull-left" src="https://odwebdesign.net/uploads//titles/d/d9/64/200-free-exclusive-vector-icons-primo_ors.jpg" alt=""></a>
                    <div class="media-body">
                        <div class="title-small-sidebar">
                            <a href="https://nl.odwebdesign.net/200-free-exclusive-vector-icons-primo/">200+ gratis exclusieve vectorpictogrammen: 'Primo'</a>
                        </div>
                    </div>
                </div>
                            <div class="media"> <a href="https://nl.odwebdesign.net/30-handy-cheat-sheets-and-reference-guides-for-web-professionals/"> <img class="pull-left" src="https://odwebdesign.net/uploads//noima.jpg" alt=""></a>
                    <div class="media-body">
                        <div class="title-small-sidebar">
                            <a href="https://nl.odwebdesign.net/30-handy-cheat-sheets-and-reference-guides-for-web-professionals/">30 handige cheat sheets en referentiehandleidingen voor webprofessionals</a>
                        </div>
                    </div>
                </div>
                            <div class="media"> <a href="https://nl.odwebdesign.net/5-pet-peeves-developers-have-with-designers-and-how-to-avoid-them/"> <img class="pull-left" src="https://odwebdesign.net/uploads//noima.jpg" alt=""></a>
                    <div class="media-body">
                        <div class="title-small-sidebar">
                            <a href="https://nl.odwebdesign.net/5-pet-peeves-developers-have-with-designers-and-how-to-avoid-them/">5 Pet Peeves-ontwikkelaars hebben ontwerpers (en hoe ze te vermijden)</a>
                        </div>
                    </div>
                </div>
                            <div class="media"> <a href="https://nl.odwebdesign.net/40-great-adobe-air-applications-for-designers-and-developers/"> <img class="pull-left" src="https://odwebdesign.net/uploads//noima.jpg" alt=""></a>
                    <div class="media-body">
                        <div class="title-small-sidebar">
                            <a href="https://nl.odwebdesign.net/40-great-adobe-air-applications-for-designers-and-developers/">40 Fantastische Adobe AIR-toepassingen voor ontwerpers en ontwikkelaars</a>
                        </div>
                    </div>
                </div>
                    </div>
    </div>
</aside>
    
                                        
                                    </div>

            
        </div>
                <footer class="footer-bs">
            <div class="row">
                <div class="col-md-3 footer-brand animated fadeInLeft">
                    <img src="https://nl.odwebdesign.net/img/logo1n.png">
                                                        </div>


                <div class="col-md-9 footer-nav animated fadeInRight">
                    <ul class="list">
                        <li><a href="https://nl.odwebdesign.net/category/freebies/">freebies</a></li>
                        <li><a href="https://nl.odwebdesign.net/category/interactive-design/">Interactief ontwerp</a></li>
                        <li><a href="https://nl.odwebdesign.net/contact_us/">Neem contact met ons op</a> </li>
                    </ul>
                    <br>
                    <h4>OdWebDesign.Net</h4>
                </div>
            </div>

            
                <!-- Piwik -->
                <script type="text/javascript">
                    var _paq = _paq || [];
                    /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
                    _paq.push(['trackPageView']);
                    _paq.push(['enableLinkTracking']);
                    (function() {
                        var u="//odwebdesign.net/";
                        _paq.push(["setTrackerUrl", u+"piwik.php"]);
                        _paq.push(["setSiteId", "470"]);
                        var d=document, g=d.createElement("script"), s=d.getElementsByTagName("script")[0];
                        g.type="text/javascript"; g.async=true; g.defer=true; g.src=u+"piwik.php"; s.parentNode.insertBefore(g,s);
                    })();
                </script>
                <!-- End Piwik Code -->
            

        </footer>
    </div><!-- /.container -->

      
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="/dist/js/bootstrap.min.js"></script>
  </body>
</html>