This one's got me stumped. Usually with a little CSS juggling here and there I am able to solve most IE7 CSS bugs, but not this one!
Head on over to the example page and view it in IE7, you will soon see that when mousing over the (vertical) drop down menu on the left of the page, it opens the sub menu WAY over to the right. I have pulled every last hair out!
If it helps, the menu was made with 'Sothink DHTML Menu 9'
As always, all replies are much appreciated.
Sothink is not the greatest solution, try this:
http://www.alistapart.com/articles/horizdropdowns/
Related
I'm working on a site and I have a big css problem; my menus are 'Swinging' in a very weird manner when hovered. The css / html code on its own works well, but once I implement the slider within the real site it behaves differently. Its probably a css issue, but also to note is my site is built on a Responsive theme. Anyone with an idea of how I can fix this please lete kme know. Thanks. Here is the link to the site.
When you say "swinging" do you mean the effect where they start at the top-left then grow diagonally to the bottom-right? That's jQuery's ".show" event firing. Try replacing that with ".slideToggle".
Unfortunately the Wordpress template you're using is quite messy so it's hard to troubleshoot.
I have a (css) drop down menu that keeps disappearing before you can select anything from it.
I have wracked my brain searching the web for answers... and in an article on YOUR site I found a hint -- about z-index.. I readily admit to being quite a NOOB when it comes to CSS and I tried and tried to implement the suggestion from your other article, but to no avail.
Here is my site: http://www.customernationonline.com/
The problem is with the drop down for "How We Help".. I would be hugely grateful if you could take a look and help me out here.
The (eloquent) fix was hard to find, (it took me a while to figure out, at any rate!), but it's very easy:
On #pillmenu2, remove position: absolute.
I'd say the mouse out on the menu item is closing the dropdown
sfEls[i].onmouseout=function() {
39 this.className=this.className.replace(new RegExp(" sfhover\b"), "");
40 }
perhaps close the menu item only with an onclick command either when a sub menu item is selected or on the body. better still look at the jquery implementations and save yourself a headache.
I have installed the Boldy theme from site5 on one of my projects and have run into one major problem.
When browsing in internet explorer (8 or lower), the top dropdown menu gets displayed behind some other elements (main content slider, H1's etc.). I've tried everything from changing all the z-index's to fixed positions, with no luck.
You can view the problem by visiting site5's Boldy demo page http://wordpress.site5.net/boldy/ and hovering over the top menu's blog tab in IE.
I have asked site5 to look into it, they are aware of the problem, but have failed to find any solutions.
Ok originale solution here - Swiss credit website. This works but uses a complicated z-index solution.
Here is very simple and improved solution here - Jeyjoo stock image gallery
This works in IE6+, firefox, opera, safari and chrome
Solution
The HTML
<div id="container_page" class="container_page">
<div id="container_header" class="container_header">
NAV BAR GOES HERE
</div>
<div id="container_body" class="container_body">
...body text...
</div>
</div>
The CSS
#container_page #container_header {position:relative;z-index:2;}
#container_page #container_body {position:relative;}
why it works
You have to tell IE how the two divs relate to one another.
(not my script) Pretty sure i may have found the answer to this on here, but i cant find it. Either way, this worked great for me...
$(function() {
var zIndexNumber = 1000;
$('ul').each(function() {
$(this).css('zIndex', zIndexNumber);
zIndexNumber -= 10;
});
});
just make sure your css includes position and z-index so the script can access the values.
kudos to whomever came up with this - saved me a whole lot of trouble.
If I'm not mistaken, IE is not properly inheriting the z-index from the top-nav for the children li items in the menu. That is why the Photos with a z-index of 60 are covering it up. You can do two things here.
Eliminate the photo z-index.
Directly specify a z-index of 100 for the sub list, not just the top-nav list.
I see you still havent solved this on.
I found a solution here on a submenu - Chkredit - swiss credit website
Works in all versions of IE and is light and 100% CSS (no javascript).
Basically the problem was that IE does not use z-index correctly.
Check the z-index's in the CSS code. Yo will need to put a z-index -1 on the items your menu is hiding behind.
I working on exactly the same problem for my own image gallery right now (go to "top image" page) - jeyjoo image gallery
Can someone tell me why the CSS dropdown menu (rollover "Software Solutions") works here :
http://deltaassocc.web704.discountasp.net/temp/page-works.html
but not here:
http://deltaassocc.web704.discountasp.net/temp/page.html
This has been driving me crazy! I'm using Firefox 3.0.10. Please help..
There is an awful lot of knowledge built into a CSS menu to cover different browser versions and so on. My advice is don't do this yourself. Get a prebuilt one like suckerfish (or one of the many variants).
Alternatively you can use a Javascript based solution like superfish as suggested here.
Note: if you need to support IE6 then you'll be using Javascript for that browser anyway as it doesn't support the :hover pseudo-element on anything other than anchors.
Because you are loosing focus on the parent element. On the second one, there are more elements below and when the dropdown extends it goes under the content container - you move your mouse down and it's over the text content container, not over the menu container no more.
Install web developer toolbar and outline box elements, you will see that.
Google for jquery dropdown menu or other javascript-framework based solutions, they'll work fine and cross-browser, unless you're doing it just for self-education.
The pages look the same in IE8 and Firefox. The menu drops down but doesn't look at that great. If your using JQUERY SuperFish is a really good cs-menu.
If you look at the menu for this site: http://writershore.com/ltlaw/
The menu looks great in Firefox, Chrome, etc, but in IE7 the menu drop downs don't break through the nested DIVs.
Is this an overflow issue? A z-index issue? I've tried variations of both and doesn't fix the result in IE.
Thanks for any ideas!
The HTML code is broken. For starters you have two <html> tags. This will make the page render in quirks mode, which makes a dramatic difference for IE.
Fix the obvious errors in the html, then validate the page to see if there are any more problems in the code.
IF form elements or boxes are showing over top of the DIVs such as calendar popups it's not a bug in the javascript - it's a bug/feature of browsers. See this explanation