Bug e incongruenze CSS in Firefox 3.x

Non ci sono molti articoli che trattano le incompatibilità, o le differenze CSS in Firefox da solo - e per una buona ragione.

Firefox ha sempre svolto un ottimo lavoro nel supportare sia CSS che JavaScript in un modo conforme agli standard senza troppi bug scomodi.

Esistono, tuttavia, alcune proprietà e selettori CSS che non sono supportati da una o più versioni rilasciate dalla versione 3.0, che illustrerò qui.

Questo articolo riguarderà bug, incoerenze e non supporto . Quindi, se hai problemi con una proprietà CSS o un selettore in Firefox e non è elencato qui, allora probabilmente dovrai ripensare il tuo layout e riconsiderare quale potrebbe essere il colpevole.

Dal momento che Firefox 2 è virtualmente inesistente , Non prenderò in considerazione tale versione in modo specifico, ma queste informazioni si applicano generalmente a tale versione per impostazione predefinita.

E dovrei notare che il materiale per questo post è stato preso principalmente dal recentemente aggiornato SitePoint Riferimento CSS , che rappresenta il riferimento CSS migliore e più completo disponibile ovunque.

Il bug di overflow di contorno

In Firefox 3.x, quando un elemento trabocca il bordo di un genitore che ha il outline proprietà impostata, la struttura si allungherà per adattarsi all'elemento che la contiene, come mostrato nella schermata seguente:

La corretta implementazione è mostrata nella prossima schermata catturata da Chrome:

Come mostrato sopra, lo schema dovrebbe comprendere l'elemento che viene delineato e non dovrebbe essere influenzato da alcun elemento traboccante. Per garantire che non ci sia confusione, si noti che questo è un bug nell'implementazione di outline proprietà, non il border proprietà.

Riferimento: Riferimento CSS SitePoint: struttura Proprietà

Tabelle con bordi compressi

In Firefox, quando una tabella ha i suoi bordi impostati su collapse usando il border-collapse proprietà, i margini superiore e sinistro della tabella in relazione agli elementi vicini sono 1 pixel off. Questo è mostrato in uno screenshot ingrandito nell'immagine sottostante, che mostra il bordo inferiore di un elemento a livello di blocco (rosso) che tocca il bordo superiore di una tabella compressa (blu):

Ecco l'implementazione corretta di questa coppia proprietà / valore, come mostrato in Chrome:

Come mostrato sopra, poiché i bordi sono "collassati" e poiché la tabella non è un elemento di blocco, dovrebbe esserci un lieve sfalsamento nel margine sinistro e il margine superiore dovrebbe essere pari con il bordo inferiore dell'elemento sopra di esso.

Riferimento: Riferimento CSS SitePoint: proprietà border-collapse

Celle vuote nelle file della tabella

Questo è un valore di proprietà che non è implementato correttamente da nessun browser, incluso Firefox. Quando una riga della tabella non ha contenuti visibili e tutte le sue celle hanno il loro empty-cells proprietà impostata su hide , l'intera riga dovrebbe comportarsi come se fosse impostata su "display: none", senza bordi o sfondi visibili.

Nessun browser lo gestisce correttamente, quindi la riga della tabella è ancora visibile, come mostrato nell'immagine seguente.

Riferimento: Riferimento CSS SitePoint: proprietà empty-cells

Word Spaces on Inline Elements

In Firefox 3.x, un valore negativo su word-spacing la proprietà verrà considerata come zero sugli elementi in linea adiacenti. Il valore negativo dovrebbe far sì che gli elementi in linea si sovrappongano l'un l'altro, come nel caso del testo, ma ciò non accade. Invece, agli elementi viene assegnata una separazione dello spazio bianco pari a zero senza sovrapposizioni.

L'immagine sotto mostra sia le implementazioni corrette che quelle errate:

