Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Page & Category Menu Bars (http://forum.bytesforall.com/forumdisplay.php?f=10)
-   -   Menu issues with IE (http://forum.bytesforall.com/showthread.php?t=17498)

tsheridan May 7, 2012 02:59 PM

Menu issues with IE
 
I have 2 IE problems that I need help with please. In 7, 8, & 9 there is a white background behind the active menu item. In 7 & 9, the submenu is disappearing upon hovering over it.

Also, I was wondering how I can position the sub menu? I would like to move it over to the right a bit, but margin or padding aren't giving me any results.

URL is www.blackberrymorganhorses.com.

Atahualpa 3.7.6, WP 3.3.2

Thank you!

tsheridan May 9, 2012 07:26 AM

I'm wondering if this could have something to do with updating Wordpress and Atahualpa to the latest versions? I have drop down menus on other sites that haven't yet been updated and they have no problem with the menus in IE.

Anyone?

lmilesw May 9, 2012 08:45 PM

Instead of calling it the active menu item, call it the current menu item. There are selectors for the current menu item you can see with Firebug. You should try playing with them.

tsheridan May 10, 2012 08:23 AM

So a:active should be a:current? I have never heard of this. Why is it working on other sites then when I am using a:active?
I tried it for this instance, but it didn't change anything, and in fact the rollover links in the drop down menu didn't change color.

The only place I see any use of the term 'current', is in the sub menu, and the problem I'm having with current or active menu items is in the main menu. How would this effect the drop down menu disappearing when it's hovered on?

Can you possibly help me out and be a little more specific about which direction I need to go here, because I have no clue. I have tried playing around with this a little bit, but nothing is working, and that's because I have no idea what to use, and I'm sure my code is not correct.

Any additional guidance you can give me would be greatly appreciated, because I am beyond stuck here.

Thank you.

lmilesw May 10, 2012 09:19 AM

a:active refers to a link element when it is clicked. There is no a:current. In your case it looks like you would use SOMETHING LIKE in the CSS Inserts box.
HTML Code:

#rmenu2 .current-menu-item, #rmenu2 .current_page_item {
    background-color: transparent !important;
}

BTW - The differences in the way the different browsers handle CSS can, in some situations, cause confusion.

tsheridan May 10, 2012 09:58 AM

Larry, I'm not sure which of my problems your solution was intended to potentially solve, but it didn't solve either. I don't have a transparent background issue in IE on the submenu, only on the main menu. The submenu will not stay active when moused over in IE, therefore no one would be able to click on the menu items in the submenu. Is this related to the active link setting?

I understand that different browsers handle CSS differently, what I don't understand is why this same code works on other sites in IE, but not on this one. The only difference so far is that this site has the most recent versions of wordpress and atahualpa. Is there a way to roll back to a previous version of atahualpa for troubleshooting purposes?

lmilesw May 10, 2012 11:05 AM

I see what you mean about losing menu focus in IE for sub-menus. This usually just a CSS thing but can take awhile to figure out.

As far as rolling back to a previous version you could use the manual "update" method as outlined here. Then you can switch back and forth between versions.

As always it is recommended to do a backup first.

tsheridan May 10, 2012 04:29 PM

Okay, I've determined that Atahualpa is not the culprit. Here is another site using the same versions of WP and Atahualpa, and the same menu CSS and it displays fine in IE. - www.tmpranchrodeo.org

I have compared the code from this site, tried taking out the background image and just using a color instead, no go. The only way I can get the drop down menu to display properly is to add the background image to the main menu items. This also got rid of the white behind the active menu item. This isn't a good fix however, because then the default hover and parent colors from the ATA Menu settings show through, and these cannot be deleted from this area.

I guess I'm a little stunned that you haven't run into this problem yet and don't seem to have a solution for it. I am usually pretty good at figuring a lot of things out, but IE hacks are not my specialty and it seems that lately Atahualpa is having a lot more compatibility issues with IE because I am having more and more issues that I've not had in the past.

I've created a workaround for now using color in the default hover and parent menu settings, with one minor problem.....the border around the submenu is not showing completely and I can't figure out what additional CSS or HTML will fix this. Any tips there? This problem displays in Firefox as well, I have not even bothered with other browsers yet.

Thank you.

juggledad May 10, 2012 06:32 PM

what do you have the ato->Style & configure LAYOUT->IE Document Type set to?

tsheridan May 10, 2012 06:52 PM

It is set to None. This must be the default, correct, as I've never changed this and I checked on several of my other sites, and they are also set to None.

juggledad May 10, 2012 07:14 PM

try playing with the setting and see if it effects anything, just a thought. I've only got ie8 so I can't check anything for you, but the default use to be ie8 I believe

tsheridan May 14, 2012 12:44 PM

Hi Juggledad,
This setting didn't have any effect at all, in any browser.

I took out all the custom CSS/HTML related to this and started over. As soon as I put in background: none !important; (or transparent) in the page menu item, the sub menu disappears upon hovering in IE.

Here's the current code I have:

/* ================================================ */
/* Page menu background */
/* ================================================ */
div#menu1 {
height: 40px;
margin-top:-40px;
margin-left: 60px;
background: none !important;
}

/* ================================================ */
/* Page Menu item's background and border */
/* ================================================ */
div#menu1 ul.rMenu {
background: none !important;
}

/* ================================================ */
/* Page Menu item */
/* ================================================ */
ul.rMenu li a:link,
ul.rMenu li {
color: #3a2812 !important;
padding-right: 20px;
}

ul.rMenu li a:hover,
ul.rMenu li a:active {
color: #880000 !important;
padding-right: 20px;
}

/* ================================================== */
/* Sub Menu item */
/* ================================================== */

.sub-menu {
border: 1px solid #3a2812;
}

li.rMenu-expand li a:link,
li.rMenu-expand li a:visited {
color: #3a2812 !important;
}
li.rMenu-expand li a:hover,
li.rMenu-expand li a:active {
color: #880000 !important;
}

What I don't understand is why all browsers are ignoring the background: none !important; that is in div#menu1 and div#menu1 ul.rMenu and are using the color that I have placed in the regular ATO menu options. This always works for me, and in fact is working on other sites that I have. The sub menu is using the code from the parent menu, and none of the overrides for background color/image in the submenu are working, in any browser. I had an image in there prior, and it doesn't show, only the color from the ATO menu options.

Also, in the sub menu, only the left and ride border are showing, not the top and bottom. Again, this is something I do regularly without problems, so what is the issue here? I don't like sub menus just hanging in space without a border.

Thanks again.

juggledad May 14, 2012 12:57 PM

The browsers are NOT ignoring , they are doing what you told them to do, just not what you want them to do.

I think it has to do with the margin-top: -40px; which may be causing IE issues. Take that out and see if the sub menur reappear.

tsheridan May 14, 2012 02:06 PM

Yes, you were right. That was it.

This leaves me with a menu placement problem however now, in that the very top of the center column background is part of the header image, because that's the only way I could think to do it, and I happened across another Atahualpa site that was using this technique.

It also leaves me with a background color on the active menu item in IE. I can probably live with this since the color is so close, if I can get the menu placement correct.

Do you have any other suggestions as to how I could move the menu up and place it over the header perhaps?


All times are GMT -6. The time now is 10:07 AM.

Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.