I have the following DOM structure:
<li>
<div id="some_id_1">-some html-</div>
</li>
The <li> has an image as a background, and the <div> appears as a control box on the top-right corner of the <li>.
The <div> is floated right, and should show up on the right.
When I refresh the page (in Chrome), the <div> shows up close to the middle of the <li> (as shown in the image on the left).
When I open Chrome's developer tools, and change the opacity (or any other css property) of the <div>, it shifts to the right (as shown in the image on the right).
I tried clearing Chrome's cache, but it didn't work.
Any Chrome-specific issues that might be causing this? (The page works fine in Firefox.)
CSS:
li {
position:relative;
}
div {
position:absolute;
width:40px;
float:right;
margin:0px;
}
(all other properties relate to fonts/colors)
Update: margin-right:0px seems to have fixed problem, but I'm still confused why changing the opacity moved the div around.
have you tried margin-right:0px;
if you are using float:right; try: clear:both;
what is your css? hard to help you this way.
If you are using position:absolute to place the div then make sure li has position:relative
li{
list-style:none;
position:relative;
display:inline-block;
}
div{
position:absolute;
right:0;
width:40px;
background:#333;
color:white;
border-radius:4px
}
DEMO
Related
Can anyone give me a hint why the link in the gray box is not clickable in Internet Explorer (I'm using version 11).
http://jsfiddle.net/rk7n7xjj/1/
I tested it in any other browsers and it works fine.
HTML
<div class="gray">This link is not clickable in IE</div>
<div class="yellow">Some placeholder text</div>
CSS
.gray {
position:fixed;
z-index:-1;
top:100px;
background:gray;
height:50px;
width:200px;
}
.yellow {
margin:0 auto;
background:yellow;
height:1000px;
margin-top:400px;
}
The link is not clickable becaue of the z-index.
Actually you setting the div behind the body. You must specify the z-index of the body too. Or at least set it positiv so it's in front of the body and set other elemnts higher if you expact to display them in front of the gray div. Thats why you cant click it.
Obviously Firefox and co has no problems to identify the link when you set z-index like this.
This may helps you to understand how you can use z-index also in IE.
In your case, to get what you want, your CSS should look like:
.gray {
position:fixed;
z-index: 1;
top:100px;
background:gray;
height:50px;
width:200px;
}
.yellow {
position:relative;
z-index: 2;
margin:0 auto;
background:yellow;
height:1000px;
margin-top:400px;
}
Actually you dont need the z-index on the gray in your case but if you plan to may display something behind the gray div than you may need it.
The link is not clickable because IE is taking it behind the body. If you notice, even the text of the link is not selectable. Try setting a z-index: 1 to the body or any parent container. That ways you are first telling the browser to take all the elements inside the container to a higher z-index and then move the link behind that raised set of elements (But the movement of the link is done only within the parent's context i.e. the raised level. Read about stacking context). Thus the link now becomes clickable.
Alternate Solution
If you just want the yellow div over the gray div, then give a positive z-index to the yellow div only. Remove the z-index property from the gray div. If no z-index value is present, 0 is taken as the default. It will always stay behind the yellow div.
.yellow {
position: relative;
z-index: 1;
/* other styles */
}
ie7 is at it again - my accordion works in all other browsers but in ie7 it does not push down the footer, but overlaps it and heads way down the page. Any idea what I can do to make it so that when I open one of the accordions the div expands and pushes down the footer?
Thanks in advance!
jeez sorry. heres the link
http://184.172.137.64/~laserlof/temp/services.php
IE is a pain that way. I would suggest having the div display in a block and adding either padding or a margin to the bottom of it. I have this on one of my sites and it pushes the footer down in IE:
div {
display: block;
padding-bottom: 20px;
}
Edit:
Ok remove the height: 100% on the accordian id in your css
You have this in your css somewhere
#accordion {
float:left;
height:100%;
margin-left:auto;
margin-right:auto;
position:relative;
width:950px;
}
If you remove the
height:100%;
it will allow the accordion to expand properly
This code works fine in internet explorer, but I am having problems in other browsers.
Basically there is a horizontally scrolling page with a fixed left sidebar.
In IE you can click on the forward and back buttons on each panel of the page, but in chrome, etc, only the links in the sidebar work.
I believe it to be a problem with the z-index or positioning of the elements, the css has
#bg{
display:inline;
position:absolute;
left:0px;
top:-2px;
z-index:1;
}
#sidestripe {
display:inline;
position:fixed;
left:0px;
top:-2px;
width:100%;
min-height: 100%;
z-index:1000;
}
I have tried many combinations of z-index, but i can't seem to make one elemnt clickable without making the other unclickable.
Any help would be greatly appreciated!
http://www.travelhome.com.au/index.htm is the website in question
Change your #sidestripe width to 380px instead of 100%:
#sidestripe {
display:inline;
position:fixed;
left:0px;
top:-2px;
width:380px;
min-height: 100%;
z-index:1000;
}
This way it will not cover other content on the page
I don't know what can be exactly the problem but I had a similar problem some time ago.
To fix it I navigated through the developer tool of Google Chrome and a predefined Z-index was applied by a hidden class, so mine was being overwritten.
Try to find all the classes applied and possibly you will find something similar.
This usually happens when working with APIs.
I have 4 divs as you see on the picture.
They are positioned this way :
<style>
div1{
max-width:250px;
min-width:240px;
position:absolute;
right:6px;
top:6px;
float:left;
}
div2{
max-width:2248px;
position:absolute;
height:35px;
left:254px;
margin-right:20px;
min-width:275px;}
div3{
max-width:250px;
min-width:240px;
position:absolute;
right:6px;
top:6px;
float:right;}
div4{
position:fixed;
top:1px;
right:400px;
margin-left:260px;}
</style>
The issue I am having is that div4 gets its content from the database, if there is more text it goes UNDER div2. and makes it impossible to read.
looking for a way to make so that if there is more text (or if you resize the browser) as text on div4 wraps, div2 is pushed down (if the width is narrowed) or pushed up (if the browser width is made wider)
any ideas?
If you want to have elements that react to other elements, then you need to use a layout method that keeps your elements in the flow. position:absolute; is like superglue, it's best used sparingly and only when nothing else sticks...
The other approach is to programmatically adjust the positioning during resize, but this is not recommended.
Here is my issue--I need to somehow access the onclick of an item that is covered by another element of higher z-index. I know this is going against the point of z-index, but any ideas?
In the below example, only the small top-sliver of the red box is clickable. I have a webpage design where tabs that need to be clickable are overlaid by an artsy bar... I'd love if there were a way (maybe some javascript trick?) to use onclick for these obscured, lower z-index elements without changing any positioning, though my gut feeling isn't good.
<html>
<head>
<style type="text/css">
#bg {
position:absolute;
width:500px;
height:500px;
background:pink;
}
#under {
cursor:pointer;
margin-top:-10px;
background:red;
width:50px;
height:50px;
z-index:0;
}
#over {
position:absolute;
width:900px;
height:50px;
margin-top:10px;
z-index:100;
}
</style>
</head>
<body>
<div id="bg">
<div id="under" onclick="alert('hi');">aaa</div>
</div>
<div id="over"></div>
</body>
I would do it with a transparent PNG inside a DIV above the artsy bar with the same dimensions as your clickable lowest z-index DIV.
Be aware of Internet Explorer Issues.
I used the technique many times.
The usual replacement method is to place the "over" elements (positioned absolutely) inside the "under" elements (positioned either relatively or absolutely) and make the content the same size (Gilder/Levin Image Replacement).