Negli esempi mostrati sopra, le tre parole "Frutta", "Verdura" e "Altri cibi" sono confezionate singolarmente elementi, mentre il paragrafo che li avvolge ha il suo word-spacing proprietà impostata su un valore negativo.

Il secondo esempio (Firefox) non riesce ad applicare la spaziatura tra parole negative, tranne tra le ultime due parole, perché quelle parole non sono singolarmente avvolte da span ma sono elementi di testo naturali.

Come punto laterale, questo errore si verifica in modo simile in IE8, ma non nelle versioni precedenti di IE.

Riferimento: Riferimento CSS SitePoint: proprietà word-spacing

Decorazione del testo su discendenti galleggianti

Quando un elemento ha un valore di decorazione del testo impostato, tale valore non deve essere ereditato dai discendenti fluttuanti. In Firefox 3.x, i discendenti flottanti hanno gli stessi valori di decorazione del testo dei loro genitori, anche se questo non dovrebbe essere il caso.

Nell'immagine sopra, la prima riga è uno screenshot di IE8, che mostra a elemento galleggiato all'interno di un'ancora. Il testo all'interno del non ha una decorazione di testo visibile, che è il modo corretto per visualizzarlo. In Firefox (mostrato nel secondo esempio), la decorazione del testo viene applicata in modo non corretto al floating .

Potresti aver notato questo bug in Firefox quando provi a rimuovere la decorazione del testo dalle immagini fluttuanti all'interno delle ancore.

Riferimento: Riferimento CSS SitePoint: proprietà di decorazione del testo

pre-line e pre-wrap per la proprietà white-space in FF 3.0

