Unwanted slider bar on outer wrapper

[gestler]

I am at a very basic level of web development capability. However, I built a site that was working fine until I attempted to insert a slideshow (using WOWslider) onto the site. This caused me to alter the css file for the site and for the superfish menu. When I did that, a navigation (slider) bar appeared to the right and at the bottom of the outer wrapper in addition to the slider bars normally seen in a browser window. The same appears on every page of the site. Now I can't get rid of those outerwrapper sliders.

I set the outerwrapper overflow:auto; but that hasn't helped. I looked for any padding that might be getting applied but didn't find any issues. I reduced the width of individual graphics, the menu and content one at a time but none of those had any effect. I'm lost so would appreciate any suggestions for correcting whatever it is I have inadvertently done.

[jj.dcruz]

have you tried
overflow:visible;

Update:

#outerWrapper {
  width: 860px;
  height: 2135px;   /*Edited min-height: 98% */
  margin: 0px auto;
  /* background-image: url('../images/orangegrad.png'); */
  background-repeat: repeat-x;
  background-color: #ffcc99;
  overflow: visible;
}

I have this code from fire buggin your site so far this works fine but i guess its only on one page I tried

[gestler]

Thank you Joshua. This does get rid of the unwanted slider bar but makes all twelve pages of the site 2135px long when only the index page requires that. What I had before automatically adjusted the length of each page to eliminate the blank space below the footer.

[jstfsklh211]

try overflow hidden on your wrapper
assuming the scrolling is handled by your inner layout anyway

[jj.dcruz]

you can customize only the index page having an inner css would be nice too

#outerWrapper {
  width: 860px;
  height: 2135px;   /*Edited min-height: 98% */
  margin: 0px auto;
  /* background-image: url('../images/orangegrad.png'); */
  background-repeat: repeat-x;
  background-color: #ffcc99;
  overflow: visible;
}

instead of creating a style you can insert that in the outerwrapper like this

<div id="outerWrapper" Style=" 
      width: 860px;
      height: 2135px;   /*Edited min-height: 98% */
      margin: 0px auto;
      /* background-image: url('../images/orangegrad.png'); */
      background-repeat: repeat-x;
      background-color: #ffcc99;
      overflow: visible;">

so that the index page can be modified like that

[gentlemedia]

I see your #innerWrapper div start's in your #logo div, which breaks your layout and causes this unwanted scrollbar in #logo div and not in #outerWrapper div.

Tip: Issues like this you spot in seconds with the browser developer tools.

[gestler]

Thanks for all the suggestions.

To jstfsklh211: When I change the overflow to "hidden", the scroll bars do go away but the lower portion of the age is then no longer visible.

To Josua: Interesting concept. I'll try it and report back.

To gentlemedia: My intent was to have the #logo div start in the outer wrapper but it ends in the inner wrapper. I attempted to place the end div prior to the start of the innerwrapper but it seems to throw off all the spacing on my content that follows. I did look at the browser tools but I'm afraid I'm not smart enough to know where to go in the tools to see or interpret the results it gives me. Obviously, I have some reading to do.

Again, thanks everyone for your suggestions. I'll keep working at it.

[gestler]

Hi, again, all,

gentlemedia's input got me thinking so I took his suggestion about ending the logo div before starting the inner wrapper. Then I revisited the padding for my various content styles and put the menu into the inner wrapper and it all seems to work now. The menu no longer abuts the left and right margins of the outer wrapper but I can live with that.

Thanks again to everyone for your help and suggestions. My issue is resolved.

[gentlemedia]

Glad you've sorted it out! You can also get rid of this CSS kung-fu :) because without it, it looks the same. Just delete the whole CSS block and you will see!

#logo {
  height: 0px;
  width: 860px;
  padding: 0em 0em 27.5em 0em;
}