CSS - Trouble With Css :hover Menu In Ie 7

Topic

Trouble With Css :hover Menu In Ie 7

Hi, I've been at this for some time now. Currently building a site (development address: mainline.divsharp.com). Menu (left) was Javascript, its now CSS. Works fine in Chrome, Firefox and IE 8, but IE 7 is acting extremely strange. You can see the desired effect if you use a recent version of one of those browsers.

When I pull it up in IE 7 on the homepage, I can't hover over the popup like I can in the other, more compliant browsers. It either hides the pane as soon as the mouse gets off the main menu link, or when the mouse leaves the picture once its over the pane.

If I then click on, say, "Market Watch" and try to view the menu on an interior page, its even more erratic. I'm about at the end of what I know or can look up how to do here..

If I can get the mouse over some part of the popout pane, it seems that if its over the content area of a div and not padding or margins, it stays open. For example, over the picture or over the grey area to the right... This might suggest something to someone..

Unfortunately, the markup is clogged at best and my style is all over the place. Site is built in Wordpress and is a custom theme. Hopefully this will help:

In those stylesheets, there isn't much discernible organization, but the pieces relating to this problem are near the id's labeled menu_bg in the middle and at the very bottom is where the hover effects are. The popout is achieved like this:

Trouble With Css :hover Menu In Ie 7

Hi, I've been at this for some time now. Currently building a site (development address: mainline.divsharp.com). Menu (left) was Javascript, its now CSS. Works fine in Chrome, Firefox and IE 8, but IE 7 is acting extremely strange. You can see the desired effect if you use a recent version of one of those browsers.

When I pull it up in IE 7 on the homepage, I can't hover over the popup like I can in the other, more compliant browsers. It either hides the pane as soon as the mouse gets off the main menu link, or when the mouse leaves the picture once its over the pane.

If I then click on, say, "Market Watch" and try to view the menu on an interior page, its even more erratic. I'm about at the end of what I know or can look up how to do here..

If I can get the mouse over some part of the popout pane, it seems that if its over the content area of a div and not padding or margins, it stays open. For example, over the picture or over the grey area to the right... This might suggest something to someone..

Unfortunately, the markup is clogged at best and my style is all over the place. Site is built in Wordpress and is a custom theme. Hopefully this will help:

In those stylesheets, there isn't much discernible organization, but the pieces relating to this problem are near the id's labeled menu_bg in the middle and at the very bottom is where the hover effects are. The popout is achieved like this:

Trouble With Hover In Css

I seem to have some problems with the hover pseudo-class in IE6. I have tried many combinations but cannot get the color to change on a hover. The other attributes seem to work ok, such as background color, cursor, etc. When I place the COLOR attribute in, IE6 just seems to ignore it. here are the significant snippets of the CSS:

This is at the very top of the CSS external..note that the color that is desired on hover is #0000FF or blue:

What now happens, is that each menu item displays in RED, but when you hover over it, the text does not change color to the BLUE that I want. It just remains RED. Yet, when I add an attribute such as "background-color: green" to that HOVER directive, it works fine, it just wont change the text.

Is this one of those Microsoft IE problems, or am I doing something wrong??

Thanks, in advance for your help!

Kork

:hover Compatibility Trouble With Ie & Netscape 7.2

Here is a test page that I made up to show my problem, CSS Testpage. Viewing this page in IE, or Netscape will show you the differences in the two browsers.

The setup: I am using images as links, and when you mouse over them I want the border to swap colors, extremely simple and plain action. I am just trying to get it too work in all browsers (current ones).

What happens is the code that works in IE, for some reason doesn't surround the image correctly in Netscape or Opera (or Mozilla Firefox). It's like 3 pixels lower or something or the image is bumped up 3 pixels. It's strange.

Viewing the testpage in IE and then in Netscape should show you what I am trying to explain and failing badly at.

bpmann

Menu Problems In Ie: Menu Contents Shift Down On Hover

I am a photographer for a website and I know very little about anything other than basic html. With the website lady gone on a trip around the world for a year, I ended up being the person to attempt to modify our side menu to show an additional column of subcategories. I tinkered around with the code we had and I managed to get this to work in Firefox, however in IE7 the contents of the menu shift down a few pixels when you hover over a category.

To view my problem, go to scannerparts.biz

I've messed around with this for a few days and everything has become a big confusing mess so I have no choice but give in and ask for help. I thank anyone in advance for any assistance you can offer.

Menu Hover Help??

When you hover over Contact Us/info the menu that drops down by the way i'm using the pixo plugin for that the words end up being seen through the tab.. and the news thing that scrolls that is using the plugin Announcement and vertical scroll news How do you fix that? This is a problem in Firefox, IE etc..

Menu Hover Problem

Hello,
I'm trying to create a menu for my NGO to replace the one they have currently but I'm running into some problems. The highlight color in this photo is one - how do you get around this issue? I'd like to keep the colors the same, if possible, but I recognize that might not be acceptable.

Hover Problem With Menu In Ie

Hoping for a bit of help with a menu I've made. Basically it's a tabbed menu with another line underneath for an explanation of what you'll find if you click on the tab. The explanation shows up when you hover over the appropriate tab. I also have an 'active' class that highlights whatever section you're on and shows that explanation as default.

It all works fine until you're halfway through the menu, and the explanations won't show for any menu item previous to the active one. I know this is something to do with z-index, but I can't for the life of me figure out where to put it. Can anyone help? This is only happening in IE.

Css Hover Menu Problem

