I have problem positioning left sidebar (variating height DIV) ON IE6.
Main needs:
1. I cant set height value, cause height is variating and should be computed by browser.
2. Sidebar must have top and bottom spacings.
Top bar issue is solved by replacing position to relative.
Any ideas ? Thank you in advance !
Below you can see simplified code and snapshot how it looks on standard browsers.
.container {
left: 550px;
top: 10px;
width: 196px;
position: absolute;
line-height: 0px;
font-size: 1px;
}
.inner {
width: 100%;
height: 114px;
background-color: rgb(227, 227, 227);
}
.leftbar {
left: 0px;
top: 7px;
bottom: 7px;
width: 4px;
position: absolute;
background-color: rgb(111, 111, 111);
}
.topbar {
left: 7px;
top: 0px;
right: 7px;
height: 4px;
position: absolute;
background-color: rgb(111, 111, 111);
}
<div class="container">
<div class="inner"></div>
<div class="leftbar"></div>
<div class="topbar"></div>
</div>
LINK TO SCREEN SHOT IMAGE
IE6 is tremendously bad when it comes to absolute positioning. Positioning something at the same time from left and right or from top and bottom just doesn't work.
You basically have four options:
Drop support for IE6.
Give up on absolute positioning and use some other method (floats for example).
Provide dumbed down version of the site for IE6 - for example overriding some styles using conditional comments.
Use JavaScript to aid IE6 in positioning (for example absolutefudge.js).
Related
I have an old project JSP page with the following CSS block which formats the main form div
.container {
background-color: #f2f2f2;
padding: 20px;
position:absolute;
width: 400px;
min-height: 300px;
height: auto;
left: 50%;
top: 50%;
transform: translate(-50%, -250px);
}
requirement is such that I need to get a border around this form and in between some text so I used Pseudo-element after with following css block
.container:after {
position: fixed;
content : '\00a0 \00a0 \00a0 Login to external function';
font-size: 1.3em;
font-weight: bold;
border-radius: 25px;
padding-top:15px;
top: -40px;
left: -25px;
right: -25px;
bottom: -25px;
border: black 2px solid;
border-spacing: 10px
}
I got the required output, but the form is freezing now, and I cannot click anything. Can you please help me know what I did wrong?
Pseudo-elements are treated as descendants of their associated element. That means by default they sit above their parent in the stacking order. Even though in this case the pseudo-element is transparent, it is still blocking the .container below, preventing you from clicking it.
To fix it, you can place the pseudo-element behind its parent (.container) by giving it a negative z-index value.
I have created a circular vertical progress bar which fills vertically on page level progress. For this I have created two divs(outer div and inner div) and I have made the circular outer div using border radius 50% and overflow hidden and the inner div with square shape and width greater than the width of outer div. So on the completion of the page the height of the inner div increases and it gives the effect of filling of circular outer div as the edges of the inner div gets hide by the overflow property of the outer div. Its working fine in desktop and IPad but not in the other touch devices(mainly mobile devices). I am adding the snippet of the css and HTML that I am using. There are similar questions available on stackoverflow but none of the answer solved my problem, so plese don't take it as a duplicate answer, thanks.
#progress-container {
position: absolute;
top: 100px;
left: 100px;
}
#progress-indicator-outer {
position: absolute;
width: 25px;
height: 25px;
border: 2px solid #fff;
border-radius: 50%;
background: #999999;
overflow: hidden;
}
#progress-indicator-inner {
position: absolute;
bottom: 0px;
width: 28px;
height: 12.5px;
margin: 0px 0 0 -2px;
background: #007BAf;
}
<div id="progress-container">
<div id="progress-indicator-outer">
<div id="progress-indicator-inner"></div>
</div>
</div>
This appears to be caused by browsers parsing the tag. To solve this problem at the source, try the following:
<meta name="viewport" content="width=device-width, initial-scale=1,
minimum-scale=1">
original answer
Some things to note:
You don't need all these position: absolute;. Try to avoid them.
Decimal pixel values are highly discouraged
The width of your inner element was not correct. If your outer is 26px, and you want to move the inner two px left, that means you also need 2px on the other side, ending up at 30px
I tested the following and this works on my mobile devices
#progress-container {
position: absolute;
top: 100px;
left: 100px;
}
#progress-indicator-outer {
width: 26px;
height: 26px;
border: 2px solid #fff;
border-radius: 50%;
background: #999999;
overflow: hidden;
}
#progress-indicator-inner {
position: relative;
width: 30px;
height: 13px;
top: -2px;
left: -2px;
background: #007BAf;
}
<div id="progress-container">
<div id="progress-indicator-outer">
<div id="progress-indicator-inner"></div>
</div>
</div>
For a new Wordpress template, I designed (in Photoshop) a round-ish header that overlaps the image beneath.
The Design:
My try:
Code:
Right now, I'm using a border radius, since I want to do it in CSS rather than cutting out an image (also for responsive reasons).
border-radius: 100% / 100%;
No matter how I change the values, the border won't become nicely rounded.
The website so far: http://voorbeeld.website/19/
Maybe I was a little too creative in Photoshop, but nothing is impossible! Right?
Use a pseudo element, in this case I used the :before
Make sure the .wrapper's elements also have a position, relative or absolute, or you need to set z-index: -1 to the :before
.wrapper {
position: relative;
height: 200px;
overflow: hidden;
}
.wrapper:before {
content: '';
position: absolute;
top: -200px;
left: -10%;
width: 120%;
height: 400px;
background: lightgray;
border-radius: 50%;
}
.content {
position: relative;
padding: 20px;
text-align: center;
}
<div class="wrapper">
<div class="content">
Put your content here
</div>
</div>
Basically, I am trying to put overlap corners behind the #page_container on my site, so that it looks like the image is overlapping the page.
Live example: http://jsfiddle.net/xBwQp/15/
HTML :
<div id="page_container">
<div id="banner_wrapper">
<img id="banner_image" src="http://placehold.it/350x150" />
<div class="triangle-l"></div>
<div class="triangle-r"></div>
</div>
</div>
CSS :
#page_container {
background: red;
width: 400px;
position: relative;
z-index: 10;
}
#banner_wrapper {
position: relative;
}
#banner_image {
position: relative;
}
.triangle-l {
border-color: transparent green transparent transparent;
border-style: solid;
border-width: 15px;
height: 0px;
width: 0px;
position: absolute;
right: 0px;
top: 0px;
z-index: 5;
}
.triangle-r {
border-color: transparent transparent transparent blue;
border-style: solid;
border-width: 15px;
height: 0px;
width: 0px;
position: absolute;
right: 0px;
top: 0px;
z-index: 5;
}
You can see that the triangles, .triangle-l and .triangle-r, clearly have a lower z-index:5 than the #page_container z-index:10 but they still appear above the #page_container.
I have been able to accomplish my desired result by setting .triangle-l and .triangle-r to z-index:-1 however this only works in FF, Opera, and Webkit. No IE support.
I believe it has to do with the stacking context. However, I am unsure how to accomplish the desired result with cross-browser compatibility.
You are absolutely right - it is about the stacking context.
Whenever you put z-index on an element you create a new context, so because the triangles are descendants of the #page_container they are going to belong to the stacking context of the #page_container and no matter what z-index number you choose for the triangles, they only have meaning inside this context, and you will not be able to move them backwards behind this container.
Read in detail here: https://developer.mozilla.org/en/CSS/Understanding_z-index/The_stacking_context
Possible solutions are;
move the elements out of the container in the html structure (and
then position them where you want with css)
remove the z-index from the container and set the triangles to z-index -1 to move them beneath the document itself
Im using position absolute to give the top left corner of a DIV a rounded corner.
HTML:
<div id="MyDiv">
Some content
<div class="topLeft"> </div>
</div>
CSS:
#MyDiv {
position: relative;
padding: 12px;
background: #fff url('graident.png') repeat-x top left;
}
.topLeft {
position: absolute;
top: 0;
right: 0;
width: 10px;
height: 10px;
background: transparent url('corner.png') no-repeat top right;
}
This works fine in all browsers expcept IE6.
In IE6 the corner.png image seems to be about 1px out at the top corner, essentially not top: 0; and right: 0; but more like top: 1px; right: 1px;
Can anyone explain why this might be happening only in IE6?
The only way I could find the make this work for IE6 is to add
margin-top: -1px;
margin-right: -1px;
to the topLeft class, but unfortunately that will mess up the display in other browsers