I have a master page which contains asp menu control which is dropping down values on hover,which is working fine.But my issue is if the page is having an asp:dropdown list control,the menu is hides behind the dropdownlist select.
what i tried is i put astyle to asp:menu 'DynamicMenuStyle' tag
.DynamicMenu {
z-index: 10000;
}
also provide style to 'DynamicMenuItemStyle' tag
.DynamicMenuItem {
z-index:10000;
}
.DynamicMenuItem:hover {
z-index:10000;
}
a.DynamicMenuItem:hover {
z-index:10000;
}
a.DynamicMenuItem {
z-index:10000;
}
Still the issue is there...any idea?
Try adding z-index to your asp:dropdown lesser than the DynamicMenu. I would suggest you to use the firebug add-on in firefox and try changing the z-index and other css attributes to fix. Hope this helps...
you see the menu because not load inner page.
after inner page loadeed upper side and your menu is back side.
1- you must back your menu to upper side. your css is work.
2- inner page set z-inex=0 and send it back side :)
Related
Today I encountered a weird experience in my site LiveGreen
When I hover on the Menu Services, the dropdown goes underneath the image section below that. I tried every possible way like positioning and z-index ing and all kind, and googled a lot, am not bad with HTML and CSS still, it is testing me.
This theme is purchased, so cant post the code. you can check it from the website itself.
Please Help me.
Remove the z-index property on your .main class.
.main {
z-index: 1; /* this is causing your problems */
}
It's fairly difficult to pull off because there are so few unique classes to key off of. The root cause of the issue for you is that the element with a z-index that is higher than your menu applies that z-index higher up the DOM tree which makes it render on top. The best I could come up with is to apply the following, provided that the #aq-block-8801-5 block is always and will always be the nav menu container.
#aq-block-8801-5 {
position: relative;
z-index: 2;
}
I'm sitting here scratching my head. There's a problem which in itself is stupid, but I'm unable to fix it! (Yeah you can say I'm stupider than the problem).
Anyway, I have website in which the header menu works on all the pages except on shows pages (there is a group of (Approx 10 pages) which lists different show details).
I have gone through each and every line to detect the problem, but no luck! Even the error console doesn't help me in any way.
Guidance would be appreciated.
Link where the header works :- www.amiteshgrover.com/shows.php
Link where the header doesn't work :- Just go to the shows page (the link mentioned above) and click on any show. Then try to hover on the menu bar, nothing happens? Exactly!
Your #maincanvas is covering the entire header menu.
Change the CSS to:
#mainCanvas {
margin-top:60px;
padding-top:20px;
clear:both;
position:static;
min-width:940px;
z-index:100;
margin-left:125px;
}
The problem is that #main-canvas is in front of your menu, so when you try to click the menu, you're actually clicking #main-canvas.
#main-canvas has z-index: 100 and .nav has no z-index.
To fix it, add position: relative; z-index: 101; to .nav or change your padding-top from #main-canvas to margin-top, this way the #main-canvas won't be at the same position as your menu are.
It seems like sub_styles.css is loaded on all other pages but this one, this style file is what gives the menu it's looks and since it's not loaded on those pages, you see the problematic menu.
Hi I'm using SquareSpace V6, with the Momentum template.
in this template there's an option to have the style of your gallery "full-bleed" or simply centered, but this setting is global and it applies to all the galleries on the website.
I'm trying to create some CSS code that will override the default and allow me to have a "full-bleed" gallery in the home page and the home page only, all the other ones will be left centered.
I've been inspecting the code with Chrome and I thought I had it, but nothing changes once I add my code to that specific page:
#collection-type-gallery { gallery-style:Full Bleed; }
Does anyone has experience with SquareSpace?
not exactly the answer I'm looking for.. but I found a workaround.
I created an empty page and added a background (with a snippet of code) to only that page.
(it only works if you want 1 single fullscreen image)
#collection-51b4ef7de4b0_use_your_own_here_62dc3410aaf3
{
background-image:url(http://static.squarespace.com/static/../background2.jpg);
background-repeat:no-repeat;
background-size:cover;
background-position:center;
}
You can call out the homepage specifically by using:
.homepage { }
or you can use a source code inspector and find the unique id as a class on the element and call out any individual page like so:
.collection-51b4ef7de4b062dc3410aaf3 { }
I have this page: http://www.problemio.com which has a black bar on top which has search and a dropdown menu. That looks reasonably ok.
But then I have another page like this: http://www.problemio.com/category.php?category_id=1 which has those two elements, but for some reason, the search appears on the top left of the bar.
How can I make these elements appear as they do on the home page of problemio.com ?
Thanks!
You have it absolutely positioned over your search box. Fix the absolute positioning and you should be fine.
you don't have you main_styles.css on the interior page, which has this style in it:
#search {
float: right;
margin-top: 7px;
width: 14em;
}
In your page which displays the search box as you desire [problemio.com] the div has the css value 'float: right'. This is the value you need on the other page.
div#search {
float: right
}
I just answered this in the comments of your other question, posted 5 min ago.
Your problem is that the home page div with class nav takes values from main_index.css and the other page takes values from main.css.
There are some inconsistencies between the two which might lead to the problem. Firebug or devtools will help you debug these kind of problems.
We are having a problem with our facebook like/send button, if you open: http://apps.facebook.com/bymii-test/products.php?pageid=216605071714962&prd_id=35&prd_name=Coalesce: - click facebook send, the box is behind the facebook sidebar. Is there any way to: change the z-index - or to make the window pop up on the left?
I FINALLY FOUND THE ANSWER!! 1 1/2 Hours searching later.. just enter this code into your CSS file:
.fb_edge_widget_with_comment span.fb_edge_comment_widget {
top: 15px !important;
left: -250px !important;}
Hope this is what you were looking for, because it was exactly what I was looking for!
Make sure the parent/container element has css value "overflow:visible". It happens when "overflow:hidden". Hope this helps.
The way for it to popup up and over all of it is to make the like button work in XFBML. The iframe implementation is limited and if you change the height and width of it to just fit the button, the window will appear hidden.
I found this to work:
/* the below allows the fb:like iframe to show entirely instead of getting cropped off */
.fb-like iframe {
max-width: inherit;
}
/* the same issue with the "send" button */
.fb-send iframe {
max-width: inherit;
}
As you can see, it's asking those elements to "inherit" the width attributes of its parent elements.
Hope that helps.
I modified Shane's excellent solution to focus specifically on z-index:
css:
.fb_edge_widget_with_comment span.fb_edge_comment_widget
{
z-index:8 !important;
}
The above css code shows the Facebook widget above everything else, without having to relocate or "overflow" anything.
This is a common problem all developers are facing. The popup has no way to detect its relative position on a page or in an iframe.
To get the desired results i always install my like, send buttons on the left side of my page.