The following example is a very simplified version of my top navigation.
http://jsfiddle.net/AEqxT/
If you look in most browsers, you should see two green list items next to eachother, with a blue box or 'badge' sitting on top, bridging the gap between the two. In IE7 however, the blue box always falls below the second li. I've tried all manner of fixes to this. Setting a higher z-index to the parent ul didn't change anything, and if I use position: relative; on the 'badge', it loses its width and height.
Is there an obvious fix to this that I am missing?
You'll probably struggle with your badge in with the LI, take it out of the list and you should be ok, with a bit of messing with position:
http://jsfiddle.net/AEqxT/2/
If you absolutely have to have it in with the LI, then you'll probably have to have some JS to make this work
This is a reported IE7 bug.
You could fix it with the JS solution posted to this question, or you could manually set different z-indexes to all <li> element, ordered from high to low values:
http://jsfiddle.net/AEqxT/3/
Related
I have a drop down navigation that works perfectly when positioned via a left CSS property.
http://jsfiddle.net/durilai/nmME4/1/
You can see that the dropdown adjusts to the width of the content, however I would like to position right. When I do the width of the drop down will not adjust to the content. You can see this behavior at the fiddle below.
http://jsfiddle.net/durilai/cTSJt/2/
Any help is appreciated, also any knowledge into what is causing this behavior is also appreciated.
The right: 100px in ul seems to be setting a width of 100px.
If that does not need to be positioned absolute, then use float: right; and use margin-right: 100px; instead.
JSFiddle: http://jsfiddle.net/cTSJt/12/
Ok so basically, from what I can see, the issue was being caused by using the element (in this case ul) directly as the selector.
I believe this was interfering with the below ul elements within your CSS. Simply changing the first CSS rule from ul to your ID (Navigation_Main) fixes the issue.
Fixed example > http://jsfiddle.net/cTSJt/10/
Thanks
Have you tried using div's instead of the unorder list (ul) element. As you are using CSS to striping off all the default styling that makes a "ul" a list element why not use a div to start with. I can't guarantee it will solve the problem but it eliminates unnecessary CSS and you might beable to spot the issue more easily
And in reality shouldn't a ul only be used for bullet point items, in a text document?
Okay, I have typical menu (ul>li>a). The mission is to draw background <div> (shadow, gradient etc) into an <li> element (ul>li>.shadow-bg-white)
(for example, the div is green bordered. all other borders are just for better visibility of problem)
http://jsfiddle.net/voilalal/P57yE/embedded/result/ or http://jsfiddle.net/voilalal/P57yE/6/
(for example, the div is bordered with green color)
If I hover over the items from left to right, everything is okay. However, if I hover over the items from right to left, items on the left side do not react to the :hover pseudo-class.
Every block has the CSS position property assigned, so z-index should work well, I hope.
At least, .shadow-bg-white z-index seems to be placed higher than the a item.
What solution can you recommend?
Benjam was on the general right track I think. I don't know your ultimate purpose, so the solution may not work in your case, but there is no other solution. The li you are hovering on must be set lower than the others so the div in it does not overlap them. Adding this:
#header-menu ul li:hover {
z-index: 498; /* one lower than your set z-index for li */
}
See here: http://jsfiddle.net/P57yE/8/.
The reason it worked going left is that by default when items are at the same z-index the one coming later in the source order is given precedence, so as you move right you move down in your html source order and the hover is picked up on the new element with the same z-index. But when you move left, you are going up in the html source order so the one you were hovering on had precedence and the hover remains.
They don't react because they are being covered by the div, therefore the div is stealing the hover from anything below it.
If the div does not need to be covering all of the LIs, you might want to place it below the LIs with z-index. But I'm not sure exactly what you're trying to do here, so I'm not sure if that solution will work for you.
The best way to illustrate this question is with...a Fiddle! Before you visit the fiddle, notice there is text behind the grayest element, which is on top of a light gray element that has a border.
There is a main wrapping div (root), and two wrapping divs inside (wrap1 and wrap2). The problem here is that I need the content of wrap2 (highlight) to be behind the content of wrap1 (text), but in front of the background of the root.
This, however, must not change:
The HTML, the elements and wraps should be left untouched. Excluding the order of wrap1 and wrap2 inside root.
The highlight div must keep the absolute positioning.
Styling highlight with background-color is not an option, the existence of highlight is a must.
PS: the italics reference the id's of <div>s in the fiddle example, for whomever was too lazy to visit it.
I was able to display the text in front of the highlight by adding a z-index to text. (Adding the z-index to wrap1 also works.) The trick is to remember that z-index doesn't apply to statically-positioned elements, so you need to give the same div position: relative.
#text {
position: relative;
z-index: 1000;
}
(Large z-index because I've been bitten by IE not respecting low values in the past. May or may not still be an issue. ;-)
z-index can be difficult to grasp. I think somebody already answered your question, but if you want to learn more how they work, this is a pretty comprehensive guide:
http://www.onextrapixel.com/2009/05/29/an-indepth-coverage-on-css-layers-z-index-relative-and-absolute-positioning/
And also, here is a link where you can try out different z-index and how they are affected by different position properties (the main reason for difficulty)
http://tjkdesign.com/articles/z-index/teach_yourself_how_elements_stack.asp
#wrap1{position:absolute;z-index:2;}
If you view this page in IE7: http://65.60.10.2/~marionin/ , why are the light purple headers ("Spotlights", "Serendipity Projects", "Marion Institute Blog") hiding underneath the dark purple band?
I have firebugged till my fingers hurt, but I can't figure it out. The column divs are written after the block div, so they should display on top.
Mucking about with the z-index doesn't help, even when setting the positions of the block and the columns to relative.
[Of course, as would be expected, everything looks fine in Firefox, Safari, Opera, and Chrome.]
Thanks for any help!
IE has terrible z-index bugs that are often impossible to grok. I was able to make it behave in IE 7 after some fiddling with the IE developer toolbar.
I noticed that for some reason many elements had z-index defined on them yet these weren't appearing in the HTML. Do you have a script running that is setting any z-indexes? I noticed that they were in reverse order, meaning that the high level elements had higher z-indexes than the lower level elements. This is one way to create numerous bugs in IE. The deeper the HTML appears in the hierarchy, the higher its z-index should be.
I started by removing the z-index on the relevant containers, from body down to the two <div>s in #main-content. I set position: relative on #main-content but left z-index undefined. I set position: relative on the two <div>s in #main-content and set the z-index to 100 and 200 respectively.
Within #content, the first <div>, I added z-index: 110 and the second <div> (the row of blocks with small pictures) I added z-index: 120.
That seemed to get IE 7 to behave correctly.
If there is anything else that has a z-index defined that I didn't mention, try removing it and starting from the ground up. The less elements there are with z-index defined, the less opportunity there is for IE to behave badly.
#block-block-11 {
position: static;
}
...quick fix to a larger issue eloquently detailed by CalebD.
http://biochrom.fivesite.co.uk/catalogue4.asp
On the page above there is an image floated to the left. To the right of it is a list, titled "features". The list items have a background image, however, it isn't appearing. List 2 shows how the background image looks.
Does anyone know how I can make the bullets visible?
I know this is a year old post but others may want to know...
What happens if you are using a content management system and some pages have images & some don't you wouldn't want your list items to be 200px in the content?
You can add this CSS to your UL/OL element:
overflow:hidden;
I hope that helps.
Your image has a float:left property. The list items are therefore rendered "behind" the image.
margin-left:200px;
on the UL element will solve your problem.
Alternatively, you can apply a float:left on your UL-element. This will make it float right to the image, but will make the following content appear on the same line. You can prevent this by clearing the UL-element, or adding element after the UL-element with...
clear:both
...applied to it.
More information about this behaviour can be found at http://www.positioniseverything.net/easyclearing.html.
This thread is old indeed, but always relevant...
Another alternative solution:
display: inline-block;
Put this on the UL. It forces the entire ul to appear after the float. That way you can have a page with or without the image and it will always display correctly (checked on FF4, IE7 & 8, Chrome 11).
Alternatively, you could use the list-style-image property instead of background-image. I ran into this very problem the other day: the text-wrapping behaviour that floats exhibit on their 'neighbours' only applies to 'content', not background images (for example).