I have the following navigation where .topNav has position:relative and subnav has position:absolute. I cant get the sublist to appear over the main list due to z-index problems. This seems to be a known problem.
<ul>
<li class="topNav">About Us
<ul class="subNav"><li> Subsection A</li><li>Subsection B</li></ul>
</li>
</ul>
Does anyone know of a workaround?
UPDATE http://brh.numbera.com/experiments/ie7_tests/zindex.html shows exacly the problem I have. My original posting was in the context of a list but I have reduced the problem to the fact that z-index dosn't seem to work when have an element with position:absolute inside a parent element with position:relative
Here's a very good article that explains the stacking issues that machineghost mentions.
http://css-discuss.incutio.com/wiki/Overlapping_And_ZIndex
What you might want to consider (depending on why you're wanting the positioning on multiple elements) is adding a hover selector to .base (use JavaScript for IE6) that adds the class to give it relativity.
.base:hover{position:relative;}
This then means that the second .base doesn't have position: relative.
Ok, I think your problem probably stems from a lack of understanding about how z-index works. The z-index property is only relevant for elements at the same level in the DOM hierarchy. In other words, if you have:
<ul id="a">
<li id="b">b</li>
<li id="c">c</li>
</ul>
<div id="d"></div>
and "b" and "c" are styled such that they overlap, z-index will determine which one ends up on top. However, if "c" and "d" overlap, "d" will always be on top, no matter what c's z-index is, because elements that are closer to the root DOM node will always appear above elements that are nested deeper in.
So, as long as "subnNav" is a child of "topNav," I don't think there is any way to make it cover it's parent's content. In other words, as far as I know there is no workaround for this issue, except to make "subNav" not be a child of "topNav".
(NOTE: All that being said, CSS is not simple, so there may still be some way to get the effect you want that I'm not aware of. All I can say is that, based on my understanding of z-index and my pretty good general CSS knowledge, there's no way that I know of.)
adding
background: url(blank.gif);
for absolutely positioned elemnts solves the problem for me. Mybe it can helps u 2 :)
regards
I had the same issue and was able to fix it In IE6 and 7. Combining http://code.google.com/p/ie7-js/ with the following CSS the issue went away. With my issue I had some items inside a list floated left and had a tooltip that popped up whenever the user hovered over the li. To fix it, I adde this:
.ul li:hover {position:relative;z-index:4;}
.ul li:hover + li {position:relative;z-index:3;}
The way it works is whenever the user hovers over the first LI for example, it sets the second LI floated next to it to a lower z-index value. You can of course change the z-index values to fit your own needs.
This did the trick for me. ;)
http://ltslashgt.com/2007/05/16/relative-zindex-and-ie/
Stu Nicholls at CSSplay has a get CSS Based nav w/ 6 level drop down (Can be expanded to more if needed). This works in Internet Explorer IE5.5, IE6, IE7, Firefox, Opera and now Safari, Netscape 8 and Mozilla.
Solution: assign z-index in decreasing order
<div class="base" style="z-index:2">
<div class="inside">
This has some more text in it. This also has a background. This should obscure the second block of text since it has a higher z-index.
</div>
This has some text in it. This has some text in it. This has some text in it. This has some text in it. This has some text in it.
</div>
<div class="base" style="z-index:1">
This is the second div. You should not be seeing this in front of the grey box. This has some text in it. This has some text in it. This has some text in it. This has some text in it. This has some text in it. This second box should be obscured by the grey box.
</div>
Similar to answer by #Orhaan, setting a background property to the absolute element is the only solution that worked for me...
background-color: rgba(0,0,0,0);
Thanks Alex Leonoard
Related
Opening this simple jsfiddle in Firefox renders differently than in Chrome and other browsers.
CHROME
FIREFOX
I have actually been trying to make it look like Firefox in other browsers, i.e the bullet position follows the alignment of the text. Note that i'd also want the next list items to be centered, i.e not aligned based on the bullet position of the first one, see screenshot example. Anyone know a way?
I have seen answers using list-style-position: inside, but can't live with the side effect of the difference in the gap between the bullet and the text.
<ul>
<li style="text-align: center;">Hello I'm Centered</li>
</ul>
You could try using a pseudo element like :before instead to get the desired effect across all browsers. By setting the margin-right you can choose the spacing yourself too.
li{
text-align:center;
list-style:none;
}
li:before{
content:'•';
margin-right:7px
}
What's happening is that list-style:none hides the default bullet and by using :before you're able to add it back in as an inline pseudo element.
Traditionally browsers are rather free what exactly to do with the dot in lists. I can easily imagine situations, where Firefox’ solution results in a better rendering.
If the <li> makes trouble, move the text alignment one element farther down, i.e., add a helper element:
<ul>
<li><div style="text-align: center;">Hello I'm Centered</div></li>
</ul>
Disadvantage is, that you introduce an element solely for reasons of styling, but in my experience pragmatism beats purism in such an isolated case.
I'm having an issue where a drop down menu's children are expanding and repositioning to come outside of the parent's bounds. The concerned element is the menu item "BEHANDLINGAR"'s drop down list in IE9+.
Be warned that I am very much a junior developer; this might be apparent from my code. I don't want to discourage general advice, as I do need it, but please focus on the problem at hand first and foremost.
The site is: www.skinwellnessofsweden.com/hudvard.html
The issue is because of the ul style. The style applied the all the ul elements in general. You have to apply it for only the specific child list like the following.
ul.clearfix {
padding-left: calc(50% - 480px);
}
Hope this will fix the issue.
I'm struggling to figure out why the li values are pushed below the li number in Safari and Chrome. It looks normal in IE and FF (all in a straight line). Please view the following in each browser to see what i mean:
http://jsfiddle.net/CfyQF/
I have tried to replicate this using tables inside the li rather than floating divs, but get the same result.
Anyone know why this is happening and how i can update my css or html or both to resolve this issue?
Thanks!
I spent some time trying to come up with a working solution without the floats and came up with the following, for anyone who needs this here it is:
http://jsfiddle.net/zeaHu/11/
I had a problem like that before.
It's the float that causes this.
You could get rid of the float property and work with margins and padding instead.
not sure if it solves your particular problem, but if you strip out all the css and most of the div's, the numbers line up beside the inputs and the 'X' still sits nicely to the right of the input;
<div>
<ol>
<li>
<input>
<button>x</button>
</li>
<li>
<input>
<button>x</button>
</li>
</ol>
</div>
I have an image and a rectangle (a paragraph with a coloured background) that should have their tops line up. They're both absolutely positioned and have the same style-top value, but the top of the rectangle is appearing about 15px below the top of the image, and I can't figure out why. Is there any reason why this might be happening?
HTML:
<img class="v1" id="image" src="/COMP2405A4/images/resized_adorkable!.jpg" style="position:absolute;top:313px;left: 61px;" alt = "Your Image">
<p class="mask" id="tmask" style="position:absolute;top:313px;left: 61px;width: 400px;height: 20px"> </p>
CSS:
p.mask {background: rgb(255,255,255);
opacity:0.5;
}
Your elements don't line up because the margins of your elements aren't the same.
Try explicitly setting margin: 0; on the p element.
Seems like you have the right idea. One of your other classes may be throwing you off. I made an example if you want to take a look.
http://jsfiddle.net/hwrQA/
It can't be other classes since the relevant styles are applied through a style tag, which overrides the default styles it may have.
However I can theorize that it may have to do with on of the elements, probably the image, having additional styles through the stylesheet creating extra offset.
Like padding on an image, the effect differs per browser but it may create the extra offset.
The best thing you can do to check why the offset it not correct is use the developer tools in chrome or firebug in firefox to select the relevant element and see which styles get applied and where they are coming from. Internet Explorer has debugging tools too but I wouldn't recommend them to start with.
If you want a better answer you're going to have to reproduce it in jsfiddle so we can see what is wrong. Try taking away stuff until nothing irrelevant to be bug remains, or if the bug dissapeared in this process you may have solved it yourself. Read the how to ask faq for more information.
In this fiddle, you can see that the horizontal rule does not go all the way across (under the number). I want it to. I have tried using list-style-position:inside;, however this means that I cannot force the number to appear in the correct position (because of the floated left image). Is there an elegant way to do this using CSS, or do I have to resort to generating the numbering myself and then styling appropriately?
You seem to be well aware of the list-style-position property, so you should know why the horizontal rule will not span all the way under the bullet/number. The list has a padding on the left, pushing the list elements to the right. Their contents won't go out of their space :).
Here's how I got over the issue: http://jsfiddle.net/J4b6Y/14/
[EDIT]
Fix for webkit browsers: http://jsfiddle.net/J4b6Y/16/
[EDIT2]
Works in all browsers AND has valid HTML o_O http://jsfiddle.net/J4b6Y/37/
[EDIT3]
OK, here's another one... http://jsfiddle.net/J4b6Y/39/
UPDATE 4
Seems like Update 3 worked well on webkit but not FF... so it's time to use real CSS power.
http://jsfiddle.net/J4b6Y/122/
UPDATE 3
Now what about this
http://jsfiddle.net/J4b6Y/105/
UPDATE 2
http://jsfiddle.net/J4b6Y/48/
UPDATE
Try this if it works for you
http://jsfiddle.net/J4b6Y/33/
I would suggest that you remove the hr tag and the floating image properties.
If you cannot set the image with css background, you can do the following:
HTML
<li>
<img src="" alt="test"/>
<p>Test</p>
</li>
CSS
li{
border-bottom:1px solid black;
list-style-position:inside;
}
li p{
display:inline-block;
}
Also, if you can remove the p tag, you will save few bites.
From the other answers to the question, it would seem that whilst there are ways of accomplishing this with CSS, there isn't an elegant way. As such, my prefered solution is to generate the numbering in the HTML and style appropriately. This can be trivial to do if the page is generated as a result of server side scripting.
I shall keep an eye out for more elegant ways of solving this with CSS and update this question if I find any.