I have a navigation menu generated by Wordpress, meaning I have pretty much no control on how it is output.
I have used css to style it the way I want with on-hover submenus, but it looks off in IE7. It does not have any problems in other browsers.
The main menu may seem off even in browsers that work because I am using #fontface on my website but did not include in the jsFiddle. The main problem is the gaps between the submenu items.
I have tried vertically aligning the submenu li and a, but it either made it worse or didn't fix the problem.
I have replicated the problem here: [link removed]
If I add
#menu-header .sub-menu a { height: 100%; }
It fixes the vertical gap problem, but the items are no longer the same width.
You can try the following :
#menu-header .sub-menu a { zoom: 1; }
This will remove the gap, but items will be the same width as the inner content.
I had the same problem some time ago. What I did was, create a container div inside the li. so that longer text can wrap, and set a static width. You can even use jQuery to adjust the widths of each dropdown dynamically, but that a whole different story.
Few references :
http://work.arounds.org/issue/20/removing-gaps-between-list-items-containing-anchor/
http://www.456bereastreet.com/archive/200610/closing_the_gap_between_list_items_in_ie/
http://www.belafontecode.com/3-ways-to-get-rid-of-spaces-in-list-item-navigation-in-ie6/
Related
I have a horizontal navigation menu that breaks upon browser window resize as illustrated here:
https://jsfiddle.net/7oLjwh90/2/
Now the culprit here is:
#adminNav ul li { float: left;
But as soon as i remove float and do display: inline-block for example the dropdown stop working. It becomes a pure mess.
Tried setting display to inline-block and also recreated a new simple horizontal menu and that behaves as expected but cant get this dropdown to work without float.
https://jsfiddle.net/7oLjwh90/2/
Same menu as on https://jsfiddle.net/7oLjwh90/2/ but it doesnt break upon browser window resize. The list items should not stack on top of each other.
Not sure what exactly you wish to achieve. If removing the float property is your problem, you can try using flexbox(here is some good information on the matter -https://www.w3schools.com/css/css3_flexbox.asp). If this doesn't work for you, specify your question further. Hope this is useful.
I'm new to this forum so hello to all.
I'm working on a WordPress website theme called tesseract. I am new to WordPress so have limited experience working with it.
The problem I'm experience is with the menu at the top of the page. If you visit www.avoinvents.co.uk and take a look you'll see that the categories don't sit on the same line. If I remove one of the categories the page looks much nicer and neater. All categories are necessary so I could not delete any.
Could anyone on here suggest how I make the necessary changes to fix the menu.
Many thanks
Here's the CSS that I changed in my browser to make the menu appear in all one line:
#masthead {
padding-top: 10px;
padding-bottom: 10px;
}
#site-banner-left {
width: 100%;
}
The main problem was that the site-banner-left CSS definition had a width of 60%, causing the text to wrap around its border, so I changed its width to 100% and added the padding to make the navigation area a little bigger. If this messes with other parts of the theme, try making the text size of the site-banner-left definition smaller instead of changing its width. Hope this helps.
You have limited the available width because an ancestor element, #site-banner-left, has a width of 60%. Increase this value or remove this rule to allow the entire menu to fit naturally.
Additionally, since the menu items are inline-block elements, you can force them to be on one line by setting the parent element's white-space to nowrap:
.nav-menu {
white-space: nowrap;
}
I'm using jqueryui's menu feature, and the submenu overlaps other elements on the page. The problem is when I select the menu item which brings up the submenu, the submenu is displayed beneath the other elements.
I'm not sure how menu is to be configured, or if I have to override some jqueryui css elements, in order to get this to display as expected (over top of the other page elements).
The problem can be seen with the Tools menu at http://jsbin.com/hexuw/2/
Sorry the code is more complex than is necessary to show the minimal problem, but the menu call can be seen just a few lines down in the javascript file.
Thinking that this is a stacking problem I tried setting the navigation element z-index to a high number using the .ontop class, but that didn't help.
Add the line z-index:9999; under the selector .ui-menu
The CSS code will be
/* put navigation to the left (jquery ui) */
.ui-menu {
width: 10%;
float: left;
z-index:9999;
}
JS Bin Live demo
This problem is only showing up in IE7. Other browsers and IE8 and above work fine.
I am using a sprite map with an ul for my side navigation. There is a fly-out submenu for one of the li elements which also uses a sprite map with an ul for downloading various PDFs.
If you look at the image that I've attached, the submenu is appearing in the correct location, but it's pushing down everything below it. (The word "Music" should appear directly below the word "Menu".)
I have tried various fixes using a display: inline; element and position: static; element, but my attempts have failed. Would really appreciate some help on this. The website address is: http://www.graysonmain.com/
You could use a fixed height, height: 58px and display: inline-block for li#nav_02.
Have you looked into overlays with CSS? I'm very new to this so I, personally, can't give you a concrete answer, but it might be possible to set the positioning of the submenus and toggle the visibility with an onClick() command.
I have the following website: http://dev.driz.co.uk/phase/about.php
If you view the website in IE7 you will see that the drop-down menu in the top left does not appear above the main content area. This is because of the stupid IE7 z-index bug, however the normal fix of making the parent element have a high index to make it fix the child would not work in this instance as I need the parent header to sit under the main content...
Any ideas on how to fix this based on the layout structure I have? I've tried most of the IE fixes on the net, including a jquery solution that resets the z-indexes in a loop, but none of them have solved the problem.
You need to give your header a z-index less than your nav element.
IE7 is a pain with z-index, you need to habe a structure like this.
Header - z-index:2
Content - z-index:3
Nav - z-index:4
Along those lines, sorry I can't be more help.
I've found that when having problems with z-index in IE, that setting the elements you want to be affected by the z-index to have a relative position.
i.e.
#block {
z-index: 1;
position: relative;
}