Member Avatar for 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.

  • 4 Contributors
  • 8 Replies
  • 291 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by gentlemedia

Dani AI

Generated

Short summary and final fix (credit to ): the extra scrollbars were the result of mis-nested markup and layout workarounds that let the slideshow/menu escape the intended flow. Closing the #logo element before starting #innerWrapper and moving the menu into the inner wrapper restored normal document flow and removed the stray scrollbars — the real fix was structural, not just toggling overflow.

Why that happens: when a parent is effectively collapsed (zero height, large padding used as a height hack, or floated children that aren’t cleared) a child can overflow and push scrollbars on an ancestor. Quick fixes mentioned in the thread — overflow:visible (which removed the bar but forced a fixed tall outer wrapper) and overflow:hidden (which hides content) — mask the symptom. The robust solution is to fix markup and let containers size naturally.

Practical, reliable steps:

  1. Validate and fix the HTML so wrappers are correctly nested; every opened div should be closed in the intended order.
  2. Remove fixed height on site-wide wrappers; use min-height only where a single page genuinely needs it (prefer a body class for that page rather than inline styles).
  3. Clear floats instead of relying on padding hacks. A small clearfix will do:
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

Apply that class to the wrapper or ensure the footer clears floats. For a long index page, prefer a page-specific rule (add class="home" on the index body) rather than hard-coding heights site-wide:

.home #outerWrapper {
  min-height: 2000px; /* only for the long index page */
}

Developer-tool checklist: inspect the DOM tree to find mis-nested tags, toggle suspected CSS rules to see which change removes the scrollbar, add temporary outlines to wrappers to visualize overflow, and check computed widths for images or the slider. Fixing markup + using clearfix/min-height produces a stable, cross-page result.

Recommended Answers

All 8 Replies

Member Avatar for 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

Edited by jj.dcruz
Member Avatar for 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.

Member Avatar for jstfsklh211

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

Member Avatar for 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

Edited by jj.dcruz because: update my code and have some explanations
Member Avatar for 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.

Edited by gentlemedia
Member Avatar for 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.

Member Avatar for 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.

Member Avatar for 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;
}
Edited by gentlemedia
commented: gentlemedia's response led me to the right path for fixing my problem. Can't thank you enough. +0
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.