I had to make a hover menu that was full CSS, and i couldn't make it work in IE, because of the old issue of IE not supporting :hover for anything else but the a tag.
So i modded some example i found on the internet that was using js for ie, attached through behaviours, in the css file.
The url is this.
The menu works fine in mozilla but it has a problem in IE, and i think it's css, not js.
If you hover over the Products button and then over one of the items that appear, the item right under it will get a few pixels higer, which causes the whole menu to move down as you movewr over those ites.
And it's annoying.
Can some one give me a hint please?
I've tried all sorts of things, adding empty level 3 menus to the items that don't need it, but still nothing...
Thanks in advance...

Menu Hover Problem With Ie 7

My nav menu works 100% in IE8, FF, Opera and Chrome... but it's doing something weird in IE7 that can kindof affect it's functionality but I have no idea really where to look for the problem.

It's most easily seen on two pages. The front page, he
http://www.skullcrow.com

...and on the product pages he
http://www.skullcrow.com/proddisp.php?id=skull01

On the main page when you hover over the menu and get the drop downs, if you move your cursor so you're also over the text div in the background, the menu goes away. You can tell easiest when viewing the "Community" and "Help" lists. On the product display page is the same thing over a larger area. Anytime you move the cursor to a part of the menu that's covering the text or (only some of?) the background div, it disappears. The menu is obviously on top, and this problem does not occur in basically any other browser.

The main reason I need to fix this is that these menus will probably only get bigger and the navbar will become barely unusable in IE7 after a while.

I don't exactly what code I would need to post for this, I was just hoping for some general information that could point me in the right direction.

Thanks for any help.

Css Menu In Ie6 Not Functioanl Due To :hover?

Okay so the site is pawnsuppliesdirect.com it works flawlessly on mozilla, and IE7, but on IE6 the spacing is messed up and the hover links don't show the flyout part of the menu.
Below is the css for the menu and it does validate:

Trying To Use Images On Hover In Css Menu

I'm trying to set up my (very basic, horizontal, no dropdown) CSS menu so that when a user hovers over the menu link items, the formatting changes and they basically get an image on mouseover (nothing more than changing the text colour and adding a curve on the left hand side, so it just looks like a selected tab).

It kind of works but instead of the whole image showing it only shows in the area where the menu link text is, so instead of covering the height of the menu bar and a length I specify, it's just covering the actual word e.g "Home" in each case on the menu.

I can't seem to get it so that on rollover the whole image shows. I've tried setting it so that the links have a background image (just a plain block from the nav bar) but that doesn't work.

My CSS is:

/* this is the bar where the menu is located */
.menuholder {
width:1001px;
height:2.19em;
background-color:#0f2763;
}

Menu Trouble - Please Help

I got the menu the working the way I want, except I can't get the last two on the menu to be bold becasue they are like Multimodal Corridor Planning, a category with articles under it.

Here is the link:
http://www.greatstreetsstlouis.net/...d=32&Itemid=204

I just need to get Site Planning to be bold, and then Choices & Guidelines. I have to use CSS as well, becasue the menu is done through Joomla and is dynamic. I need those last two titles to behave the same way when clicked on like Multimodal Corridor Planning does. Thank you.

Css Drop Down Hover Nav Menu Issue

I am having an issue with IE7 (imagine that) with a css drop down nav menu. On IE8 and Chrome the menus work flawlessly but in on IE7 the menu is behind the pictures on the page. The page is located at www.philadler.com/newlayout2.php.

At first I thought it may be a z-index problem but the nav bar is set to 1000 and 900 depending on the menu and the thumbnails are set to 100.

Horizontal Menu With Whatever:hover Problems

I'm trying two "new to me" things at once here. First, I'm creating a horizontal drop down menu for the first time. Along with that, I'm using the whatever:hover method with the IE behavior fix instead of the conditional comment tables method (which is semantically incorrect).

I've got two problems in IE that can be viewed he
http://www.windrivers-gsp.com/test/index.php

Basically, it looks like my #container div has a higher z-index than my menu drop downs, despite stating otherwise in the CSS. Also, the drop down <ul>'s are not directly under the header <ul>, but rather are about 50% off right.

In FF everything looks good, of course. Any ideas?

Menu Rounded Hover And Active

I am working on my HW problem with CSS, it's about rounded and angular corners in menu (active or hover).

I can't post picture (not permitted), but probably you know what i mean, rounded corners are created with image and angular are created with padding by CSS.
Angular is ready, now i have to do rounded, which is more hard.

I have 3 pictures, left rounded side, middle and right rounded side. But i really dont know how to add it to a.active or a:hover elements. Middle picture will be repeated depending on text long, so i can't do 1 picture.

Default Image Above Menu Item On Hover

I was wondering what I would have to do to get an image to be above an in-line horizontal menu when it is is hovered upon.

Here is my css so far, right now on hover I have it changing color with text-shadow. I would like to keep that along with the image above. I have seen some tutorials using about using spans but nothing worked. Thanks in advance!

Drop Down Menu Problem With Hover State?

Hi there, im trying to make a website for a friend and im having a little diffuculty with my drop down menu

the site is here
bbk.ac.uk/~fsando01/watma/index.html

when you hover over the link entitled services in the global nav bar and proceed to hover down to the first submenu link which is abs repair, youll notice the background image i set as hover state for the services link disapears, i want it to stay there like they have got on marks and spencers website...

I've managed to get it to work properly in IE and Firefox, but not in Netscape. The problem (rather, the symptom) in Netscape is that when one hovers an anchor that's inside a line item (<li><a ...></a></li>), the submenues don't pop up, but when the line item that contains the anchor is hovered, the menu pops up but won't stay up as the mouse pointer is moved from the line item to the submenu's line item. Again, this works fine in IE and Firefox.