treehouse : what would you like to learn today?
Web Design Web Development iOS Development

Fancy x-overflow

  • Hello everybody!
    I have a problem on my website: The body is 100% wide, but there is a horizontal scrollbar, which allows to scroll horizontally a little bit. Obviously the nav#header and footer are overlapping the regular size of the body, though they are set to 100% also.

    body: 100%
    1) nav#header: 100%
    2) page (=wrapper): 960px, horizontally centered by margin-auto
    3) footer: 100%

    Examples:
    http://www.belleslettres.eu/index.php
    http://www.belleslettres.eu/artikel/adj ... nation.php

    It didn't help to set nav and footer to overflow-x:hidden. There is a right-floated ul in the nav#header. I am not sure, if this causes the overlapping.

    I can get rid of the overlapping by setting the body-element to overflow-x:hidden, but what happens, if the browser window is less than 960px, which is the width of the wrapper (div#page)?

    Thanks for helping!
    Lina
  • At least on Firefox for the mac, if I remove "-moz-box-shadow:0 3px 10px #2A2625;" from "nav#header" in the stylesheet, that fixes it for me.

    Seems like removing that line and using a background image instead would be the solution here that should remove the scroll bar. As I said though, this is only tested in Firefox, so you should also check if this takes care of IE as well.
  • Thanks Benjamin,
    this is it.
    Lina