CODEWITHSUNDEEP
javascriptjquery
Burt
Burt

Reputation: 7758

Menu running into 2 lines in INternet Explorer

I have a menu omn the http://berrisford.gumpshen.com/ that works out the padding for the menu items using the following javascript.

This works fine in FIrefox but in IE the menu items become too long and the last menu item spills onto a new line. Can anyone help please?

var finalWidth = 940;
var totWidth = 0;

var lis = $("header ul.lv1 > li").each(function () {
    totWidth += $(this).width();
});

var diff = finalWidth - totWidth;
var diffPer = diff / lis.length;

if (diff > 0) {
    $("header ul.lv1 > li a").each(function () {
        $(this).css('padding-right', diffPer / 2);
        $(this).css('padding-left', diffPer / 2);
    });

    var totWidth2 = 0;
    var lis2 = $("header ul.lv1 > li").each(function () {
        totWidth2 += $(this).width();
    });



    if ($.browser.msie) {
        var version = parseInt($.browser.version, 10);

        if (version < 9) {
            $("header ul.lv1 > li a").last().css('padding-right', (940 - totWidth2) - 20);
            var lastItemPaddding = (Math.floor(diffPer / 2) + (940 - totWidth2));
            $("header ul.lv1:last-child li:last-child a").css('padding-right', lastItemPaddding);
        }
    }
    else {
        var version = parseInt(detectBrowserVersion(), 10);

        if (version == 14) {

            $("header ul.lv1 > li a").last().css('padding-right', (940 - totWidth2) - 20);
            var lastItemPaddding = (Math.floor(diffPer / 2) + (940 - totWidth2));
            $("header ul.lv1:last-child li:last-child a").css('padding-right', lastItemPaddding);
        }
    }
}

http://berrisford.gumpshen.com/

Upvotes: 2

Views: 116

Answers (3)

T. Junghans
T. Junghans

Reputation: 11683

I just compared Firefox 10, Safari (latest) and IE7. The menu only looks good in Safari. In Firefox the last menu item is on the next line, below the first item. In IE7 all items are on one line but you have a problem with the z-index. If I add the following CSS to the header element, the overlapping is fixed:

header {
    position: relative;
    z-index: 1;
}

I know this is not your initial issue, but there are plenty of users out there on IE7, so I would consider this.

Regarding your padding issue. I see some of the paddings are double values. Changing them to integers or flooring the values should help:

var diffPer = parseInt(diff / lis.length, 10);

Or

var diffPer = Math.floor(diff / lis.length);

Do this with all divisions.

Upvotes: 2

Filipe Carvalho
Filipe Carvalho

Reputation: 628

changing the finalWidth won't do much work, you would have to change the "940" in your code, to finalWidth too.

try this:

      var diffPer = (diff / lis.length) - 1; //(or -2)

Upvotes: 0

Frederick Behrends
Frederick Behrends

Reputation: 3095

Try to make the floating elements 1 pixel smaller then the container containing them, ie has sometime trouble with this and breaks it to a new line.

So give var finalWidth = 939; a try, this should fix it.

Upvotes: 2

Related Questions