SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Zealot maileen's Avatar
    Join Date
    Apr 2006
    Posts
    158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Opera issue with DIV

    Hi,

    I have a web page which is displayed under IE and FF without any problem.
    However, under Opera it display a scroll bar (but not active = not scrollable).

    i've checked the css code and everything seems ok (no pixel outside the div)
    so where could be the problem located ?

    thanks a lot,

    M.

  2. #2
    [Biped] LJK's Avatar
    Join Date
    Jun 2004
    Location
    In My Jammies
    Posts
    761
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Without the code used or a link to it, it'll be quite difficult to get a response to your question ;-)

    El
    F-Fox 2.0 :: WIN :: el design :: US

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    As LJK said we need a bit more information to go on as it could be any number of issues .

  4. #4
    SitePoint Zealot maileen's Avatar
    Join Date
    Apr 2006
    Posts
    158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    so here is the html code :
    <div id='ID_DivTopMenu' class='Div_TopMenu'>
    <a class='TopNavLink' href='#'>Contact_Us</a>
    |
    <img id='ID_TopNavArrow' class='TopNav_Arrow' src='temp.png' />
    <a id='ID_TopNavLang' class='TopNavLink' href='#'></a>
    |
    <a class='TopNavLink' href=''>My Account</a>
    <div id='ID_DivInterfaceLanguage' class='DivInterfaceLanguage' onmouseover='this.style.display="block";document.getElementById("ID_TopNavLang").style.color="";' onmouseout='this.style.display="none";'>
    </div>
    </div>
    and here the css file :

    .Div_TopMenu
    {
    height : 20px;
    margin-top : 5px;
    margin-right : 5px;
    color : #5078b4;
    vertical-align : bottom;
    }
    .TopNavLink
    {
    margin : 0px 5px 0px 5px;
    color : #5078b4;
    vertical-align : bottom;
    }
    .TopNavLink:hover
    {
    color : #FAC81E;
    }
    .TopNav_Arrow
    {
    border-style : none;
    vertical-align : bottom;
    margin : 0px 5px 0px 7px;
    cursor : pointer;
    }
    .DivInterfaceLanguage
    {
    z-index: 4;
    position : absolute;
    display : none;
    cursor : pointer;
    heigth : 50px;*/
    border-color : #AAAAAA;
    }
    .UL_LangItem
    {
    margin : 0px 0px 0px 0px;
    padding : 0px 0px 0px 0px;
    vertical-align : middle;
    background-image : url(../images/common/topnav_tab_02.png);
    }
    .LangItem
    {
    margin : 0px 0px 0px 1px;
    padding : 3px 0px 0px 9px;
    vertical-align : middle;
    height : 15px;
    width : 70px;
    list-style: none;
    }
    .LangItem:hover
    {
    margin : 0px 0px 0px 1px;
    padding : 2px 0px 0px 9px;
    vertical-align : middle;
    height : 14px;
    width : 70px;
    list-style: none;
    background-color : #eaeaea;
    border-top-style : solid;
    border-bottom-style : solid;
    border-top-width : 1px;
    border-bottom-width : 1px;
    border-top-color : #FAC81E;
    border-bottom-color : #FAC81E;
    }

    .Div_TabPageTop
    {
    background-image : url(../images/common/topnav_tab_01.png);
    height : 20px;
    width : 81px;
    margin : 5px 0px 0px 0px;
    }
    .Div_TabPageBottom
    {
    background-image : url(../images/common/topnav_tab_03.png);
    height : 5px;
    width : 81px;
    }

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I'm afraid that code doesn't show any scrollbar in Opera so you will have to fashion a better working demo than that otherwise we won't really be much help.

    You have 2 typos here anyway:

    Code:
    .DivInterfaceLanguage
    {
    z-index: 4;
    position : absolute;
    cursor : pointer;
    heigth : 50px;*/
    border-color : #AAAAAA;
    }

  6. #6
    SitePoint Zealot maileen's Avatar
    Join Date
    Apr 2006
    Posts
    158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    do not worry i realized it after cut/paste action into this post.
    in reality it is removed :-)

    ... but the problem still persists...

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    .. but the problem still persists...
    Can you put up a demo somewhere so we can see.?

    If you really want this solved then it will be worth the effort

  8. #8
    SitePoint Zealot maileen's Avatar
    Join Date
    Apr 2006
    Posts
    158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile

    i do not have any free web hosting space for now, so i will give here some screenshots, ok ?

    step 1 : no mouse pointer on one of those 3 links.
    step 2 : example how should look like a link when mouse is over it (yellow color)
    step 3 : as i wrote before, to make the tab behavior, i needed to place a div with a z-index higher range than the link (worldwide= language selection). but due to that, the link does not get the mouseover event and does not change its color to Yellow.
    step 4 : show the scrollbar only when the language selection div is displayed :-(
    Attached Images Attached Images

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi Maileen,

    I think the only way to solve this is for you to zip the whole site up (images,html and script etc) and attach it here so we have something to work with.

    I can see the scrollbar in your screenshot but I would need to disect the code to find out the cause and effect a solution. Obviously opera thinks something may need a scrollbar so I would check the widths on things like your absolutely placed dropdowns to ensure they aren't positioned left and also 100&#37; wide.

    There are just too many other variables to hazard a guess and of course the problem may even be an undefined bug anyway.

    If you can attach a working zip then I'll take a look. Or alternatively email me the zip if you don't want it seen live yet.

  10. #10
    SitePoint Zealot maileen's Avatar
    Join Date
    Apr 2006
    Posts
    158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i finally found what it was... my main div in which all the rest of web page elements are stored, had overflow : auto. :-(

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Glad you found it


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •