Why does this website show a menu of different width in different browsers?

Question

The problem is in the jQuery Mega menu. It somehow displays correctly on Google Chrome Linux and Internet Explorer (Windows 8), but incorrectly on Opera (Linux), Google Chrome (Windows), Firefox (windows), etc. If it is displayed incorrectly, last menu when hovered overlays with search input. What could be the issue here? I do not want to change the paddings.

if you don't want to change the padding then decrease the width of input search text box — Roy Sonasish, May 24 '13 at 06:08
Then let me rephrase my question - what is interpereted differently in these browsers/engines? — Ernestas, May 24 '13 at 06:14
I don't have linux but I have checked your site in IE8 and FF in windows its looks same. — Roy Sonasish, May 24 '13 at 06:16
You can see the difference in these photos: http://imageshack.us/a/img855/7266/16698012.png http://imageshack.us/a/img5/377/93567712.png — Ernestas, May 24 '13 at 06:37
its because its based on pixels. Browsers have the stupid thing to calculate them all different — DiederikEEn, May 24 '13 at 08:24

score 2 · Accepted Answer · edited May 23 '17 at 12:28

The difference is most likely due to browsers interpreting decimal pixel numbers differently. Each menu item doesn't have explicit width set via CSS so it gets fraction of pixels that are respected in some and gets rounded in some. Now, that only makes 1px difference per element but that eventually add up to 10px, 20px, and more.

So the solution would be to give enough room between menu item and the search bar, maybe make it narrower.

This might help you understand the issue in detail: Are the decimal places in a CSS width respected?

score 0 · Answer 2 · answered May 24 '13 at 07:52

Dont Know is it right method or not

You have some code in your CSS file on line no 2025

#searchform {
    position: absolute;
    top: 79px;
    left: 744px;
    width: auto;
    height: auto;
    margin: 0px;
    display: table-cell;
}

edit the left property value to 764px from 744px;

and on line no 3416

#searchform .text_input {
    width:149px;
    height: 9px;
    padding: 10px;
    position: relative;
    top: -1px;
    vertical-align: middle;
    font: 11px Arial,sans-serif;
}

Remove the width property from this chunk of code

As far as I understand, this will not help, because the search form is added using absolute position, which means that it cannot calculate width on the basis of remaining space in the menu. — Ernestas, May 24 '13 at 11:37

Why does this website show a menu of different width in different browsers?

2 Answers2