Javascript Reading Width van ul li probleem (Webkit)

[Daniel.]

Dag Tweakers,

Het is niet snel dat ik iets vraag, maar wat ik nu heb vind ik toch wel zeer opmerkelijk. Wie o wie kan me hierbij helpen. Het gaan om een navigation bar waarbij ik de padding zet via een javascript. Dit omdat ik wil dat de bar over de gehele breedte van de website is.
Zie afbeelding voor uitleg.



Nu is mijn vraag hoe kan dit verschil optreden. Ik heb de <ul><li> configuratie ook al zonder whitespaces gedaan maar ik kan het nu niet meer vinden.

De website waar het om draait is te vinden op http://atlasweb.nl/.

Mijn vraag is waarom er verschillende breedtes worden gelezen en waarom dit bij Webkit structureel fout gaat. Graag zou ik ook wel willen weten waarom het sporadisch in IE fout gaat.

Ik hoop dat jullie me kunnen helpen.

Code Javascript(Ik vermoed dat ik hier iets fout doe, maar weet niet wat)

JavaScript:

    jQuery(document).ready(function ($) {
        //Onload
        var widthBar = 0;
        $( "nav#top ul li" ).each(function( index ) 
        {
            console.log($(this).width());
            widthBar += $(this).width();
        });

        var sizeArr = $("nav#top ul li").size();
        sizeArr--;  
        
        var marginWidthFull = (920 - widthBar)/sizeArr; //Breedte is 960 maar margins links en rechts van de bar zijn 20 pixels
        marginWidthFull = Math.floor(marginWidthFull);
        if($(window).width() < 960)
        {
            var marginWidthSmall = (($(window).width()-40) - widthBar)/sizeArr; // -40 vanwege de marings van de balk links en rechts van 20px
            marginWidthSmall = Math.floor(marginWidthSmall);

            $( "nav#top ul li" ).not(':last').each(function( index ) 
            {
                
                $(this).css("margin-right", marginWidthSmall);
            });
            //if(marginWidths < 40)
            //  alert('error'); //SHOWOTHERBAR
        }
        else
        {
            $( "nav#top ul li" ).not(':last').each(function( index ) 
            {
                $(this).css("margin-right", marginWidthFull);
            });
        }
        
        console.log(widthBar);
        console.log(sizeArr);
        console.log((920 - widthBar)/sizeArr);

        
        console.log(marginWidthFull);
        //END
        
        //Onresize
        $( window ).resize(function() {
            var windowWidth = $(window).width();
            if(windowWidth < 960)
            {
                    var marginWidthSmall = ((windowWidth-40) - widthBar)/sizeArr;
                    marginWidthSmall = Math.floor(marginWidthSmall);

                    $( "nav#top ul li" ).not(':last').each(function( index ) 
                    {
                        
                        $(this).css("margin-right", marginWidthSmall);
                    });
                    //if(marginWidths < 40)
                    //  alert('error'); //SHOWOTHERBAR
            }
            else
            {
                $( "nav#top ul li" ).not(':last').each(function( index ) 
                {
                    $(this).css("margin-right", marginWidthFull);
                }); 
            }
        });
        // END
        
        //Lavalamp
        $('nav#top ul').lavalamp({
            easing: 'easeOutBack'
        });

        var v = $('ul li a[class="select"]').closest('li').index()-1;
        var a = $('nav#top ul').children('.lavalamp-item').eq(v);
         
        $('nav#top ul').data('active',a).lavalamp('update');
        //END
    });

[ Voor 2% gewijzigd door Daniel. op 26-08-2014 12:30 . Reden: margin uitleg ]

[Bosmonster]

Het gaan om een navigation bar waarbij ik de padding zet via een javascript. Dit omdat ik wil dat de bar over de gehele breedte van de website is.

Je kunt natuurlijk ook gewoon het box-model aanpassen naar border-box, dan heb je helemaal geen javascript nodig.

[ Voor 10% gewijzigd door Bosmonster op 26-08-2014 12:55 ]

[Daniel.]

Bosmonster schreef op dinsdag 26 augustus 2014 @ 12:53:
[...]


Je kunt natuurlijk ook gewoon het box-model aanpassen naar border-box, dan heb je helemaal geen javascript nodig.

Als ik -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; toepas op het li element gebeurt er helaas niets. Ook niet op de ul en op de nav.

Het zou mooi geweest zijn als dat de oplossing was. Toch vind ik het vreemd dat Webkit de width van een object anders uitleest dan hoe Gecko en Trident dat doen.

[MueR]

Hoewel het niet helemaal netjes is, daar is display: table-cell voor uitgevonden

[Daniel.]

MueR schreef op dinsdag 26 augustus 2014 @ 13:19:
Hoewel het niet helemaal netjes is, daar is display: table-cell voor uitgevonden

Ik heb het geprobeerd, heb het nu in de container content staan maar de 'margins' zijn dan niet gelijk wat ik wel wil hebben in dit geval.

Ik heb iets gevonden ga het vanavond even proberen.

Ik denk dat mijn oplossing een flexbox is http://www.sitepoint.com/...able-item-navigation-css/ .

[ Voor 21% gewijzigd door Daniel. op 26-08-2014 13:42 . Reden: Flexbox ]

[MueR]

Hoezo lukt dat niet? http://jsfiddle.net/MueR/kqaLqbu0/1/

[Daniel.]

Het centert wel perfect, alleen de margins worden niet groter indien het mogelijk is tot een maximum van 960px

[Daniel.]

Ik heb het nu opgelost met Flexbox. Ik ben hier echt al meer dan 6 uur beziggeweest. In ieder geval iedereen bedankt voor de hulp!

[itsleon]

ShittyNL schreef op dinsdag 26 augustus 2014 @ 18:25:
Ik heb het nu opgelost met Flexbox. Ik ben hier echt al meer dan 6 uur beziggeweest. In ieder geval iedereen bedankt voor de hulp!

Let je er dan wel op dat je
display:flex;
display:flexbox;
display:box;

moet gebruiken aan de hand van welke browser en versie er gebruikt wordt.

Denk dat een makkelijkere oplossing te vinden is die beter ondersteunt wordt.
Je weet hoe breed het menu moet zijn. Als voorbeeld nemen we 960px;
Je hebt 6 menu items dus elke li kan je 160px breed maken. Centreer daarna de tekst in het midden en je bent klaar.