Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] Drop Down Triggering When It Shouldn’t

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #32990
    grovesk
    Member

    Hi – I’ve got a drop down that was built by someone else, and it’s triggering when it shouldn’t. Can someone have a look at it for me and offer some suggestions?

    Here’s the page

    The menu I’m referring to is the My Account just to the left of the search bar. If you place your mouse just under the search field, about half way along, it’s triggering the drop down. The client wants i to trigger ONLY when you hover over the words My Account.

    It uses CSS Sprites for the background images (I have no experience with sprites) but it seems to be that the top image is the trigger, rather than the words My Account.

    Here’s the CSS for that section.



    .wrapper { width:960px; margin-left:auto; margin-right:auto}
    .wp_1100 { width:100%;}
    .top-line, .bottom-line { width:100%; height:3px; overflow:hidden}
    .top-line { background:url(../images/topline.png) repeat-x 0 1px}
    .bottom-line { background:url(../images/bottomline.png) repeat-x}

    .header {
    z-index:1;
    height:auto
    }
    .header .logo {
    top:72px;
    left:0
    }
    .header .top {
    z-index:2;
    top:0;
    height:35px;
    background:#333130;
    color:#fff
    }

    .header dl, dt, dd, ol, ul, li, td { margin:0; padding:0;}

    .header .top .wrapper { z-index:3}
    .header .top-line { top:35px}
    .header .links { top:10px; right:188px;}
    .header .my-account { top:7px; right:35px; width:152px; padding-top:3px}
    .header .search {
    z-index:3;
    top:10px;
    right:0;
    width:104px;
    height:15px;
    overflow:hidden;
    background-image: url(../images/search-bg.png);
    background-repeat: no-repeat;
    }
    .rel { position:relative} .abs { position:absolute} .fixed { position:fixed}

    .header .links li {
    font-family: 'InterstateLight', Arial, Helvetica, sans-serif;
    font-size: 10px;
    line-height: 15px;
    position:relative;
    display:inline;
    float:left;
    height:15px;
    margin-left:10px;
    }
    .header .links li a {
    font-family: 'InterstateLight', Arial, Helvetica, sans-serif;
    font-size: 10px;
    line-height: 15px;
    font-size:10px;
    color:#FFFFFF;
    text-decoration:none;
    }

    .header .links li a:hover {
    font-family: 'InterstateLight', Arial, Helvetica, sans-serif;
    font-size: 10px;
    line-height: 15px;
    text-decoration:none;
    color:#ACA700
    }

    .header .my-account dt {
    font-family: 'InterstateLight', Arial, Helvetica, sans-serif;
    font-size: 10px;
    line-height: 15px;
    height:15px;
    padding-left:21px;
    padding-bottom:7px;
    background:url(../images/account-icon.png) no-repeat 10px 3px;
    color:#fff;
    overflow:hidden;
    }

    .header .my-account dd { display:none} /*change to visible to edit, none to hide*/

    .header .my-account dd.bottom {
    height:13px;
    overflow:hidden;
    background-image: url(../images/my-account-bg.png);
    background-repeat: no-repeat;
    background-position: -304px bottom;
    }

    .header .my-account dd.list {
    width:136px;
    padding-left:7px;
    padding-right:11px;
    font:10px/16px 'Interstate Light', Interstate, Arial;
    background-image: url(../images/my-account-bg.png);
    background-repeat: repeat-y;
    background-position: -152px 0;
    }

    .header .my-account li {
    font-family: 'InterstateLight', Arial, Helvetica, sans-serif;
    font-size: 10px;
    padding-left:14px;
    list-style-type: none;
    }
    .header .my-account li a {
    font-family: 'InterstateLight', Arial, Helvetica, sans-serif;
    font-size: 10px; color:#e55302;
    text-decoration: none;
    }
    .header .my-account li:hover {
    font-family: 'InterstateLight', Arial, Helvetica, sans-serif;
    font-size: 10px; background:#f4f2f2;
    text-decoration: none;
    }
    .header .my-account li:hover a, .header .my-account li a:hover { font-family: 'InterstateLight', Arial, Helvetica, sans-serif;
    font-size: 10px; color:#aca700; text-decoration:none}

    .header .my-account:hover { background:url(../images/my-account-bg.png) no-repeat}
    .header .my-account:hover dt { background-position:10px -19px; color:#aca700}
    .header .my-account:hover dd { display:block}

    * html .header .my-account dd.bottom { background:url(../images/my-account-bg-ie6.png) no-repeat -304px bottom;}
    * html .header .my-account dd.list { background:url(../images/my-account-bg-ie6.png) repeat-y -152px 0}
    * html .header .my-account:hover { background:url(../images/my-account-bg-ie6.png) no-repeat}

    .header .search .txt { width:80px; padding:1px 4px; border:none; background:none; font:10px/13px MinionPro, Arial; color:#333}
    .header .search .btn { top:0; right:0; width:15px; height:15px; padding:0; background:none; border:none; cursor:pointer; text-indent:-9999px; overflow:hidden}

    any help would be great.

    Thanks Karen

    #74144
    XaviJr
    Participant

    The problem could be the width from .my-account abs dl.

    #74148
    grovesk
    Member

    Hi XaviJr – Can you explain some more? I don’t know what to fix.

    If I change the width on .header .my-account it doesn’t seem to make a difference.

    Thanks, Karen

    #74137
    grovesk
    Member

    Did a bit of experimenting.

    If I comment out right: 35px and change width to auto (as below) it functions the way it should.

    .header .my-account{
    top: 7px;
    /* right: 35px; */
    width: auto;
    padding-top: 3px;
    }

    But as soon as move it back to the left of the search box, it doesn’t. So it has something to do with the right positioning. Any suggestions from here?

    #74062
    TheDoc
    Member

    Make this modification:

    .header .search {
    height: 22px;
    }
    #74051
    grovesk
    Member

    Brilliant. Thanks Doc! :)

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.