Usando il white-space proprietà in Firefox 3.5, è possibile specificare se più caratteri spazio devono essere compressi in un singolo spazio o meno. Per impostazione predefinita, i documenti HTML comprimono più spazi in un unico spazio. In alcuni casi, puoi applicare white-space: pre per evitare che lo spazio bianco venga collassato, che è simile all'uso di

  Tag HTML.  Successivamente, potresti voler rimuovere quell'impostazione usando white-space:  pre-line  (per collassare lo spazio bianco). 
  Firefox 3.0 non supporta questo valore, quindi lo spazio vuoto verrà mantenuto.  Firefox 3.5 comprime correttamente lo spazio.  L'immagine sotto mostra entrambi gli esempi: 
  Allo stesso modo, quando un paragrafo di testo è impostato su white-space:  pre-wrap  , questo dovrebbe mantenere spazi bianchi tra le parole, ma dovrebbe naturalmente includere interruzioni di riga.  Firefox 3.0 non riesce a implementarlo correttamente, mentre le versioni successive (e tutti gli altri browser) includono le interruzioni di riga naturali.  Entrambi gli esempi sono mostrati di seguito. 
  Tieni presente che l'elemento esterno è dato white-space: pre  mentre un interno   sta tentando di ignorare la mancanza di interruzioni di riga usando pre-wrap  .  Da solo, pre-wrap  non avrebbe alcun effetto 
  Firefox 3.x tratta anche alcuni dei white-space  valori diversi dagli altri browser quando tali valori sono applicati a </code>  elemento.  Ad esempio, applicando <code>white-space:  nowrap</code>  dovrebbe causare tutto il testo digitato in a <code><textarea></code>  per formare una riga, ma Firefox 3.x non lo fa. </p><p>  <strong>Riferimento:</strong> <a href="http://reference.sitepoint.com/css/white-space" class=external rel=nofollow>Riferimento CSS SitePoint: proprietà white-space</a></p><ul></ul><p class=clearrow></p><h2>  Proprietà di interruzione di pagina </h2><p>  Il CSS consente agli sviluppatori di specificare dove dovrebbero o non dovrebbero avvenire le interruzioni di pagina usando le tre proprietà <code>page-break-before</code>  , <code>page-break-inside</code>  , e <code>page-break-after</code>  .  Opera è l'unico browser che supporta pienamente queste proprietà, mentre altri browser offrono supporto parziale o nessun supporto. </p><p>  Il <code>page-break-inside</code>  proprietà specifica se può verificarsi un'interruzione di pagina all'interno di un singolo elemento a livello di blocco.  Firefox non fornisce supporto per questa proprietà.  Usando la sintassi <code>page-break-inside:  avoid</code>  , puoi evitare che un elemento venga diviso durante la stampa.  L'immagine sotto, da un'anteprima di stampa in Opera 10, mostra come questa proprietà può impedire che una lista non ordinata venga suddivisa su due pagine: </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>  Al contrario, guarda l'immagine qui sotto, presa dall'opzione di anteprima di stampa 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>Riferimento:</strong> <a href="http://reference.sitepoint.com/css/pagedmedia" class=external rel=nofollow>Riferimento CSS SitePoint: proprietà dei supporti di paging</a></p><ul></ul><p class=clearrow></p><h2>  Orfani e vedove su pagine stampabili </h2><p>  Il <code>orphans</code>  e <code>widows</code>  Le proprietà CSS sono supportate solo da Internet Explorer 8 e Opera dalla versione 9. Questa proprietà viene utilizzata per specificare il numero minimo di righe da un singolo paragrafo che possono verificarsi su una pagina stampata, nella parte inferiore (orfani) o in quella superiore (vedove ).  A seconda del numero scelto, le linee verranno spostate da una pagina all'altra (o precedente) per evitare che una singola riga venga stampata nella parte superiore o inferiore di una pagina. </p><p>  Anche con il <code>orphans</code>  proprietà impostata su un valore di "3", come mostrato nell'immagine sottostante, l'anteprima di stampa di Firefox mostra una singola riga in fondo a una delle pagine stampabili: </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>  Simile al <code>page-break-inside</code>  proprietà, Firefox non riesce a supportare i valori <code>avoid</code>  , <code>left</code>  , e <code>right</code>  per entrambi <code>page-break-before</code>  e <code>page-break-after</code>  proprietà. </p><p>  <strong>Riferimenti:</strong> <a href="http://reference.sitepoint.com/css/orphans" class=external rel=nofollow>Riferimento CSS SitePoint: proprietà orfani</a>  | <a href="http://reference.sitepoint.com/css/widows" class=external rel=nofollow>Riferimento CSS di SitePoint: proprietà di vedove</a></p><ul></ul><p class=clearrow></p><h2>  The: Pseudo-Element Bug di prima linea </h2><p>  Il <code>:first-line</code>  lo pseudo-elemento consente alla prima riga di un determinato blocco di testo di avere una formattazione diversa dal resto del testo.  Ad esempio, la prima riga di un paragrafo di testo può essere modificata in maiuscolo o in un altro colore.  Affinché questo elemento CSS funzioni in modo pratico, dovrebbe consentire la possibilità di elementi nidificati a livello di blocco.  Ad esempio, a <code><div></code>  elemento che contiene a <code><p></code>  elemento dovrebbe consentire <code>:first-line</code>  pseudo-elemento per cambiare lo stile della prima riga di testo all'interno del <code><div></code>  .  In Firefox (e in molti altri browser), questo non è possibile a meno che lo pseudo-elemento non miri specificamente al paragrafo figlio. </p><p>  Internet Explorer 8, Chrome e Safari implementano correttamente questa funzionalità, impedendo che il nidificazione degli elementi del blocco rotti lo stile, come mostrato nell'immagine seguente: </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>  Nel paragrafo precedente, il testo è all'interno di a <code><p></code>  elemento, che risiede all'interno di a <code><div></code>  .  Il <code><p></code>  ha il <code>:first-line</code>  pseudo-elemento impostato su <code>color:  blue</code>  , che non riesce in Firefox a causa del nidificazione del paragrafo all'interno del <code><div></code>  . </p><p>  <strong>Riferimento:</strong> <a href="http://reference.sitepoint.com/css/pseudoelement-firstline" class=external rel=nofollow>Riferimento CSS SitePoint: Pseudo-Element di prima linea</a></p><ul></ul><p class=clearrow></p><h2>  Supporto CSS3 in Firefox 3.x </h2><p>  Firefox ha gradualmente aggiunto un migliore supporto per CSS3 dal rilascio della versione 3.0.  Di seguito è riportata una descrizione di come Firefox gestisce le diverse funzionalità di CSS3.  Alcuni di questi potrebbero ancora essere nel <a href="http://www.w3.org/Consortium/Process/Process-19991111/tr.html#RecsWD" class=external rel=nofollow>bozza di lavoro</a>  o <a href="http://www.w3.org/Consortium/Process/Process-19991111/tr.html#RecsCR" class=external rel=nofollow>raccomandazione del candidato</a>  stadio, quindi non possiamo essere dogmatici su ciò che dovrebbe e non dovrebbe essere supportato fino a quando non hanno raggiunto il <a href="http://www.w3.org/Consortium/Process/Process-19991111/tr.html#RecsW3C" class=external rel=nofollow>raccomandazione</a>  palcoscenico. </p><ul><li>  Firefox 3.0 non supporta il <code>text-shadow</code>  proprietà </li><li>  Firefox 3.x non supporta il <code>box-shadow</code>  proprietà, tranne quando si utilizza il prefisso proprietario <code>-moz-</code></li><li>  Firefox 3.x non supporta il <code>box-sizing</code>  proprietà, tranne quando si utilizza il prefisso proprietario <code>-moz-</code></li><li>  Firefox 3.x non supporta più colonne a meno che non sia il prefisso proprietario <code>-moz-</code>  si usa </li><li>  Firefox 3.0 e 3.5 non supportano i gradienti CSS3 e sfondi multipli (entrambi sono stati recentemente aggiunti in 3.6) </li><li>  Firefox 3.0 non supporta il <code>border-image</code>  proprietà, ma 3.5 lo supporta usando <code>-moz-</code>  prefisso proprietario </li><li>  Firefox 3.0 non supporta un numero di pseudo-classi CSS3 (: nth-child,: nth-last-child,: nth-of-type, ecc.) </li><li>  Firefox 3.0 non supporta le trasformazioni CSS </li><li>  Firefox 3.x non supporta le transizioni CSS </li><li>  Firefox 3.x non supporta le animazioni CSS </li></ul><p class=clearrow></p><h2>  Altre funzionalità CSS non supportate </h2><p>  Alcuni dei bachi e delle incompatibilità più significativi sono stati discussi sopra, ma ce ne sono altri che vale la pena notare. </p><ul><li>  Firefox fino alla versione 3.5 non supporta il valore <code>run-in</code>  per il <code>display</code>  proprietà </li><li>  Firefox non supporta il <code>::selection</code>  pseudo-elemento </li><li>  La @page at-rule non è supportata da Firefox </li><li>  @ Font-face at-rule non è supportato da Firefox 3.0 </li></ul><p class=clearrow></p><h2>  Conclusione </h2><p>  Dopo aver esaminato questo materiale, è possibile vedere chiaramente che la <strong>mancanza di supporto delle funzionalità CSS in Firefox è minima e in molti casi del tutto irrilevante</strong> poiché molte delle proprietà qui discusse non sono molto usate. </p><p>  Ciò nonostante, spero che questo fornisca un riferimento decente per i bug e le incongruenze più significative in Firefox.  Se hai problemi con una particolare caratteristica di CSS in Firefox che non è elencata qui, è probabile che stai facendo qualcosa di sbagliato o che potresti non comprendere appieno determinati concetti e principi CSS. </p><p>  Quindi, a tale riguardo, questo riferimento <strong>dovrebbe funzionare bene come riferimento inverso</strong> , dal momento che quelli non elencati qui possono essere considerati affidabili se funzionano correttamente con una sintassi corretta. </p><p>  Naturalmente, se c'è qualcosa che ho perso, o eventuali errori, per favore commenta e farò del mio meglio per apportare eventuali correzioni e aggiunte. </p><p class=clearrow></p><h2>  Ulteriori riferimenti </h2><ul class=tight_list><li><a href="https://developer.mozilla.org/En/CSS_improvements_in_Firefox_3" class=external rel=nofollow>Miglioramenti CSS 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>Funzionalità CSS appena supportate in Firefox 3.5</a></li></ul><p><br class=spacer_ /></p><p>  <em>Immagine di Firefox fornita da</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>Questo post è stato scritto esclusivamente per Webdesigner Depot da Louis Lazaris, scrittore freelance e sviluppatore web.</em>  <em>Louis corre</em> <em><a rel=nofollow href="http://www.impressivewebs.com/" class=external></em>  <em>Web impressionanti</em></a>  <em>dove pubblica articoli e tutorial sul web design.</em>  <em>Puoi seguire Louis</em> <em><a rel=nofollow href="http://twitter.com/ImpressiveWebs" class=external></em>  <em>su Twitter</em></a>  <em>o mettiti in contatto con lui</em> <em><a rel=nofollow href="http://www.impressivewebs.com/contact" class=external></em>  <em>attraverso il suo sito web</em></a>  <em>.</em> </p><p><br class=spacer_ /></p>


        <div class="bootstrap-tagsinput">
                        <span class="tag label label-info"><a href="https://it.odwebdesign.net/tag/css/">css</a> </span>
                        <span class="tag label label-info"><a href="https://it.odwebdesign.net/tag/firefox/">firefox</a> </span>
                        <span class="tag label label-info"><a href="https://it.odwebdesign.net/tag/bug/">bug</a> </span>
                        <span class="tag label label-info"><a href="https://it.odwebdesign.net/tag/bugs-css/">bugs css</a> </span>
                        <span class="tag label label-info"><a href="https://it.odwebdesign.net/tag/firefox-3/">firefox 3</a> </span>
                        <span class="tag label label-info"><a href="https://it.odwebdesign.net/tag/errori-di-firefox/">errori di firefox</a> </span>
                        <span class="tag label label-info"><a href="https://it.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://it.odwebdesign.net/fight-div-itis-and-class-itis-with-the-960-grid-system/">← Combatti con Div-Itis e Classe-Itis con il sistema Grid 960</a></li>            
            <li class="next"><a href="https://it.odwebdesign.net/wordpress-vs-expressionengine-apples-and-oranges/">WordPress vs.  ExpressionEngine: mele e arance? →</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">Recente</a> </li>
        <li> <a data-toggle="tab" href="#popular" role="tab">Il migliore</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://it.odwebdesign.net/introducing-css-new-font-display-property/"> <img class="pull-left" style="margin-top: 10px; margin-left: 3px" src="https://odwebdesign.net/uploads//titles/2/31/d3/introducing-css-new-font-display-property_ors.jpg" alt=""></a>
                <div class="media-body">
                    <div class="title-small-sidebar">
                        <a href="https://it.odwebdesign.net/introducing-css-new-font-display-property/">Presentazione della nuova proprietà Font-Display CSS</a>
                    </div>
                </div>
            </div>
                        <div class="media"> <a href="https://it.odwebdesign.net/4-cutting-edge-technologies-to-speed-up-your-sites/"> <img class="pull-left" style="margin-top: 10px; margin-left: 3px" src="https://odwebdesign.net/uploads//titles/4/97/81/4-cutting-edge-technologies-to-speed-up-your-sites_ors.jpg" alt=""></a>
                <div class="media-body">
                    <div class="title-small-sidebar">
                        <a href="https://it.odwebdesign.net/4-cutting-edge-technologies-to-speed-up-your-sites/">4 tecnologie all'avanguardia per velocizzare i tuoi siti</a>
                    </div>
                </div>
            </div>
                        <div class="media"> <a href="https://it.odwebdesign.net/9-reasons-hand-coding-always-beats-site-builders/"> <img class="pull-left" style="margin-top: 10px; margin-left: 3px" src="https://odwebdesign.net/uploads//titles/d/6b/ed/9-reasons-hand-coding-always-beats-site-builders_ors.jpg" alt=""></a>
                <div class="media-body">
                    <div class="title-small-sidebar">
                        <a href="https://it.odwebdesign.net/9-reasons-hand-coding-always-beats-site-builders/">9 Reasons Hand-Coding batte sempre i costruttori del sito</a>
                    </div>
                </div>
            </div>
                        <div class="media"> <a href="https://it.odwebdesign.net/zurb-launches-new-mention-engine-tribute-js/"> <img class="pull-left" style="margin-top: 10px; margin-left: 3px" src="https://odwebdesign.net/uploads//titles/b/1d/1a/zurb-launches-new-mention-engine-tribute-js_ors.jpg" alt=""></a>
                <div class="media-body">
                    <div class="title-small-sidebar">
                        <a href="https://it.odwebdesign.net/zurb-launches-new-mention-engine-tribute-js/">Zurb lancia il nuovo @Mention Engine, Tribute.Js</a>
                    </div>
                </div>
            </div>
                    </div>
        <div class="tab-pane" id="popular" role="tabpanel">
            
                            <div class="media"> <a href="https://it.odwebdesign.net/why-html5-is-more-semantic/"> <img class="pull-left" src="https://odwebdesign.net/uploads//titles/6/62/de/why-html5-is-more-semantic_ors.jpg" alt=""></a>
                    <div class="media-body">
                        <div class="title-small-sidebar">
                            <a href="https://it.odwebdesign.net/why-html5-is-more-semantic/">Perché HTML5 è più semantico</a>
                        </div>
                    </div>
                </div>
                            <div class="media"> <a href="https://it.odwebdesign.net/how-to-make-an-animated-thumbnail/"> <img class="pull-left" src="https://odwebdesign.net/uploads//titles/5/8d/96/how-to-make-an-animated-thumbnail_ors.jpg" alt=""></a>
                    <div class="media-body">
                        <div class="title-small-sidebar">
                            <a href="https://it.odwebdesign.net/how-to-make-an-animated-thumbnail/">Come creare una miniatura animata</a>
                        </div>
                    </div>
                </div>
                            <div class="media"> <a href="https://it.odwebdesign.net/how-to-use-the-css3-transition-property/"> <img class="pull-left" src="https://odwebdesign.net/uploads//titles/5/4b/7e/how-to-use-the-css3-transition-property_ors.jpg" alt=""></a>
                    <div class="media-body">
                        <div class="title-small-sidebar">
                            <a href="https://it.odwebdesign.net/how-to-use-the-css3-transition-property/">Come utilizzare la proprietà di transizione CSS3</a>
                        </div>
                    </div>
                </div>
                            <div class="media"> <a href="https://it.odwebdesign.net/how-to-harness-yahoos-weather-api/"> <img class="pull-left" src="https://odwebdesign.net/uploads//titles/a/04/a9/how-to-harness-yahoos-weather-api_ors.jpg" alt=""></a>
                    <div class="media-body">
                        <div class="title-small-sidebar">
                            <a href="https://it.odwebdesign.net/how-to-harness-yahoos-weather-api/">Come sfruttare le API meteo di Yahoo !.</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://it.odwebdesign.net/img/logo1n.png">
                                                        </div>


                <div class="col-md-9 footer-nav animated fadeInRight">
                    <ul class="list">
                        <li><a href="https://it.odwebdesign.net/category/freebies/">omaggi</a></li>
                        <li><a href="https://it.odwebdesign.net/category/interactive-design/">Design interattivo</a></li>
                        <li><a href="https://it.odwebdesign.net/contact_us/">Contattaci</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>