Hej udviklere,
Jeg står i en situation hvor jeg skal lave en menu som er dynamisk på den måde at man skal kunne tilføje og fjerne et menupunkt og samtidigt skal menuen kunne tilpadse sig så den fylder hele den container den ligger i.
Jeg har lavet et script som udregner den padding hvert menupunkt skal have og det funger fint i firefox.
I Chrome regner den dog anderledes ud.
Lidt om scriptet.
var menu_width = $('#primary_navigation').width();
var calc_width = 0;
var no_children = 0;
$('#primary_navigation li').each(function() {
calc_width += $(this).width();
no_children++;
})
padding = parseInt((menu_width - calc_width - (no_children*2)) / (no_children * 2));
remaining = (menu_width - calc_width - (no_children * padding * 2) - (no_children * 2));
$('#primary_navigation li').css('padding', '10px '+padding+'px 8px');
$('#primary_navigation li.last').css('padding', '10px '+(padding+remaining-3)+'px 8px');
Problemet er i bund og grund at Firefox udregner 'calc_width' til 503 og Chrome udregner til 509. Har ikke engang prøvet i IE endnu. Men at de 2 browsers ikke engang regner breden af et element ens ud overrasker mig lidt. Jeg har mistanke om at det er grundet font-rendering som jeg ved at de håndtere forskelligt.
Er opgaven tabt på forhånd eller kan det lade sig gøre?