Page - http://blu-eye.com/index.html - contains suckerfish menu which is displaying correctly on the rest of the site, except for this page. The menu items are hidden behind the content below.
The content below it contains a javascript slider with image and text. I've tried changing the z-indexes on majority of elements, but still having no luck.
It only occurs in IE (6 and 7).
Please help!
The drama you have is the use of relative positioned elements, which reset the z-order context on < IE8.
Specifically on div#header, remove the position relative. then on div#cat_528463_divs > ul > li set a z-index (of 1000 for eg). This will fix the nav issue from tucking in under the JS slider – however it will screw up the look of the rest of the top section, because they are absolutely positioning the logo and some other images. So that is going to need to be rebuilt.
IE has a slightly different stacking order of elements so just setting something with a different z-index will not necessarily move it above.
Taking your starting point as your wrapper, add position:relative to it and then work down into your HTML. If you imagine that at your start point, then you need to get your menu div and your slider div to at least the same 'depth'.
You might find adding position:relative to #content as well might help.
You can then change the z-indexes.
Add z-index:100 to the submenu's li's
#nav_528463 li ul li {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent none repeat scroll 0 0;
float:none;
margin:0;
padding:0;
z-index:100
}
I found this bit of jQuery very handy for your problem:
http://www.vancelucas.com/blog/fixing-ie7-z-index-issues-with-jquery/
Related
I am working on the following demo which uses snap.js and chart.js on my website
DEMO JSFIDDLE
I added some JavaScript to display a content from chart.js while you scroll, but seems like it is in some trouble with the following style:
Line 10 - CSS: overflow: auto;
Which hides the content. If I delete this style it works perfectly:
DEMO2 JSFIDDLE (without overflow)
Should I create a #canvas style to let me display it in front of the other content? Without deleting the properties of snap.js?
The problem is that overflow:auto is hiding your absolute positioned element. This happens because absolutely positioned elements are essentially taken out of the DOM flow and so because the parent container has nothing to give it height, your absolute positioned element is hidden.
What you'd be better doing is not using absolute positioning, or giving the container a specific height. That or floating the element left and using a clearfix (my favorite is the :after variation).
I can't for the life of me seem to figure out why I can't move the song labels in this player featured in the "samples" tab in the middle of the page up so they look more slimmer and balanced. I need someone that is more familar with css to figure out what is causing the space between the top and the text. I'm sure it's an extremely easy fix.
http://www.remedyaudio.com
If you give your <img> a style="float:left" it will remove the top height.
The float:left will align the image to the left, allowing the <span> to align from the image top, instead of the bottom..
Pure CSS
#nice2Tab ul li img
{
float:left;
}
jQuery
$('#nice2Tab ul li img').each(function (){
$(this).css('float','left');
});
I'm trying to teach myself how to implement a loading scroll into my scroll, but I am having issues with the div being called. The content is not loading underneath the scroll, but instead pops up on the side and looks the part as seen here when scrolling down.
The code in question is
if(y >= contentHeight-30){
movelist.innerHTML +='<div class ="newData"><center>hey look at me</center></div>';
}
I want to append content to the bottom of the scroll before the bottom is reached. Any insight or tips would be extremely helpful and appreciated
Many errors in the code.
To answer your question:
You need to add float:left; to your div.NewData. Check this fiddle
Second: To add comments in CSS you need to use /* */ and not <!-- -->.
Commenting with <!-- --> is not recognized by CSS so all that's underneath will not be applied.
Third: Ids are unique. All your <li> have the same id. Use a class instead.
Add clear: left; and float: left; to the class on the div you are adding it, then add additional stylings to make it fit the width.
I am using the following solution to scroll very long menus in my dropdowns:
http://css-tricks.com/long-dropdowns-solution/
Is there any way to stop the menu's from scrolling and becoming any shorter once the last menu item has appeared? At the moment, they keep shrinking even when the menu has fully loaded. I would like to avoid that if possible.
I think your trying to say your actual menu list items are shrinking? I'm not exactly sure if your saying the whole menu itself shrinks or just the items itself.
Try giving the (Li)'s a height and see if that keeps them consistent. Example.
nav li:hover li {height:3em;}
or
nav li:hover ul a {height:3em;}
Let me know if that helps!
How to achive that following menu act normaly like dropline, but last sublevel to be dropdown instead dropline?
Tnx
To make sure I understand the question, are you wanting the sub-drop-downs to display in a vertical list instead of horizontally? If so, try adding this to your CSS:
.droplinebar > ul > li > ul > li > ul > li
{
float: left;
clear: both;
}
ADDENDUM (to get the menus lined up properly):
I haven't tested this, but see if changing line 16 to the following does the trick:
$subul.css({left:$curobj.position().left, top:this._dimensions.h})
You may need to do something like the above on $targetul as well.
2nd ADDENDUM
It's a bit dirty, but you can always give the sub-ul's a unique id, and them use css to line then up manually.
http://jsfiddle.net/DxpMJ/11/
In that example, I gave a unique id to the JavaScript > Traveling 4 menu, and manually set the margin-left and overrode the width with the !important trick (which you should look up if you're not familiar with it - very useful when javascript plugins are setting CSS styles without your knowledge). If you don't mind manually adding css rules for all of the menus you need to be vertical, I think this would work.