I'm having a problem with the overflow of negatively absolute positioned divs.
The image below represents what I'm trying to achieve. The main object is a div that is position:relative. The two protruding arrow tabs are divs that are position:absolute with negative values so that they sit outside of the parent's perimeter.
This works fine in all browsers except IE7 and IE8 which cut the tabs off completely as if the parent object had the style overflow:hidden.
HTML:
<div id='parent'>
<div id='arrowLeft'></div>
<div id='arrowRight'></div>
</div>
CSS:
#parent{
position:relative;
width:600px;
height:400px;
}
#arrowLeft{
width:40px;
height:50px;
position:absolute; left:-40px; top:50%;
margin-top:-25px;
}
#arrowRight{
width:40px;
height:50px;
position:absolute; right:-40px; top:50%;
margin-top:-25px;
}
This is driving me mad. Does anyone know of a fix or a reason for this behaviour?
Thanks all, appreciate your time!
W.
I have found the reason for this happening (still doesn't really make sense). I was fading in the image in a light box fashion and for some reason this was preventing the tabs from showing up in IE7 & IE8.
If anyone can offer any insight into the reason for this that would be appreciated. But for the time being I have just scrapped the fade for IE7/IE8 and kept it for newer browsers.
Many Thanks for your help #thirtydot!
W.
PS That fiddle site site looks pretty awesome!
Related
I'm coding my own scrolling social bar but i'm nut sure about method I'm using. As you can see on the pic above, I had put a wider grey div inside the narrower content div. Then I've set grey's one a css to make it's z-index less than the content z-index. It works ok and following content once I scroll the website but my question is - is this a good method to place a bar like this? Maybe there is an easier solution and better for browsers compatibility, isn't it?
Sincerely,
Matt
You can just have the size of the DIV cut down to less space and than make it postion:fixed so that it moves with the scroll.
Fiddle
HTML
<div id='div1' align='center'>
<span id='grey'>Like</span><br>Tweet<br><span id='grey'>Share</span>
</div>
<div id='div2' align='center'>Content</div>
CSS
#div1 {
position:fixed;
top:30px;
left:5px;
background:yellow;
height:60px;
width:50px;
border:4px ridge black;
}
#div2 {
height:800px;
width:200px;
background:orange;
margin-left:60px;
}
#grey {
background:grey;
}
Why don't you position the "like tweet share" div (i guess) relatively to content.
div#content{position:relative;} and div#share{position:absolute;top:...;left:.. }
I'm totally clueless to describe my problem clearly enough so I tried to make a jsfiddle as simple as possible here: http://jsfiddle.net/Emf2f/. On Chrome+IE, my image is under #div3, while on Firefox, is next to #div3. Why does this happen? which result is more "standard"?
<div id="div1">
<div id="div2">
<div id="div3"> Text </div>
</div>
<img src="http://img805.imageshack.us/img805/758/txgo.jpg" />
</div>
#div1{
width:500px;
overflow:auto;
border:1px solid red;
}
#div2{
margin-bottom:-1px;
}
#div3{
background:cyan;
float:left;
width:200px;
height:100px;
}
I would use "clear" around the object that you do not want the image to appear inline with. You can read more about positioning here: http://w3schools.com/css/css_float.asp
The site has the exact example you are trying to accomplish.
I added your image into a div tag (div4) then placed the clear:both in the css file for that div and it works properly in Chrome, IE and FF.
div4{Clear:both;}
Let me know if this helps. Thanks.
From a content perspective they are all doing the same thing showing the img inline (as per the HTML spec), what differs is the default overflow behavior. In Chrome and IE they are wrapping as per text (this is actually what I would imagine the correct behavior is) whereas Firefox is not. If you want the image to always display below, mark it as display:block;
In IE7 browser, I just meet one issue about position.
I made a demo page to test the position conditions of relative and absolute.
There are the related codes below:
[CSS]
.rela{
width:200px;
height:100px;
background:#EEE;
margin-bottom:10px;
position:relative;
}
.abs{
width:50px;
height:50px;
position:absolute;
background:#333;
left:20px;
top:80px;
z-index:10;
}
[HTML]
<div class="rela"><div class="abs"></div></div>
<div class="rela"><div class="abs"></div></div>
<div class="rela"><div class="abs"></div></div>
<div class="rela"><div class="abs"></div></div>
Now, the problem is, in IE7 browser, the "abs" element is covered by the next "rela" element, but it displays well in other browsers like Firefox, chrome, IE8.
I know somebody said that we can add a more higher z-index to the parent "rela" element, but for the codes above, the issue can't be fixed in this condition, coz there are more than two rela elements and all of them have the abs element.
I have no idea about how to fix it now. Also, if someone could kindly provide a official explanation about this "bug", it will be so good.
Give all divs with class rela an z-index, the first with the hightes till the one on the bottom with the lowest value.
<div class="rela" style="z-index: 40;"><div class="abs"></div></div>
<div class="rela" style="z-index: 30;"><div class="abs"></div></div>
<div class="rela" style="z-index: 20;"><div class="abs"></div></div>
<div class="rela" style="z-index: 10;"><div class="abs"></div></div>
Also see this example.
The same question was asked here.
Don't ask me why, but the last answer there seems to fix the problem (though you'll need jQuery or the like):
http://jsfiddle.net/Xmznn/1/
see the changes, it is working in IE 7
.rela{
width:200px;
height:100px;
background:#EEE;
margin-bottom:10px;
}
.abs{
width:50px;
height:50px;
background:#333;
margin:80px 0 0 20px;
z-index:0;
position:absolute;
}
Try adding
z-index : 0;
To div.rela
know issue and well documented out there.
check - http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/
that might help you out.
There's a helpful resource to address this issue.
Long story short, if your absolutely placed div (.abs) is empty, IE doesn't like to place it in front of other elements regardless of z-index. You can use a 1x1 transparent gif to overcome this, eg. by setting a style like the following on the div:
.abs {
background: transparent url('/images/clear.gif') repeat 0 0;
}
I've found this to help. It's great as there's very little additional styling needed and you don't have to explicitly manage z-indices.
I'm creating a calendar and need to replicate the behaviour I would get with
overflow-x:visible;
overflow-y:hidden;
for browsers that don't support these css attributes. Is there some kind of workaround I can do? I don't just want to compromise and add in overflow:hidden for those browsers, since the client really wants this feature. Does anyone have any good ideas?
Many thanks.
Here is someone who asks roughly the same question (overflow-x visible and -y hidden).
http://forums.devnetwork.net/viewtopic.php?f=68&t=116457
Someone named Weirdan says I'd say there's isn't any expected behavior because such style is unavoidably internally inconsistent, and shows an example where it is not clear (says Weirdan) whether the area to the southeast should be hidden or shown.
S/he also says that the effect you want is easily achieved by wrapping the outer div with another div and setting overflow-y on that div to hidden, and shows this example (I hope it's OK that I copy it to here?).
<style type="text/css">
#outer-wrapper {
overflow-y:hidden;
}
#outer {
width:100px;
height:100px;
background:red;
border:solid red 1px;
overflow:visible;
}
#inner {
width:200px;
height:200px;
background:green;
}
</style>
<div id="outer-wrapper">
<div id="outer">
<div id="inner"></div>
</div>
</div>
I want to have 2 boxes right next to each other, one with a fixed width, and another with a width that will change based on the size of the browser. The box has overflow:auto, and I'm trying to get the first box to act as a side bar that will follow you down the page. But of course I can't seem to achieve this, and have come here hoping someone could give me some examples, or point me in the right direction.
Thanks!
To achieve the layout you asked try something along these lines:
HTML:
<div>
<div id="col1">Left Navigation Menu</div>
<div id="col2">Right Content</div>
</div>
CSS:
#col1
{
position:fixed;
width:400px;
}
#col2
{
position:absolute;
left:400px;
}
Will I was trying to think of a good way to do this in CSS, I was channeling my google-fu and found...
http://plugins.jquery.com/project/jStickyScroll
"This plug-in allows you to keep a div element at the top of the browser window when scrolling down a page. The most common use is to keep a sidebar navigation menu from disappearing when scrolling to the bottom of a web page."
You could maybe try...
#element{
position:fixed;
}
Although this doesn't work without hacks in IE6, see
http://www.howtocreate.co.uk/fixedPosition.html
Give this a go (I hope this is what you are after?):
See a live demo here: http://jsfiddle.net/VcecU/
HTML
<div class="main_container">
<div class="content_a">1</div>
<div class="content_lotsoftext">Start. Lots of text goes here! Finish. </div>
</div>
CSS
.main_container{
background-color:#ccc;
overflow:auto;
zoom:1;
}
.content_a{
width:60px;
float:left;
background-color:#3FF;
}
.content_lotsoftext{
float:left;
background-color:#FCF;
margin:-20px 0 0 60px; /* -- Need conditional for IE6 and 7 to remove the margin to get it to work in those browsers --*/
/*-- The following classes help it to sit better in IE6 and 7 --*/
clear:left;
display:inline;
}
Please note, you will need a IE6&7 conditional to remove the margin, clear and display classes from .content_lotsoftext