Hi there, i’m customizing a wrodpress theme (used bp template pack) to work with buddypress, everything until now was fine but now i came accross some css that works fine in Firefox but in Opera, Chrome and IE don’t.

You’ll need to login because the site is under maintenance mode, feel free to use those:

Username: sitepointforums
Password: pCx9Ho5WkIyz

For example if you check this page http://tinyurl.com/667r8kz in FireFox, this is what you’ll get: http://dl.dropbox.com/u/21335807/infirefox.png

And this is what you get if you visit the same page with Opera, Chrome and IE:

Opera: http://dl.dropbox.com/u/21335807/INOPERA.jpg (The groups are not even clickable here, it seems that there is something else on top of it)

IE: http://dl.dropbox.com/u/21335807/INIE.jpg

Chrome: http://dl.dropbox.com/u/21335807/INChrome.jpg (The groups are not even clickable here, it seems that there is something else on top of it)

It seems that i’m calling the divs wrongly through the stylesheet because in firefox works but in the other browsers it even use wrong bg gor the menu)

The same problem exists also in this pages :

http://tinyurl.com/6hc2nez

http://tinyurl.com/665zbnf

http://tinyurl.com/665zbnf

http://tinyurl.com/69plmav

Any help or advice would be more than welcome, thanks in advance.
-Stelios

[@mercime Participant 13 years, 9 months ago]

@steliodj quick glance at your theme, for cross-browser compatibility, when you float an element, add width to the element as well. e.g.

`div.item-list-tabs ul li {
float: left;
list-style: none outside none !important;
margin-right: 10px;
width: 300px;
}

div#content form#forums-search-form.dir-form form#forums-directory-form.dir-form div.item-list-tabs ul li#forums-order-select.last {
display: block;
float: right;
margin-right: 35px;
margin-top: 3px;
position: relative;
width: 200px;
}`

As for the hover background showing up in statc links, add/define background in regular links for item-nav e.g. #ffffff

[@gunju2221 Participant 13 years, 9 months ago]

@mercime, remove the Username and Psw from the above post. On any circumstance, the super admin Username And Psw should never be posted out in the open.

Your site is vulnerable to attacks, and everything else.

[@mercime Participant 13 years, 9 months ago]

@gunju2221 no worries, checked wp-admin. it’s a test user account, not Site/Super Admin one.

[@gunju2221 Participant 13 years, 9 months ago]

checked wp-admin. it’s a test user account, not Site/Super Admin one.

How? Maintenance Mode prohibits access to everything unless it’s super admin.

[@pcwriter Participant 13 years, 9 months ago]

@gunju2221

Nope. You can allow access to any user role with WP Maintenance Mode plugin.

[@gunju2221 Participant 13 years, 9 months ago]

Nope. You can allow access to any user role with WP Maintenance Mode plugin.

Ok, well I don’t use that plugin.

Learn something new everyday!

[@mercime Participant 13 years, 9 months ago]

@gunju2221 True, we all do

[@steliodj Member 13 years, 9 months ago]

Hi there, the user i provided here is just a test subscriber.

I will add width wherever i have float, and i will let you know how it goes.

Can you please explain what you mean with the hover bg ?

Thank you for helping out!!
Stelios

[@steliodj Member 13 years, 9 months ago]

Hi one more time mercime…i notice something weird, when i’m changing something in css(this happens only to those pages that i have the issue) and inspect with firebug i can see the change is there, but when i use inspect element from chrom or from opera i don’t see the change and it evens grabs css styling information from another line of the stylesheet.

For example this is what i get(this correct) in firefox when inspecting a specific element:

`
div#content form#members-directory-form.dir-form div.item-list-tabs {
background: url(“../../themes/theme/images/members_directory_menu_bg.png”) no-repeat scroll left top transparent;
border: medium none;
clear: both;
overflow: hidden;
padding-bottom: 17px;
padding-top: 15px;
width: 102%;
}
`
And this is what what i get when inspecting the same element in chrome:

`
div.item-list-tabs {
border: none;
overflow: hidden;
clear: both;
background: url(../../themes/theme/images/buddypress_nav_bg.png) top left no-repeat;
padding-top: 15px;
width: 102%;
padding-bottom: 17px;
}
`

if i remove `form#members-directory-form.dir-form` and keep only `div#content div.item-list-tabs` from my style it works also in chrome but it breaks something else that needs to use another background image and has the same id `div.item-list-tabs`

Please advice

[@steliodj Member 13 years, 9 months ago]

Found another weird issue…..if you visit blogs directory: http://tinyurl.com/428t4wd with Chrome you get 2 options (All Blogs and My Blogs) http://dl.dropbox.com/u/21335807/blogsChrome.jpg and in FireFox only 1 ( All Blogs) http://dl.dropbox.com/u/21335807/blogsFireFox.jpg

Any help? Advice?

[@vusis Participant 13 years, 8 months ago]

I”m experiencing a similar wierd problem:
i’m using the latest BP + WP stack.

in firefox: firebug says the `

` … tag encapsulates everything. i.e. directory results etc
on the other hand. i.e. and chrome say that the dir-form tag is only the form header (u know where it says “Groups Directory” for example.)
i checked the actual code and I discovered that i.e + chrome are correct! for some reason firefox is not picking up the closing tag for dir-form. and so it uses the very last `

` on the page.

that messes up the CSS completely.
Please check and verify that my eyes are not playing tricks on me. thanx