RC-1 – admin-bar-menu acting weird?
-
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
-
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 ?
Hmmmm – it’s the same… Strange… (but thanks for the tipp – should have thought of it myself…). So, nobody except me has that issue…?
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.
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.
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.
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.
I have the same. Any suggestions for a fix would be much appreciated.
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.
sgrunt, the solution to the gap problem would be very welcome!
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;
}
sgrunt, works like a charm for me! Thanks. Can you post this in trac for everybody please? Just those two changes to those elements.
oki, done here: https://trac.buddypress.org/ticket/530
Even after these changes, I’m still unable to get my menu stable in FF3. Works flawlessly in IE and Safari though…
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.
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).
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.
Thanks. I’m following you now!
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 https://trac.buddypress.org/ticket/530 fix
Thanks ndrwld! Solved the FF3 Problem. Works perfect for me!
Yep – super! Works – I hope this will be adapted in the release…
For firefox 3 it’s working perfectly, thank you so much!!!
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.
- The topic ‘RC-1 – admin-bar-menu acting weird?’ is closed to new replies.