Black Bar Above the Menu

[mr108]

Hello,

I'm not sure in what section this belongs so I'm posting it here.

I'm testing and trouble shooting a new update of a WordPress theme. The old version of the theme is here (sample page):
http://terrybraunstein.com/events-news/
and the new version is here:
http://sg.terrybraunstein.com/events-news/
(with the child theme active). I'm running the new version through a child theme for the purpose of customization and I do have the proper URL in the child theme inserted which is:

@import url('http://www.sg.terrybraunstein.com/wp-content/themes/yin_and_yang/style.css');

As you see in the old version (AND in the updated NEW version as well) there is a sliding black bar above the menu that is showing a white space above the menu item when you hover on it.

The NEW version menu also has the same feature (see example here: http://108.atwebpages.com/ - this one is with the main theme active) but it only appears when I have the main theme active, but NOT when the child theme is active, even when the child theme is completely empty of any other codes except the @import line above!

I'm trying to find out what is the problem but I don't even know what code, what elements are creating that black bar above the menu. Has been trying to find it with Firebug extension on Firefox but did not succeed.

So please let me know what is creating that bar and if possible how to fix that while having the child theme active.

[jscheuer1]

Well there are plenty of codes in the child theme now. I bet that what has happened is that the file was cached or you only thought you emptied it. Try this, backup the child theme. Make sure to replace the live copy with a completely empty file. Go to the page you are testing on, empty the browser cache and refresh the page. If the problem still persists, it's a mystery. If not, there is some style(s) in the child theme that is messing it up.

[mr108]

Yes, I know that there are plenty of codes right now. I tested with empty child theme file before I posted my question, but OK, now I uploaded the empty style sheet file once again and it's the same thing that happens - I clear the cache, reload the page and it's a mystery again :-(

Actually I also tested by just reloading the style sheet file itself with this plugin: https://addons.mozilla.org/en-GB/firefox/addon/css-reloader/ and getting the same result.

The only instance that it shows that bar properly is when viewing the page in Safari on a Mac, then even with a full child theme it works OK - strange!

I left the empty one there so you can see yourself...

Any ideas how to solve the mystery???

[jscheuer1]

Still full, try navigating directly to the file to make sure it's empty.

[mr108]

Now it's empty, for sure, I double checked it again, and the bar behaves the same faulty way.

[jscheuer1]

Not empty now.

I realize it might have been, I've had to attend to other things, and it has been more than a few hours.

But if you are still under the impression that:

http://www.sg.terrybraunstein.com/wp-content/themes/yin_and_yang/style.css

is an empty file, I can assure that it is not.

If it was empty and you refilled it, please empty it again and leave it that way until I get back to you.

On the other hand, if you really thought it was still empty - there is an issue with that we need to resolve.

Let me know the latest - I understand you may be changing things more rapidly than I'm keeping up with. But it might still be the wrong file emptied or some other issue. As I say, let me know the latest, and if you please - PLEASE just empty it and leave it empty - or tell me you thought it still was empty. Either way, we can move forward from there. I hope you can appreciate my position - I cannot determine anything if you keep restoring the file, nor if you say it is empty when it is not. I need to see it empty in real time when I have a chance to observe.

[mr108]

Thanks John for your patience :)

Now I see where the discrepancy in our checking of the file is.

You have been checking the original, main, full yin_and_yang style sheet which I don't know how you got the URL for (the link is not there in the source page view):
http://www.sg.terrybraunstein.com/wp-content/themes/yin_and_yang/style.css
The main theme is not active now.

and I'm working on customisation using the child style sheet which is still empty and I'm not changing it until you check it:
http://sg.terrybraunstein.com/wp-content/themes/yin_and_yang_child/style.css
which you easily can get URL for example for from here: view-source:http://sg.terrybraunstein.com/events-news/
The child theme is active yin_and_yang_child and it is in this situation that the Bar is failing.

Marek

[jscheuer1]

I don't think you understand what @import means. It means that the url so designated is imported and all styles therein are utilized.

So for example, if I go to:

http://sg.terrybraunstein.com/wp-content/themes/yin_and_yang_child/style.css

I see and only see:


/*
Theme Name: Yin and Yang Child
Description: Yin and Yang Child Theme
Author: Marek Rozenberg
Author URI: marekr7 [at] gmail [dot] com
Template: yin_and_yang
Version: 1.2.1
*/

/* Theme customization starts here
========================================================================== */



@import url('http://www.sg.terrybraunstein.com/wp-content/themes/yin_and_yang/style.css');

But that means that all the styles in:

http://www.sg.terrybraunstein.com/wp-content/themes/yin_and_yang/style.css

will be applied. And believe me, there are a ton of styles in that file.

Or perhaps this is the problem -

If you are expecting all styles in the latter file to work as they might if that file was actually a <link rel="stylesheet" ..etc.> for the page, they might not. Image paths might not be correct. Though generally they will be.

So which is it? Is the problem that the file is not importing as expected, or that it is importing when you don't think it should be?

One further possibility (could be another/others) is that perhaps the styles in the latter file are already on the page, and now you are importing them again. Sometimes duplicate styles can bunch up and cause issues that would not arise if they were only applied once.

[mr108]

I don't think you understand what @import means. It means that the url so designated is imported and all styles therein are utilized.

Yes, that's exactly how I understand it and I know there are ton of styles in the imported file and I expect all of them to be imported AND to function in exactly the same way as when I would deactivate the child theme and activate the main theme. When I do that, activate the main theme, the Bar behaves properly. When I activate the child theme with empty style file just containing the import of the main styles, the Bar does not behave properly - that's what is strange!


If you are expecting all styles in the latter file to work as they might if that file was actually a <link rel="stylesheet" ..etc.> for the page, they might not. Image paths might not be correct. Though generally they will be.

There are no absolute paths in the styles specified so it should not matter.


So which is it? Is the problem that the file is not importing as expected, or that it is importing when you don't think it should be?

I know that the file should be importing and should do it exactly so that all the features work as when the original, main styles are applied but it does not. Why?
But also I'm not sure what code is actually creating that Bar. Are they css styles contained in the styles.css file or any other code??


One further possibility (could be another/others) is that perhaps the styles in the latter file are already on the page, and now you are importing them again. Sometimes duplicate styles can bunch up and cause issues that would not arise if they were only applied once.

But then clearing the cache and reloading the page or reloading the styles.css file should take care of it, right?

[jscheuer1]

I don't think it's the stylesheet, not that one at least. I can remove your @import one (child) from the head of the page (which of course really messes up the look of the page), and then add the actual sheet to the page (which restores everything), the bar still doesn't have that hover indicator action - that's what we are talking about, right? Also, I checked with the demo you gave that does work with the new version. The stylesheet is identical.

Now there aren't too many possibilities. Either there is a conflict with some other style somewhere, or a required style is missing from somewhere else than that sheet, or a script is conflicting, or missing. Just possibly an image might be missing from a folder somewhere.

Those are about it. I will do some testing, removing things one at a time to see if anything fixes it. With scripts, that might be impossible for me. In any case, you can try as well.

It would also be good to see a page that has only this menu on it, and only the resources required for the menu to work - nothing else. That way we could see if the problem page at least has every thing it needs for the menu or not.

[jscheuer1]

OK, I think it's the fonts. Not sure where they are yet. But here's my evidence:

If I take the working new page, copy it and put it on my local host server, I get this error:


Font from origin 'http://108.atwebpages.com' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access.

And the menu thing doesn't work any more.

If I look at your non-working page, I see this error:


Font from origin 'http://www.sg.terrybraunstein.com' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://sg.terrybraunstein.com' is therefore not allowed access.

Needless to say, there's no such error on the working old version either.

I'm pretty sure if I could navigate to:

http://www.sg.terrybraunstein.com/events-news/

It would work, but when I try, I see there's some sort of mod rewrite or something, and it takes me to:

http://sg.terrybraunstein.com/events-news/

again, where the thing doesn't work.

I'm not sure where the font code is and how it got that www. put into it, but that should be fixed, and might be the problem.

OK, now I see. It's coming from the @import line:


@import url('http://www.sg.terrybraunstein.com/wp-content/themes/yin_and_yang/style.css');

should be:


@import url('http://sg.terrybraunstein.com/wp-content/themes/yin_and_yang/style.css');

There could also still be other problems.

[mr108]

WOW! What a detective work!




should be:


@import url('http://sg.terrybraunstein.com/wp-content/themes/yin_and_yang/style.css');


Yes, that's must have been the cause since the Bar works now in all browsers. :)




There could also still be other problems.

Yes, there are and I was hoping that fixing the Bar problem would also fix the other problem that I posted in a separate thread here:
http://www.dynamicdrive.com/forums/showthread.php?80298-Portfolio-page-faulty-display