You can see my issue here:
http://pmind.com/staging/123.html
I've tested this in Chrome, Safari, Firefox and Opera so I know it's not just an Internet Explorer wonky bug.
In the top right of the content, there are two text links, that are being hidden under the graphic. The <div> that contains the text links comes further down in the page, and my understanding was that that alone would make the z-index of the links such that they would be on top. But because that didn't do it, I set the z-index of the <div> containing the text links manually, which still didn't fix the problem.
One partial solution I found was to set the z-index of everything on the page but the <div> to -1. This however broke the roll-over functionality of the navigation items. I hate to ask something like this, and then it be some extremely simple issue I've just overlooked, but I'm at my wit's end.
Adding "position: relative;" to #top_links brings them to the front in Firefox. I haven't tested this in other browsers.
Related
Here is the link to the website I am talking about.
My problem is that when you navigate between the different pages in the main navigation, the main wrapper does not align on the different pages I have used. So if you are on the home page and you click on "WMH" in the main navigation bar the whole page jumps to the left by about 8px.
This creates a jitter between pages that my client really doesn't like. I used some padding-left and padding-right in css to align it correctly. Unfortunately when I get it pixel perfect in Firefox, it is wrong in Chrome and Safari. If I get it pixel perfect in chrome, it jitters in Firefox. This is very irritating. I don't want to have to write separate styles for Chrome, Firefox, IE, Safari unless it really is the only solution.
Thanks for your feedback.
Archie.
The browser scrollbar looks to be causing this. You can force a scrollbar to always appear which would solve the issue. Add this to your CSS:
html {overflow-y: scroll;}
You would also probably need to remove the padding that you tried to fix the problem with originally once the above style is in your CSS.
I have a menu that is dropping behind other elements - I have tried z-indexing on what I thought were the relevent parts, but to no avail -
Can anyone tell me what I need to do to make this dropdown be on top of other elements in IExplorer? Looks fine in FF, Chrome, Safari - thank you for your help
Beta testing site: http://bit.ly/Hb0RJz
Has to do with the stacking context of the elements. Since the two elements have different stacking contexts, z-index won't work. Take a look at this page.
Also answered here: IE7 dropdown menu appears behind image and CSS Dropdown menu hidden behind content IE7
I have a problem with our website at www.eat.vn. The site is fine in Firefox, Chrome, IE8 & IE9 and Safari, but in IE6 and IE7 we have a problem with a main design element.
Please see the attached image and you will understand that the stacking effect on the tabs is not what I wanted. I have tried to work around this bug, but can't manage to find a solution which does not mess up anything in the other browsers. Any help would be much appreciated!
I don't have IE6 or IE7 to hand to test this, so I'm shooting in the dark somewhat.
My guess is that the issue is related to the container element for the tabs (<div id="steps">). This has a style of float:left;, which I don't believe is necessary; it doesn't need to be floated since it doesn't have any other elements next to it.
However this float may be causing the IE6/7 bug; it looks as if this element has decided that it should only be as wide as one of the tabs inside it, which is then causing the tabs to wrap beneath each other.
I would therefore suggest taking the float:left away from this container element, and see if that helps.
(The tab elements inside it should still be floated, of course)
These are IE7 Only problems:
Navigation Problem
The active tab "jumps" whenever a user hovers on an inactive tab.
Screenshot:
http://dl.dropbox.com/u/6688069/navi.jpg
Search Filter Problem
I can't seem to get the height correct in IE7 without breaking the functionality.
Screenshot of what is should look like:
http://dl.dropbox.com/u/6688069/filter.jpg
Thanks!
What I'm seeing is that in IE7 this element:
<ul class="multiselect" id="multi-filtercountry"/>
is causing it those list items to expand... I also noticed that in Chrome, a real browser, none of those sidebar elements are expanding their parent. That means to me that you have one floating element in there somewhere, and the others aren't.
If you use Chrome's developer tools and mouse over the elements inside <span class="expanded"> you'll see that their position is determined to be up top, meaning they aren't flowing properly.
My best advice is to try to look at this not as an IE7 problem but a markup problem in general.
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