I haven't touched anything, so I think it may have been a chrome update that happened recently. But my menu, which is div with nested ul's, randomly loads invisible.
If you open developer tools (F12) and mess with any of the css, it automatically reappears. I can add a style that is completely invalid css, just make stuff up, and the menu will re-appear.
Can anyone help me find what is causing this?
I'm on Chrome 33.0.1750.146 m
My guess is that your menu CSS or JS is improperly setting the heights of all the parent ul elements to height: 0. Upon hover, they expand.
Take my comment above to heart and restructure your menu with a single top-level ul, and make sure you're only hiding ul ul on load.
You might also try setting z-index on those top-level ul elements instead of their children:
#navbar ul {
position: relative;
z-index: 1;
}
This is your cuplrit. In css mc_grid3.css:
There is :
.container:after, .header:after, .header-bottom:after, .navbar:after, .main:after, .content:after, .content div:after, .subcontent:after, .subcontent div:after, .footer:after {
content: ".";
display: block;
height: 0; // Remove this
clear: both;
visibility: hidden; // Remove this too
}
Or remove .header-bottom:after from the above css rule.
Thanks for the input guys. I understand some of my html is bad, and I will take your advice to clean it up. However like I said, everything worked fine until recently w/ no code changes.
I decided to rip out the entire menu and replace it w/ modern html/css and in doing so, I discovered the problem. I was using font 'FuturaMedium' as my menu font, and the latest update to Chrome 33.0.1750.146 introduced some bugs with fonts. So even my brand new css menu wouldn't work with that font.
For now I pulled the font and I will figure out what I need to do to fix it. Again, thanks.
Link to bug
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 working on my navigation bar, and when I first started working on it, I figured out the display: none / display: blocked thing to make sure it worked, and then set everything to display so I could see what CSS changes were taking effect without having to go and re-hover over everything. Once I had things the way I wanted them, I went to go turn the display "off" but found it suddenly wasn't working. I managed to go back and re-tweak most of the levels, but my last level wont work, even though the same basic syntax works elsewhere in my CSS. What's going on?
Here's a JSfiddle:
enter code herehttp://jsfiddle.net/yu1p1fo6/
The two classes were incorrectly named drop-down instead of drop-menu
You have used wrong class name in that part. It is not drop-down, it is drop-menu:
http://jsfiddle.net/yu1p1fo6/2/
.sub-menu li .drop-menu {
display: none;
}
.sub-menu li:hover .drop-menu {
display: block;
}
I am going to have to link to an external website as I am having trouble reproducing this issue in JSFiddle.
For some reason accessing my page with an URL fragment corresponding to an ID that exists on the page appears to pull up certain areas of the document, the behaviour is not reproduced with a non-existant ID. There is no JavaScript on the page which could be causing this behaviour.
This behaviour is consistent in the following (so is unlikely to be a browser bug):
Google Chrome 31
Firefox 21
Internet explorer 8
Live view (accessed: 19/12/13) Issue resolved - see graphic below:
This is the page as it should look: http://sixplusfour.co.uk/encyclopedia/
This is the page with the named anchor: http://sixplusfour.co.uk/encyclopedia/#pagelist
The error is shown side by side in the following image:
Does anyone know what could be causing this behaviour?
My guess is that the :after pseudo-class of #pagelist is causing this. I have no clue why this is happening but the display doesn't seems to load properly.
This pseudo-class seems like a quick fix. You might want to delete this pseudo-class and fix the real problem. Try to add a overflow: hidden to your wrapper so its floated contents keeps in the flow:
.col-group {
margin-left: -1em;
margin-right: -1em;
zoom: 1;
overflow: hidden; /*new line*/
}
I can not test it on reload, but this should work.
Update
The real problem is probably because the the base-line is shifting based on its font. It contains a dot as content. Now this is still not clear why this happens when redirecting. However i suggest to you a empty content for this:
.col-group:after {
display: block;
visibility: hidden;
height: 0;
clear: both;
content: ""; /* removed dot */
}
This should work without modifieng too much.
If you set overflow: auto; on #container you start to see why the problem occurs. The contents of #container are actually taller than their container. When the URL fragment is in place, the browsers are scrolling within #container to reach it.
(I haven't yet figured out exactly why, but hopefully this will point you in the right direction.)
It is probably linked to a :focus or :hover selector.
I see this code in your style.css :
.pagenav li a:focus {
outline: #114d74 solid 1px;
outline-offset: -1px;
padding-left: 0.5em;
}
Couldn't this be a different value of padding or outline that makes things change?
Listen; I have read and read but couldn't find an answer that fit my problem.
I'm using Fancy Box on my website http://www.houdi.se/video.shtml but have the problem that the Fancy Box appears UNDER the menu when a video-link is clicked (its Responsive).
Viewed in a browser there's no problem since it fill up. BUT when narrowing the browser the menu problem arises. Also viewing the top video in an iPad.
I'm using Adaption-plugin from ProjectSeven for the website. It's a Responsive CSS layout: http://projectseven.com/products/templates/pagepacks/adaptations/index.htm
That plugin also uses Project Seven's Pop Menu Magic 2 for the menu.
I'm not a code wizard but I have tried to increase z-index but it didn't work OR I have not increased the rift one?
Have now spent several hours working with this problem and happy for all help I can get. Just tell me what code you want to see (or have to see).
Remove z-index from this div containing the menu:
<div id="p7PMM_1" class="p7PMMh19" style="position: relative; z-index: 999999;">
The reason that the menu is on top of fancybox is because you're including the script 7PMMscrips.js on the page which manipulates the z-index and position properties of the main menu.
An ease way of solving this would be to just add the following css to your main css file:
#p7PMM_1 {
position: static !important.
}
That would solve the issue but i would not recommend it as using !important is a really bad practice. You can read more about why here: What are the implications of using "!important" in CSS?.
If i where you I would look into removing this script and create the main nav with just pure css instead.
Im no expert but looking at your css file for the navigation bar you don't have any z-index so you could try adding it.
your fancy box css file has several and the lowest is z-index: 8010; so setting you navigation to below that should resolve it.
Try using this code:
.navigation {
background-color: #000000;
background-image: url(images/chameleon.jpg);
background-repeat: no-repeat;
background-position: 0px -60px;
position: relative;
z-index: 90;
}
I am using the following html to position anchors under a fixed menu:
<a style="position: relative; top: -150px;" name="services"></a>
This works fine in Firefox but ie, chrome and safari all load the anchors to a slightly different position, obscuring the text 'under' the fixed menu.
Does anyone have any ideas of how I could go about resolving this issue.
wip site is http://mattangel.com.au
Many thanks in advance,
Matt
When I make sites like this, I like to make sure that each "page" has a similar class, but different id. When styling the class, make sure you give the following attributes.
.page {
overflow: hidden;
margin-bottom: 1000px;
}
Adding the margin-bottom will prevent you from seeing the extra pages.
I also noticed that you are using jQuery for the slide to effect, I am not sure why you are using the styling for the a name. Just do the following:
<h1 class="page_title" id="services"><a name="services">Services</a></h1>
And make sure to wrap everything up in the page DIV.