I have a dropdown menu that behaves fine everywhere (even Edge!) except for IE11.
The dropdown menu has:
position: absolute;
left: auto;
top: --nav-height;
I can see that in IE11 it aligns itself to the right of the box border of Root A, which seems to indicate that it's not really absolutely positioning itself...
The code is from this codepen but I can't get it to work at all on IE11
All other browsers:
IE11
Try to add position:relative to the containing elements of your submenu element, in your case i think it contented in the element showing the Root A text, than you can apply left:0px to the submenu element.
It is important to understand that a value of left:0px is set equal to the left of it's parent element, not the page.
And setting position:relative on a the parent element sets the bounds of an absolutely positioned element equal to the parent element.
Related
I need to make a Bootstrap menu with dropdown-toggle elements inside a slimScroll. The menu needs to be vertical (I achieve that through custom CSS; bare-bones concept fiddle is at: http://jsfiddle.net/HkAAn/) and have submenus which are wider than the container. Since I am using slimScroll, the entire left part needs to be wrapped in an element with position: relative and overflow: hidden. Of course, this crops the submenus. Is there any way for the submenus to not be cropped, while retaining the wrapper with position: relative and overflow: hidden?
In order to alleviate the cropping, you must get the UL element that is your menu outside of the element that has "overflow: hidden".
I have a <div> that shows on :hover of another div. In IE & Firefox, the entire <div> shows when hovered, but in Safari, part of the hovered div is hidden behind an adjacent div. I have overflow: visible set on the hovered div, but the problem persists.
Open this fiddle in both Firefox and Safari and you'll see the issue in Safari.
http://jsfiddle.net/emturano/TRGm9/
z-index will not have an effect on an element if its position is set to static (as it is by default). Set position:relative on the container and then position:relative; on the items inside to make sure that the hovered element is frontmost. You'll need to make positioning tweaks to make sure everything lines up correctly.
Ok got this strange issue where i have a absolute positioned div with inside a header. Then there's a nav tag with a margin and for some the absolute positioned div instead of sitting top left of header it positioned where the nav starts. So if the nav has 100px top margin the div starts 100px down.
But the strange thing is if I apply a border to the header the absolute positioned div acts as how i would expect.
I'm using html5 boilerplate styles, this i suppose could be the issue.
It's easier to explain if you view an example. The below links are stripped down version and have identical mark up apart from one where the header has a border and the other it doesn't.
Example with the problem:
http://bennyb.co.uk/test/no-border.html
Example with the issue fixed when the border is applied
http://bennyb.co.uk/test/border.html
Thanks
B
EDIT:
Ok thought this was actually just related to nav but seems it's the same if a div
Apply
overflow: hidden;
to the header.
it is the opposite of this Keeping overflow:hidden really hidden because i need that a child element gets visible although its out of the parent element.
it is a slideshow:
the parent-div (for example 500x250px) has width, height, position:relative (needs this) and left: 15px, overflow:hidden
there are some child-divs with the images (+text) included and a prev/next-div.
the prev/next div have left resp. right -15px. looks quite cool on screen...
but because of the overflow:hidden (plus position:relative) from the parent the half of prev/next-div isn't visible
http://imageshack.us/photo/my-images/857/lookactually.png/
http://imageshack.us/photo/my-images/33/shouldlook.png/
A child of an overflow:hidden element can never be visible outside it's parents' box(these are the rules)
to get around this you could place the navigation outside the overflow:hidden element or you could just increase the height of the parent div to accommodate the navigation.
I have a web page with a CSS dropdown navigation menu. My issue is that when I hover over the top of the menu to make the dropdowns appear, everything else in the page moves to make space for the dropdown instead of the dropdown moving over everything else. My navigation links are in a div element with the id "header" and my CSS for that element looks like this:
#header {
width: 100%;
z-index: 100;
position: relative;
}
None of the elements in the page that are moving are inside the header and non of them have a z-index specified. Can anyone tell me what I'm doing wrong?
You need to add position: absolute to the submenus that appear when you hover over a menu button.
See here for a tutorial: http://www.htmldog.com/articles/suckerfish/dropdowns/
Also relevant: http://css-tricks.com/791-absolute-positioning-inside-relative-positioning/
Change position to absolute and make the position of the parent container relative.
Or, in the opposite direction, create another container within #header and stuff everything inside it.
The key point is that the inner element needs to be absolutely positioned, but in relation to its parent. Therefore position parent relatively.