Wordpress Themes - WP Forum at BFA - [SOLVED] Drop-down menu underlaps featured images in the post & a possible solution.

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)

- Montezuma Theme (http://forum.bytesforall.com/forumdisplay.php?f=53)

- - [SOLVED] Drop-down menu underlaps featured images in the post & a possible solution. (http://forum.bytesforall.com/showthread.php?t=22776)

[SOLVED] Drop-down menu underlaps featured images in the post & a possible solution.

Hello,

I had the problem that the menu was overlapping the featured image in the post.
I tried to follow many suggestion I found in this forum about modifying the CSS of the menu but without success.
I think I found the solution myself:
Look in the posts.css for .post-thumb img.img_grayscale and add to it the z-index property.

Code:

.post-thumb img.img_grayscale { 

        filter:                                         grayscale(100%); /* Current draft standard */

        -ms-filter:                         grayscale(100%); 

        -o-filter:                                 grayscale(100%); /* opera */ 

        filter:                                         url("%tpldir%/images/gray-filter.svg#grayscale"); /* Firefox */

        filter:                                         gray; /* IE */

        -webkit-filter:                 grayscale(1); /* Old WebKit */

        -webkit-filter:                 grayscale(100%); /* New WebKit */

          z-index:                0 !important; /*Added by me*/

}

It works for me. To be on the safe side I used the !important clause...I'll try to remove it and find out if it is the same.
So far I have not experienced any side effect. ;)

Kind regards,

StockTrader / Marco

be careful with the z-index. If the menu has a lower z-index than the featured image, you won't be able to click on the menu item....

Hello,

so far so good...I'm able to click on the menu but I noticed that only in Firefox I do not see the greyed featured image at all.
This is not happening in Chrome & Safari ( i need to try IE) where all seems to work fine.
It was a while that I was not using Firefox so I need to investigate if the issue is really caused by the z-index or other problems...
Do you have a better solution to propose ?
Kind regards & thanks.
Marco - StockTrader

I reply to myself :-)
It seems that the problem I found about the grayscale featured image behaving incorrectly (they does not appear) in Firefox is not related to the z-index modification I did but it is related to this thread: http://forum.bytesforall.com/showthr...ht=gray-filter
Do you know if there are other solution for that issue? The thread is not closed.
Kind regards,
Marco - StockTrader

What version of montezuma?
What is the url?

Hello,

the Montezuma version is the 1.2.3.
The url of the site is http://www.readitalians.org
To temporarily patch the issue and make the site still ''enjoyable'' from Firefox 31.0 (Mac version) I amended the posts.css in this way:

Code:

...

.post-thumb img.img_grayscale { 

        filter:                                         grayscale(100%); /* Current draft standard */

        -ms-filter:                         grayscale(100%); 

        -o-filter:                                 grayscale(100%); /* opera */ 

        /*filter:                                         url("%tpldir%/images/gray-filter.svg#grayscale"); /* Firefox */ /*MSZ*/

        filter:                                         gray; /* IE */

        -webkit-filter:                 grayscale(1); /* Old WebKit */

        -webkit-filter:                 grayscale(100%); /* New WebKit */

          z-index:                0 !important; /*MSZ*/

}

...

If I remove the comment ( I can do it if you want to have a look to the issue) from the line that includes the svg file only on Firefox (I use 31.0 for now) I do not see anymore the featured image until I hoover on them.
Everything is ok on the other browsers.
In the thread http://forum.bytesforall.com/showthread.php?t=18948 I can see that the user troyp was able to find a solution modifying the svg file but then said that Firefox broke the filter again..

Kind regards & thanks,
Marco - StockTrader

Ahhh now I see what you are talking about. When you said

Quote:

I had the problem that the menu was overlapping the featured image in the post.

I did not understand - what you meant was the dropdown list extended past the top of the featured BUT the featured image sat on top of the menu at that point.

In other words, the menu was hidden behind the feeatured image.

I just applied the code from your first post and it works fine for me on a mac in FireFox 31.0

try shutting off any plugins you have to see if there is a conflict.

Hello,

I fiddled a bit around and was not working for me..so looking on some forums I finally found a fix for the filter.
I amended it in this way and now it works for me as well:

Code:

.post-thumb img.img_grayscale { 

    filter: grayscale(100%); /* Current draft standard */

    -ms-filter: grayscale(100%); 

    -o-filter: grayscale(100%); /* opera */ 

    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */

    filter: gray; /* IE */

    -webkit-filter: grayscale(1); /* Old WebKit */

    -webkit-filter: grayscale(100%); /* New WebKit */

    z-index: 0 !important; /*MSZ*/

}

Kind regards & thanks!
Marco MSZ - StockTrader

I was having the same issue and this solved it. Thank you.