Question

I am currently working on a website, whose URL is http://lathamcity.com/

The problem that is befuddling me is that when some, but not all, new items are shown, a vertical scrollbar appears, despite there being no content going off the page. Not only is it bothering me because it is mysterious, but it also looks unprofessional and shifts the text in the header a tiny but noticeable bit.

The effect is visible if one clicks “In Development” or any option in the second menus so far available (all options bring up the same div).

The jQuery code for when an item in the first menu is selected is as follows:

var headerHeight = $('#headerTable').height();
$('#selectStart').offset({left: 0, top: headerHeight});
var select1Width = $('#selectStart').width();
var select2Width = select1Width + $('.selector2').width();
$('table.selector2').offset({left: select1Width, top: headerHeight});
$('table.selector2').hide();
$('td.selector1').click(function() {
    $('td.selector2').css({'background-color': '#3B3133'});
    $('table.selector2').hide();
    $('div.pane').hide();
    var choice = '#' + $(this).attr('data-choice');
    $(choice).show();
    $(choice).offset({left: select1Width, top: headerHeight});
    $('td.selector1').css({'background-color': '#3B3133'});
    $(this).css({'background-color': '#61434A'});
});

Any ideas?

Answer 1

This is because you do not understand how position works.

To explain what happened, try removing position: relative; and you will see how the 3rd-level submenu will be below the browser window, hence causing the scrollbar to appear. When you changed the top and left, it is changed relatively.

That is also why as maxisam suggested, putting position: absolute; fixes it.

There are of course many ways to solve it, but now you know the reason.

I suggest this page for some quick lessons on CSS positioning: Learn CSS Positioning in Ten Steps