problem with CSS property overflow:visible;

  • Resolved iceq

    (@iceq)


    14 years ago

    Hello

    I add the CSS propery overflow:visible; to my CSS, in the following, changing overflow from hidden to visible.

    .topright {
width:641px;
font-family:Tahoma ,Century gothic,Verdana,Tahoma,sans-serif;
margin:0px 0px;
float:left;
background:url(images/topright.jpg) no-repeat;
height:106px;
overflow:visible;
position:relative;
}

    I did this to overcome the problem of the subpages in the pages navigation bar in the header, appearing behind the header’s image

    This solution made the subpages appear in the front as supposed, but had a negative effect of the page scrolling horizontally a long distance beyond the blog’s borders, and at the end, appear two subpages, for an unknown reason.

    You can see this problem here:
    http://cinema.al-rasid.com/

    The problems happens with IE8, FF 3.6.3, but not with Chrome.
    I tried to add z-inded:9999 to that class, bit it didnt help.

    Thank you in advance

Viewing 5 replies - 1 through 5 (of 5 total)
  • ignari

    (@ignari)

    14 years ago

    In line 345 of style.css
    You have this:
    #menu li ul {
    left:-999em;
    }

    Remove the left value and the horizontal scrolling dissapears.

    Thread Starter iceq

    (@iceq)

    14 years ago

    Thank you very much for your help.

    Yet sadly, this solution had a negative effect of all subpages appearing by default, under their parent pages, where they should appear only when I hover the mouse over the parent pages. See the screenshot below

    http://img21.imageshack.us/i/mobibug.png/

    It happens even with chrome, which did not exhibit the problem of horizontal scrolling at all.

    Thread Starter iceq

    (@iceq)

    14 years ago

    Please answer my Q !

    Thread Starter iceq

    (@iceq)

    13 years, 11 months ago

    Another week and no response

    Thread Starter iceq

    (@iceq)

    13 years, 10 months ago

    THank you everybody. especially Drknowsystems. I have managed to overcome the problem with the help of Interstice Solutions:
    http://interstice.biz/

    The solution is this:

    The solution was to do the -999 to the *right*, and to also adjust the hover state to have a *right* positioning of ‘auto’ (rather than left)

    #menu li ul {
    position: absolute;
    width: 150px;
    right:-999em;
    z-index:200;
    }

    #menu li:hover ul {
    right: auto;
    display: block;
    }

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘problem with CSS property overflow:visible;’ is closed to new replies.

Tags