We help IT Professionals succeed at work.

We've partnered with Certified Experts, Carl Webster and Richard Faulkner, to bring you two Citrix podcasts. Learn about 2020 trends and get answers to your biggest Citrix questions!Listen Now

x

Menubar doesn't resize with the page

Sander Stad
Sander Stad asked
on
Medium Priority
263 Views
Last Modified: 2008-02-26
Thanx for looking at my question. I've been struggeling with this website for days now and can't find the solution to it. The problem is like this.
I created, in my stylesheet, 3 containers (#container, #content and #menu). This works fine and is just like I want it because I don't want my divisions to go deeper than 3 levels.
But whenever i look at it in IE the menu doesn't go further (backgroundcolor of the menu) if the text goes further than the menu. And even worse if I look at it in Firefox.

Can anybody give me a lead how to solve this because I tried all kinds of forums and nobody can answer my question.

This is my stylesheet:
/** ALGEMEEN *********************************************/
html, body{
      height: 100%
}
body{
      background-color: #978C84;
      font: 0.8em Verdana, Arial, Helvetica, sans-serif;
      height: 100%;
      margin: 10px;
      padding: 0;
}
/*********************************************************/
/** CONTAINERS *******************************************/
#container{
      background-color: #FFFFFF;
      border-bottom: 10px solid #1772A7;
      border-top: 10px solid #1772A7;
      height: 100%;
      width: 900px;
}
#content{
      background-color: #FFFFFF;
      height: 100%;
      float: left;
      padding: 5px;
      width: 680px;
}
#menu{
      background-color: #272727;
      float: right;
      height: 100%;
      width: 200px;
}
/*********************************************************/
/** NAVIGATIE ********************************************/
#menu ul{
      border: 0;
      list-style: none;
      margin: 0 0 10px 0;
      padding: 0;
}

#menu ul li {
      border-top: 1px solid #444;
      font-size: 1.0em;
      text-align: left;
      margin: 0 0 0 0;
}

#menu ul li a {
      color: #ccc;
      display: block;
      margin: 0;
      padding: 8px 5px 8px 10px;
      text-decoration: none;
      width: 185px;
}
#menu ul li a:hover {
      background: #444;
      color: #fff;
}
#menu .menuheader {
      border-top: 0;
      color: #888;
      font: normal 1.0em Arial, Helvetica, sans;
      letter-spacing: 0.2em;
      margin: 0 0 1px 0;
      padding:12px 5px 12px 10px;  
      text-transform: uppercase;
}
#menu .menuheader a {
      border-top: 0;
      color: #888;
      display: block;
      margin: 0;
      padding:0;
      width: 175px;
}
#menu .menuheader a:hover {
      background: none;
      color: #ccc;
}
/*********************************************************/

This is the temporary url of the page: http://www.df5ea.com/projects/projecten_inont/vakfotografiewimstad.nl_3/

I'm not new with CSS and XHTML but some things I just don't get the answer to so I have to ask some experts ;)
Comment
Watch Question

CERTIFIED EXPERT
Top Expert 2006

Commented:
To have firefox not use height as maximum and minimum height at the same time, you can use instead of height:100% :

height: auto !important;
min-height: 100%;
height : 100%;

Firefox supports !important, msIE not.

-r-
Sander StadSysteemontwikkelaar, Database Administrator

Author

Commented:
OK that works great already, but how do i get the menu to be the same height as the content page ?
CERTIFIED EXPERT
Top Expert 2006
Commented:
You would have to create a two-coloured background image and assign it to the container div and let it have background-repeat:repeat-y;

Then remove the backgroundcolor on the menu and content div, such that the background image shines through.

Finally add a clearing div (<div style="clear:both"></div>) just in front of the </div> of your container div. This makes sure that the container is as high as the highest one out of the menu and content div.

-r-

Not the solution you were looking for? Getting a personalized solution is easy.

Ask the Experts
Sander StadSysteemontwikkelaar, Database Administrator

Author

Commented:
Thanx that works perfect !

Sander StadSysteemontwikkelaar, Database Administrator

Author

Commented:
Do you have any websites where I can get this kind of information about across browser positioning?

I read a lot of articles about CSS so that could help me in the future.
CERTIFIED EXPERT
Top Expert 2006

Commented:
csszengarder; positioneverything. There are many.

Doesn't css.pagina.nl exist btw?

-r-
Access more of Experts Exchange with a free account
Thanks for using Experts Exchange.

Create a free account to continue.

Limited access with a free account allows you to:

  • View three pieces of content (articles, solutions, posts, and videos)
  • Ask the experts questions (counted toward content limit)
  • Customize your dashboard and profile

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.