Skip to:
Content
Pages
Categories
Search
Top
Bottom

RC-1 – admin-bar-menu acting weird?

  • Avatar of Michael Berra
    Michael Berra
    Participant

    @miguael

    Since RC-1 I experience some strange problems.

    Right now I am on trunk r1128 and it’s still the same:

    In firefox the admin-bar-menu acts weird. When i try to select, it sometimes disppears. Mostly with faster movements. I checked back on Beta2 (I have two installs), and there everything is ok.

    Is anybody else having the same issues?

    Any fix for this / idea what it could be?

    Thanks,

    Michael

Viewing 22 replies - 1 through 22 (of 22 total)
  • Avatar of danbpfr
    danbpfr
    Participant

    @chouf1

    hi Michael,

    I’m using firefox too, but have no more problems with admin bar since update to the latest trunk version (this morning).

    Try your browser on the french demo site and look if you experience troubles.

    http://buddypress-fr.net/bpdemo/

    If not, it’s not your browser, but your settings or updates…

    May this help ?

    Avatar of Michael Berra
    Michael Berra
    Participant

    @miguael

    Hmmmm – it’s the same… Strange… (but thanks for the tipp – should have thought of it myself…). So, nobody except me has that issue…?

    Avatar of Erwin Gerrits
    Erwin Gerrits
    Participant

    @egerrits

    I am having the same issues… the popup menus show up but when you move the mouse down to the fourth or fifth item down it disappears again.

    Avatar of Burt Adsit
    Burt Adsit
    Participant

    @burtadsit

    Yep. This is definitely a trac item. I thought it was getting goofy because I had so many items listed. Like under ‘My Blogs’ I have 12 of them. (I like to talk alot). I disabled the flyouts like ‘Dashboard’ and it’s still doing it. I think it might have to do with detecting the sweetspot.

    I’ll post it.

    Still doing it in the latest trunk. I think it has to do with where you stop moving the mouse. If it isn’t on a chunk of text it seems to disappear? We gotta get this nailed down.

    “It don’t work sometimes” isn’t really enough to post. :)

    Avatar of Erwin Gerrits
    Erwin Gerrits
    Participant

    @egerrits

    Upon further inspection I noticed a 1 pixel gap between only some menu items, and when hovering the pointer over this 1 pixel gap the menu gets wonky.

    A 1 pixel gap between some items indicates to me there’s a rounding error somewhere with the height of the items vs total height.

    Avatar of Burt Adsit
    Burt Adsit
    Participant

    @burtadsit

    This is happening on all bp sites. Just tried somebody elses. @egerrits i’ve noticed that little gap too. The menu starts flashing and vibrating there if you hit it just right.

    This is driving me nuts. I’m just gonna post this and point to this thread.

    http://trac.buddypress.org/ticket/503

    Avatar of Dreamfoundry
    dreamfoundry
    Member

    @dreamfoundry

    I have the same. Any suggestions for a fix would be much appreciated.

    Avatar of Sgrunt
    Sgrunt
    Participant

    @sgrunt

    i’ve solved the gap problem: http://wikiroma.it/index.php

    the flickering problem still exists (in IE).

    If you want i can pass here my customized admin bar css, but you should customize your colors.

    Avatar of Burt Adsit
    Burt Adsit
    Participant

    @burtadsit

    sgrunt, the solution to the gap problem would be very welcome!

    Avatar of Sgrunt
    Sgrunt
    Participant

    @sgrunt

    this is the whole css, i have no gap but sorry, i’ve changed default colors.

    However if you dont want to recustomize the whole css i think you should first use:

    #wp-admin-bar ul li ul li

    margin-top: -1px )instead of margin-bottom: -1 px

    and

    #wp-admin-bar ul li ul li ul li:first-child {

    margin-top:-2px;

    i don’t remember if these 2 lines are enough to solve the problem, but if you want this is the whole css i’m using:

    body { padding-top: 28px !important; }

    *this body line must be the first line of the css, but the forum editor keep it in this wrong position

    #wp-admin-bar {

    position: absolute !important;

    top: 0 !important;

    left: 0 !important;

    width: 100% !important;

    z-index: 1001 !important;

    height: 28px !important;

    color: #fff !important;

    text-align: left !important;

    background:url(../images/admin_bar_back.gif) #818181 repeat-x !important;

    font: 12px normal “Lucida Grande”, “Lucida Sans Unicode”, “Lucida Sans”, Tahoma, Verdana, Arial, sans-serif !important;

    font-weight: normal !important;

    }

    #wp-admin-bar * { z-index: 999 !important; }

    #wp-admin-bar img#admin-bar-logo {

    position: absolute !important;

    top: 8px;

    left: 10px;

    }

    #wp-admin-bar a img {

    border: none !important;

    }

    #wp-admin-bar li {

    list-style: none !important;

    margin: 0 !important;

    }

    #wp-admin-bar li * {

    font: 12px normal “Lucida Grande”, “Lucida Sans Unicode”, “Lucida Sans”, Tahoma, Verdana, Arial, sans-serif !important;

    font-weight: normal !important;

    background-image: none !important;

    }

    #wp-admin-bar li a {

    padding: 6px 25px 7px 15px !important;

    font: 12px normal “Lucida Grande”, “Lucida Sans Unicode”, “Lucida Sans”, Tahoma, Verdana, Arial, sans-serif !important;

    font-weight: normal !important;

    }

    #wp-admin-bar li.no-arrow a {

    padding-right: 15px !important;

    }

    #wp-admin-bar li:hover, #wp-admin-bar li.hover {

    position: static;

    }

    /*******************/

    #wp-admin-bar ul { /* all lists */

    margin: 0 !important;

    list-style: none !important;

    line-height: 1 !important;

    cursor: pointer !important;

    height: 30px !important;

    padding: 0 !important;

    }

    #wp-admin-bar ul {

    margin-left: 80px !important;

    }

    #wp-admin-bar ul li { /* all list items */

    padding: 0 !important;

    float: left !important;

    background: url( ../images/admin-menu-arrow.gif ) 88% 53% no-repeat;

    position: relative;

    }

    #wp-admin-bar ul li.no-arrow {

    background: none;

    }

    #wp-admin-bar ul li ul a {

    color: #fff !important;

    }

    #wp-admin-bar ul li.align-right {

    position: absolute;

    right: 0;

    }

    #wp-admin-bar ul li a {

    display: block !important;

    font-size: 12px !important;

    font-family: “Lucida Grande”, “Lucida Sans Unicode”, “Lucida Sans”, Tahoma, Verdana, Arial, sans-serif !important;

    text-decoration: none !important;

    color: #fff !important;

    }

    #wp-admin-bar ul.main-nav li:hover, #wp-admin-bar ul.main-nav li.sfhover, #wp-admin-bar ul.main-nav li ul li.sfhover {

    background-color: #000 !important;

    }

    #wp-admin-bar ul.main-nav li ul li:hover a, #wp-admin-bar ul.main-nav li ul li.sfhover a {

    background-color:#000 !important;

    color: #70cbf0 !important;

    }

    #wp-admin-bar ul.main-nav li ul li:hover ul li.alt a {

    background-color: #333 !important;

    color: #fff !important;

    }

    #wp-admin-bar ul.main-nav li ul li:hover ul li a {

    background-color: #666 !important;

    color: #fff !important;

    }

    #wp-admin-bar ul.main-nav li ul li:hover ul li:hover a {

    background-color:#000 !important;

    color: #70cbf0!important;

    }

    #wp-admin-bar ul.main-nav li ul li ul li:hover a, #wp-admin-bar ul.main-nav li ul li ul li.sfhover a {

    color: #fff !important;

    }

    /* second-level lists */

    #wp-admin-bar ul li ul {

    position: absolute !important;

    width: 185px !important;

    left: -999em !important;

    margin-left: 0 !important;

    }

    #wp-admin-bar ul li ul li {

    float: left !important;

    width: 183px;

    margin: 0 !important;

    border: none !important;

    background-color: #666 !important;

    border-left: 1px solid #000 !important;

    border-right: 1px solid #000 !important;

    border-bottom: 1px solid #000 !important;

    border-top: 1px solid #000 !important;

    margin-top: -1px !important;

    }

    #wp-admin-bar ul li ul li.alt {

    background-color: #333 !important;

    }

    #wp-admin-bar ul li ul li:last-child {

    }

    #wp-admin-bar ul.main-nav li ul li a:hover, #wp-admin-bar ul.main-nav li.sfhover ul li a:hover {

    background-color: #000 !important;

    color:#70cbf0;

    }

    #wp-admin-bar ul li div.admin-bar-clear {

    clear: both !important;

    background-color: #666 !important;

    }

    /* third-and-above-level lists */

    #wp-admin-bar ul li ul ul {

    margin: -28px 0 0 183px !important;

    }

    #wp-admin-bar ul li:hover ul, #wp-admin-bar ul li li:hover ul, #wp-admin-bar ul li.sfhover ul, #wp-admin-bar ul li ul li.sfhover ul { /* lists nested under hovered list items */

    left: auto !important;

    }

    #wp-admin-bar ul li.align-right:hover ul {

    right: 0 !important;

    }

    #wp-admin-bar ul li:hover ul ul, #wp-admin-bar li.sfhover ul li ul {

    left: -999em !important;

    }

    #wp-admin-bar ul li ul li ul li:first-child {

    border-top: 1px solid #000 !important;

    margin-top:-2px !important;

    }

    /* Menu item css */

    #wp-admin-bar img.avatar {

    float: left !important;

    border: 2px solid #fff !important !important;

    margin-right: 8px !important;

    }

    #wp-admin-bar span.activity {

    display: block !important;

    color: #fff !important;

    margin-left: 34px !important;

    font-size: 10px !important;

    background: none !important;

    border: none !important;

    padding: 0 !important;

    }

    #wp-admin-bar li a:hover span.activity {

    color: #ccc !important;

    }

    #wp-admin-bar ul.author-list li {

    height: 55px !important;

    }

    #wp-admin-bar ul li#bp-admin-notifications_menu a span {

    background: #333 !important;

    padding: 0 6px !important;

    color: #fff !important;

    font-weight: bold !important;

    font-size: 0.8em !important;

    -moz-border-radius: 2px !important;

    -khtml-border-radius: 2px !important;

    -webkit-border-radius: 2px !important;

    margin-left: 2px !important;

    }

    Avatar of Burt Adsit
    Burt Adsit
    Participant

    @burtadsit

    sgrunt, works like a charm for me! Thanks. Can you post this in trac for everybody please? Just those two changes to those elements.

    http://trac.buddypress.org/newticket

    Avatar of Sgrunt
    Sgrunt
    Participant

    @sgrunt

    Avatar of ArmchairGeneral
    ArmchairGeneral
    Participant

    @armchairgeneral

    Even after these changes, I’m still unable to get my menu stable in FF3. Works flawlessly in IE and Safari though…

    Avatar of Sgrunt
    Sgrunt
    Participant

    @sgrunt

    hi General: as i said the hack solves the gap problem, not the flickering one. For solving it i presume we need a massive work on css and js of the admin bar.

    Avatar of ArmchairGeneral
    ArmchairGeneral
    Participant

    @armchairgeneral

    Actually I’m not talking about the flicker problem in IE but the gap problem in FF which was I was hopeful your CSS tweaks would fix. For me, they did nothing. Not sure if this is a FF2 vs FF3 issue (I use FF3).

    I notice that if I use the menu at testbp.org I get the same results. Once I move my mouse into the menu it almost always folds back up before I get to the bottom item in the list (eg. the log out link).

    Avatar of Sgrunt
    Sgrunt
    Participant

    @sgrunt

    i understand, maybe my english is not so good and so i try to better explain:

    for “1 pix gap problem” i mean that before this little fix, submenus were not correctly aligned, there were some visual gaps between some submenus and the admin bar.

    This is now solved for IE and FF2, i haven’t installed yet FF3.

    What i call “flickering” it is the “folding back”, and that i cannot resolve.

    Avatar of ArmchairGeneral
    ArmchairGeneral
    Participant

    @armchairgeneral

    Thanks. I’m following you now!

    Avatar of Matew
    ndrwld
    Participant

    @ndrwld

    I think I’ve found the solution:

    open the admin-bar.css in the bp-core/css folder

    Lines 68-72

    #wp-admin-bar ul li { /* all list items */

    padding: 0 !important;

    float: left !important;

    background: url( ../images/admin-menu-arrow.gif ) 88% 53% no-repeat;

    position: relative;

    You just need to delete “position: relative;”.

    That has solved the problem with FF3 – drop down menu disappearing.

    But still having problem with IE7 menu flickering, even after http://trac.buddypress.org/ticket/530 fix

    Avatar of Ngsonst
    ngsonst
    Participant

    @ngsonst

    Thanks ndrwld! Solved the FF3 Problem. Works perfect for me!

    Avatar of Michael Berra
    Michael Berra
    Participant

    @miguael

    Yep – super! Works – I hope this will be adapted in the release…

    Avatar of Arghagain
    arghagain
    Participant

    @arghagain

    For firefox 3 it’s working perfectly, thank you so much!!!

    Avatar of John James Jacoby
    John James Jacoby
    Keymaster

    @johnjamesjacoby

    If anyone is looking for a little bit of a sleeker Buddy Bar design, I got rid of the borders, rounded some corners, measured all the paddings and margins exactly, and changed the fonts in mine over at delsolownersclub.com. Go ahead and view the page source and steal the code from my admin-bar.css if you’d like. :)

Viewing 22 replies - 1 through 22 (of 22 total)

You must be logged in to reply to this topic.