asked on

Page stops scrolling at bottom of side menu on IE

Hi All;

I have pages at:

http://www.vbmysql.com/articles/vb_mysql_tutorials/vb_mysql_tutorial-part1.html

Where the screen stops scrolling at the bottom of the right-hand menu instead of the bottom of the actual content. This only happens in IE.

Stylesheet at:

http://www.vbmysql.com/vbmysql.css

Help much appreciated.

seanpowell

It looks like it's just space issues.
As it stands, minimum window width needs to be about 987 - if that's okay with you then I'll go into the code.
(Your widest image is 710 + the side bar)

Thanks,
Sean

seanpowell

Try the following modification to start with:

#SideMenu {
border-left: thin solid #000;
border-bottom: thin solid #000;
/* we want to remove this left margin setting */
/* margin-left: 76%; */
/* and use a width instead */
width:20%;
}

Squeebee

ASKER

That completely ruins the rendering in Mozilla FireFox. Are there any other ways to handle this? Seems more like I am working around an IE bug than anything.

ASKER CERTIFIED SOLUTION

seanpowell

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

seanpowell

But you need to have enough window width either way...

seanpowell

>>Are there any other ways to handle this?
Absolutely.

1. Get rid of the content width:

#Content {
      padding-top: 10px;
      padding-left: 10px;
      padding-right: 15px;
      margin-right: 10px;
      font-family: Geneva, Arial, Helvetica, sans-serif;
      font-weight: normal;
      font-size: 14px;
}

2. Float the sidebar on the right:
#SideMenu {
      float: right;
      border-left: thin solid #000;
      border-bottom: thin solid #000;
      width:20%;
}

3. Put the entire SideMenu div right underneath the opening content div tag.

seanpowell

Addition to #2:

#SideMenu {
      float: right;
      border-left: thin solid #000;
      border-bottom: thin solid #000;
      width:20%;
      /* keep it away from the content*/
      margin-left:20px;
}

Squeebee

ASKER

The line you added fixed things nicely, thanks for your help.

If you can give me a couple of more tips, I have two things:

The whole page has a slight margin, and if possible I would like all elements to go right to the edge of the browser.

The side menu is tucked a bit away from the page margin, when all is said and done I would want it too to start at the edge of the browser.

Thanks

seanpowell

Sorry, went for dinner :-)

We'll need to change 2 things for this.

1. Since we're not specifying full width on the elements, in order for the sidemenu to be flush right we need to change the float to "right":

#SideMenu {
      float: right;
      border-left: thin solid #000;
      border-bottom: thin solid #000;
      width:20%;
}

Finally, to get rid of the default margins and padding for the whole page, we need to modify the body tag to this:

body {
      background-image: url(images/greybg.jpg);
      margin:0px;
      padding:0px;
}

And that should do it :-)

Thanks Squeebee,
Sean

Squeebee

ASKER

Awesome, thanks!