Hello,

First off, thank you for a great theme!

I am having an issue with a site I am developing. It is not online anywhere yet, but I have a screen shot that shows the problem. On Safari and Firefox on Mac I am experiencing a dead spot in the top left of each menu block that firebug shows as "block-icon pngfix". I am using the module "menu block" to spit a menu into two blocks. If just a single block is presented this is not a problem only when splitting to multiple blocks. In the case of the second block it renders the "M4" menu completely unclickable. Any idea on the best way to fix this issue? Why is a fix for IE showing up on Safari and Firefox?

Thanks
Mark

CommentFileSizeAuthor
#8 acquia_marina.zip13.61 KBjeremycaldwell
#3 screenshot.png21.28 KBheander
pngfix.jpg102.39 KBparanormals

Comments

paranormals’s picture

paranormals commented

A few interesting notes about the problem. The order of the menu blocks within a region seems to make no difference. The problem persists if the menu blocks are in different regions.

jeremycaldwell’s picture

jeremycaldwell commented
Assigned: Unassigned » jeremycaldwell

Hi there, this is normal as the div loads in all blocks and then is used when the Skinr style for the icons is applied to it. If the div is rendering your links unclickable can you provide me a link to your site so I can check it out? I might be able to play with the z-index of the title and the icon to get it to work correctly but will have to see it to do so.

The pngfix is included along with the icon since IE requires a pngfix for icons with transparent backgrounds. So the class is included there for that purpose.

heander’s picture

heander commented
StatusFileSize
new screenshot.png21.28 KB

I have the same issue with the tagadelic block, also if I enable a png-icon it covers the same area but does not move the title. Screenshot attached.

paranormals’s picture

paranormals commented

Hello eternalistic - Thanks for checking out my issue. Sorry for my delay in response, I was traveling. I ended up using the "green rounded title" block style to offset my text to the right for a quick fix. I have set up a sample page that is using the old styling though so you can see the problem. I left the link title text white as it now is on my other pages, I can theme it some other color if you think it would help in diagnosing the problem. In the "sample 1" block you can easily tell the area affected as you cant see the title when you roll over it until you hit the part over the E that is a link again. In the block titled "sample menu" the title is not a link but the dead spot from the icon affects the first half of the "Sample 2" link.
https://www.medu.wright.edu/sample

Hope that all makes sense.

Thanks for your time.
Mark

paranormals’s picture

paranormals commented

heander, It looks like you need to use the icon style with one of the other block styles such as "Green rounded title background with white text" to get the text to float right.

jeremycaldwell’s picture

jeremycaldwell commented

@paranormals, thanks for setting up the test page for me, really appreciate it. I took a look at it in FireBug and have some CSS that will work for you.

Please add this bit of code to your theme's local.css file and let me know how it goes:

h2.block-title a:link, 
h2.block-title a:visited {
  position: relative;
  z-index: 101;
}

That should give the block titles with links a higher z-index than the icon so it appears on top of that div when used. I might need to rework how the icons are loaded too so may be a change coming soon once I have a chance to look at this a bit closer.

paranormals’s picture

paranormals commented

@eternalistic, Thanks for your help, no problem on setting up the page. This code appears to fix the block title link but does not fix the first item in the menu block that is overlapped by the dead space also. In both the first and second blocks the "sam" of the first sample links is still a problem. Rollover the "Sample 2" link from left to right as an example of this.

jeremycaldwell’s picture

jeremycaldwell commented
StatusFileSize
new acquia_marina.zip13.61 KB

I took a good look at the icon overlapping issue this afternoon and ended up rewriting how these are used on the page. Same method with adding the icons but now you shouldn't see any issues with the icons or lack of icons overlapping the content and block title of the block. Please give these attached files a try and be sure to clear your site cache as I've updated the Skinr classes in the theme's .info file.

paranormals’s picture

paranormals commented

Thanks. I will work on testing these on a site in the next few days and get back with you on the results.

paranormals’s picture

paranormals commented

I have tested this on a dev site and everything appears to work well including the fixes. I will migrate this code to production in the next couple days and make sure it works with the example link I posted previously. Thanks :)

jeremycaldwell’s picture

jeremycaldwell commented
Status: Active » Reviewed & tested by the community

Excellent! Thanks for testing this out before it goes into the next release of the theme. Now that we know it works it will be included.

skov’s picture

skov commented

The content div in blocks is also covered, and should be included in the code:

h2.block-title a:link, 
h2.block-title a:visited,
div.block div.content {
  position: relative;
  z-index: 101;
}
jeremycaldwell’s picture

jeremycaldwell commented
Status: Reviewed & tested by the community » Fixed

Changes have been made and the fix is in the latest release of the theme.

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.