Layers width and scrollbar

I'm creating a site and I'm having a problem with the layers I have for the main page and the menu.

I have these in my CSS file :

PHP Code:

---

#site_top{
    margin: 0;
    padding: 10px 0px;
    border-bottom: 1px solid #cccccc;
    width: 100%;
}

#main_page { 
    margin-top: 0px;
    margin-left: 25%;
    margin-right: 0px;
}

#menu {
    float: left;
    width: 22%;
    background-color: #eeeeee;
} 


---

It all works fine but in Firefox (and opera), if the page is long and a scrollbar becomes visible, then the percentage I have is different and it makes the site_top layer and the menu layer smaller and the difference is visible when going from one option of the menu to another. In IE that the scrollbar is visible and either enabled or disabled this doesn't happen...

I'm sure someone has run into this before... Any solution other than the obvious (which I assume would work) to have a fixed (not %) width for the menu?

Thanks :)

Not sure I can help. But it would help if you could post a link to the page as I can't really visualise what you are describing.

www.freepgs.com/manavo/

in the admin panel, login with :

username : admin
password : admin

then open any page other than the Show Classrooms.
After that, if you open Show Classrooms you'll see that the menu width is slightly smaller than the other pages...

How about if I were to get the screen resolution and make all the percentages based on the width of the screen-20 pixels? Then no matter if there is a scrollbar or not there will be a gap on the right?

Doesn't sound like the best idea though :(

I found this : http://forums.mozillazine.org/viewtopic.php?p=2228127& which mentiones the same problem with me. The solution of always making the scrollbar visible solves it and it's good enough for now.

Although I am curious to see if there are other options as well so I won't resolve it :)

I still have no idea what your problem was. Prehaps I need a better eye :lol:

You can't see it in the site? In all pages except for the show classrooms one there is a certain width for the menu. The width of the MozillaWindowClass. If there is no scrollbar, the width is 1024. If there is a scrollbar the width is 1005. So 20% of a different width will give you a different width for my menu... By making the scrollbar always visible now the width will always be 1005 so the menu will always be the same width :)

I know the problem. Use min-width to make sure the menu doesn't shrink too much.