I have a lightbox-style div with scrolling content that I am trying to restrict to a reasonable size within the viewport. I also want this div to be horizontally centered. This is all easy in Fx/Chrome/IE9.
My problem is that IE8 ignores the absolute positioning which I use to size the content, and the rule margin: 0 auto which I use to horizontally center the lightbox.
Why?
What are my options for workarounds?
EDIT: The centering issue is fixed by setting text-align:center on the parent element, but I have no idea why that works since the element I want to center is not inline. Still stuck on the absolute positioning stuff.
HTML:
<div class="bg">
<div class="a">
<div class="aa">titlebar</div>
<div class="b">
<!-- many lines of content here -->
</div>
</div>
</div>
CSS:
body { overflow: hidden; height: 100%; margin: 0; padding: 0; }
/* IE8 needs ruleset above */
.bg {
background: #333;
position: fixed;
top: 0; right: 0; bottom: 0; left: 0;
height: 100%; /* needed in IE8 or the bg will only be as tall as the lightbox */
}
.a {
background: #eee; border: 3px solid #000;
height: 80%; max-height: 800px; min-height: 200px;
margin: 0 auto;
position: relative;
width: 80%; min-width: 200px; max-width: 800px;
}
.aa {
background: lightblue;
height: 28px; line-height: 28px;
text-align: center;
}
.b {
background: coral;
overflow: auto;
padding: 20px;
position: absolute;
top: 30px; right: 0; bottom: 0; left: 0;
}
Here's a demo of the problem: http://jsbin.com/urikoj/1/edit
I found out what's going on, and it's not the doctype, nor anything about the code that needs changes.
It's that jsbin's edit page doesn't support IE8 - the exact same demo viewed in full* is styled correctly in IE8.
In edit mode, jsbin seems to apply quirks mode or something odd like that when viewed in IE9 with IE8 browser mode and IE8 document standards. Surprisingly, the demo also works with IE7 browser mode and document standards (quirks mode off).
*the link goes to a later revision, but the only change was to remove all the attributes from the <html> tag - I had added these for testing. So, the demo is fine without those attributes, and with the html5 doctype.
I once fixed this issue by:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US" xmlns:x2="http://www.w3.org/2002/06/xhtml2">
Make sure your page is declared as HTML5
<!DOCTYPE html>
The problem with the vertical aling in IE<9 should be solved with this:
.bg {
text-align: center;
}
.a {
text-align: left;
}
But I don't know what's going wrong with the absolute position
Related
I'm seeing some interesting z-index behaviour on iOS.
My sample code can be viewed here: https://jsfiddle.net/59mo8s16/4/
I need the #sidebar to be displayed in front of the #slide-in-tip. This is the case when viewed on Chrome (PC and Android) and Firefox (PC). However, on iOS Safari and Chrome, #slide-in-tip appears in front of #sidebar.
I've realised that removing -webkit-overflow-scrolling: touch from the CSS makes it appear as intended across all platforms/browsers. However, I need this in order to provide momentum scrolling for the #container div on iOS. Without it, you get that scrolling that stops as soon as you stop swiping, which provides a terrible user experience.
Any ideas on how to resolve this one? Ideally I'd like a CSS-only solution. Any significant restructure of HTML will cause me some major pain at this point. The sample is a really stripped back version of an already-complete website.
HTML:
html,
body {
height: 100%;
margin: 0;
-webkit-overflow-scrolling: touch;
}
#top-bar {
top: 0;
width: 100%;
z-index: 200;
background-color: green;
height: 85px;
position: absolute;
}
#sidebar {
float: left;
padding: 30px;
background-color: pink;
position: fixed;
width: 310px;
left: 0px;
z-index: 150;
top: 85px;
bottom: 0px;
padding: 0;
padding-bottom: 50px;
}
#container2 {
min-height: 100%;
}
#main {
padding-right: 20px;
height: 100%;
margin: 0;
margin-left: 10%;
line-height: 40px;
text-align: right;
}
#container {
height: 100%;
margin: 0;
position: absolute;
width: 100%;
overflow-y: scroll;
}
#container2 {
padding-top: 75px;
}
#slide-in-tip {
position: fixed;
bottom: 0;
text-align: right;
width: 100%;
z-index: 140;
background-color: blue;
height: 200px;
}
<div id="top-bar">
top-bar
</div>
<div id="container">
<div id="container2">
<div id="sidebar">
sidebar
</div>
<div id="main">
long content - see js fiddle for actual long content
</div>
</div>
</div>
<div id="slide-in-tip">
slide-in-tip
</div>
The documentation offers an explanation for the behaviour you're seeing:
touch
Native-style scrolling. Specifying this style has the effect of creating a stacking context (like opacity, masks, and transforms).
Since you cannot destroy a stacking context after creating one, an element outside of a stacking context cannot interact directly with elements within that stacking context, and you cannot move elements between stacking contexts without moving them physically, you won't be able to work around the stacking issues without restructuring your physical HTML.
Having said that, you shouldn't have to make significant changes to your structure. The best you can do is simply move #slide-in-tip into #container2 as a sibling of #sidebar and #main (where exactly you place it doesn't matter, as long as they are all siblings). For whatever reason, though, this seems to cause severe flickering on scroll in the simulator — I don't have a physical device to test this on, so you'll want to test this thoroughly.
The only CSS-based workaround I can offer is to shorten your #slide-in-tip by giving it a left offset equal to the width of #sidebar. Note that you have conflicting padding declarations in your #sidebar rule such that the width of #sidebar is actually 310px, not 370px. Unfortunately, if portions of #sidebar are transparent and you want #slide-in-tip to be seen through those transparent portions, this will not be an option either.
I have a three-column layout that takes up 100% width and height of the browser (with padding). This layout contains two columns which also take up 100% height and should scroll independently.
Here is a jsfiddle: http://jsfiddle.net/KdZ9A/2/. Here is how it looks in Chrome (desirable -- individual columns scroll):
and Firefox and IE (undesirable -- body is scrolling):
This works perfectly in Chrome; however, the in Firefox and IE (10), the entire page scrolls instead of individual columns scrolling. I only want the columns to overflow and scroll -- not the body. Any idea how to make this work in Firefox and IE?
I've also tried a bit different approach using absolute positioning of the columns' contents: http://jsfiddle.net/KdZ9A/3/.
Here is the HTML I am using:
<div id="container">
<div id="inner">
<div id="palette">palette</div>
<div id="list">
<div class="content"></div>
</div>
<div id="editor">
<div class="content"></div>
</div>
</div>
</div>
I'm using absolute positioning to achieve 100% height and then display of table and table-cell inside that to achieve 100% height of the columnns:
* {
padding: 0;
margin: 0;
}
html, body {
width: 100%;
height: 100%;
}
body {
position: relative;
}
#container {
background-color: #f1f1f1;
position: absolute;
left: 20px;
right: 20px;
top: 20px;
bottom: 20px;
}
#inner {
display: table;
height: 100%;
}
#inner > div {
display: table-cell;
}
#palette {
min-width: 180px;
max-width: 180px;
width: 180px !important;
background-color: pink;
}
#list {
width: 55%;
min-width: 350px;
background-color: cyan;
}
#editor {
width: 45%;
min-width: 400px;
background-color: magenta;
}
.content {
overflow: auto;
height: 100%;
}
I was 5 minutes from giving up and HOLY CRAP...I GOT IT WORKING
http://jsfiddle.net/gFX5E/15/
This is based on the different approach I mentioned. I needed to wrap .content divs and make the wrappers position relative. I also added some headers to the columns.
HTML:
<div class="content-wrap">
<div class="content">
...
</div>
</div>
CSS:
.content-wrap {
position: relative;
height: 100%;
}
.content {
overflow: auto;
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
}
Seems to work in Chrome, Safari, Firefox, and IE8+.
And here is a more semantic HTML5 version which also adds a header to the top: http://jsfiddle.net/gFX5E/20/. I believe this will require use of html5shiv to work in IE8.
If you are willing to settle for a fixed total width, here is how:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box; /* makes filling up easier */
}
html, body {
height: 100%;
}
#container {
position: relative;
width: 980px;
height: 100%;
margin: auto;
background: grey;
}
#palette {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 800px;
background: pink;
}
#list {
position: absolute;
left: 180px;
top: 0;
bottom: 0;
right: 450px;
background: cyan;
overflow-y: auto;
}
#editor {
position: absolute;
left: 530px;
top: 0;
bottom: 0;
right: 0;
background: magenta;
overflow-y: auto;
}
</style>
</head>
<body>
<div id="container">
<div id="palette">Palette</div>
<div id="list" class="content"></div>
<div id="editor" class="content"></div>
</div>
<script>
$(function() {
for (var i=0; i<20; i++) {
$('.content').append('<p>Lorem ipsum [truncated for SO]</p>');
}
});
</script>
</body>
</html>
Demo on this Codepen: http://codepen.io/anon/pen/aqgCm?editors=100.
This is a pretty old post, but I thought I'd comment.
If you display: flex instead of display: table in your 1st example that should fix the issue.
Also setting your scroll container height to 100vh will also do the trick.
You have to understand that the browsers apply scroll only when they understand the size( i.e. height and width) of the content is greater than the size specified for it. In your case, the height you have specified for the div is 100%. This effectively tells the browser to keep increasing the size of the div till all the content fits in completely. Hence, this creates the situation where scroll isn't needed as the browser would 'fit' the entire content within this div.
So if you want the div (or the paragraphs contained in it) to be scrollable, then you would have to specify the height and then tell the browser to provide a scroll for the content that won't fit in the specified size.
I am not sure if you want the individual 'paragraphs' to be scrollable or the entire div( which contains these paragraphs) to be scrollable. In either case, you would need to provide a fixed height for the scroll to be useful. Your paragraph tag would need to have the following CSS applied to it :
p {
height: 200px; /*Some fixed height*/
overflow-y: scroll;
}
Here's an example of this: http://jsfiddle.net/y49C3/
In case you want your div called 'content' to be scrollable (as opposed to the paragraphs), then you would have to apply the aforementioned CSS to the div instead.
.content {
overflow-y: scroll;
height: 500px;
}
You can see that here: http://jsfiddle.net/qF7Mt/1/
I have tested this in Firefox (29) and IE 10 and it works fine!!!
Hope this helps!!!
I have header1 div in page and I want set position: fixed top and center in IE7 and IE6. at multi resolution.
EX Resolution
EX Resolution
I use this code in css:
.page
{
width:900px;
height:auto;
margin:auto;
}
.header1
{
width: 500px;
height: 60px;
float: right;
position: fixed;
display: block;
z-index: 1100;
margin: 0 50px 0 0;
}
html code:
<div class="page">
<div class="header1"></div>
</div>
OR
.page
{
width:900px;
height:auto;
margin:auto;
}
.header1
{
width: 500px;
height: 60px;
float: right;
position: fixed;
display: block;
z-index: 1100;
top: 0px;
right: 0px; /*right: X px*/
left: 0px; /*left: X px*/
}
html code:
<div class="page">
<div class="header1"></div>
</div>
it's working in IE 8+,.. but not working in IE7 And 6.
IE6 does not support position:fixed.
IE7 does support it, but has bugs.
Ultimately, you will not be able to get this working using pure CSS. You might be able to make it work using a javascript polyfill script that adds newer browser features to older IE versions.
The only polyfill script that I know of which includes this feature is ie7.js / ie8.js /ie9.js. This script adds a whole load of extra features to old IE versions, including position:fixed. It's not perfect, but it might just do the trick for you.
Hope that helps.
You can find out more about the browser support here: http://quirksmode.org/css/css2/
Add DocType Tag on top of the page
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
I've had similar problems but try
.page
{
width:900px;
height:auto;
margin:auto;
padding:0pt
}
This can lead to you putting more CSS for a less effect, IE6 can be problem.
position:fixed should be given to the parent container and not the child one
is this what you are asking for
.page
{
width:100%;
position: fixed;
top: 0px;
}
.header1
{
width: 500px;
margin: 0 auto;
height: 60px;
}
I wouldn't worry about IE 6 or IE7, IE 8, 9, & 10 are used more, and thats only a portion of internet users that don't really worry about the internet, the rest of us use Firefox, Opera, and Chrome.
I have a div which needs to fill out the height of the browser's viewport,but still says in the same position when the user scrolls the web page up and down. position: fixed; does this, but I am unable to use it as it's making the overflow scroll bar of the div jerky and slow. Is there an position or method that I can use so for example I currently have:
div.panel {
position: absolute;
top: 36px;
right: 0;
overflow: auto;
background: #636362;
padding: 0 0 20px 0px;
width: 290px;
height: 100%;
}
I'm not sure what you mean with "jerky and slow", because all scrollbars act the same. This is how I would resolve your issue:
HTML:
<div class="fixed">I'm fixed!</div>
<p>Rest of page</p>
CSS:
html, body {
/* make sure the page is at least height of viewport */
height: 100%;
}
body {
/* because the fixed div is no part of the flow,
make sure it is not overlapping the webpage */
padding: 0 0 0 100px;
}
.fixed {
height: 100%;
width: 100px;
left: 0;
position: fixed;
background: #e0e0e0;
/* only vertical-scrolling, but can be changed of course */
overflow-y: scroll;
}
JSfiddled Live example
Works in at least IE7, IE8 and Firefox.
Why does this not work? It aligns horizontally correct, but not vertically in Opera. In IE it dosent work at all.
http://img834.imageshack.us/img834/340/86238198.png
#footer
{
position: absolute;
top: 905px;
width: 100%;
min-width: 800px;
height: 95px;
margin: 0px;
background-image: url('footerbg.png');
}
#center
{
position: relative;
width: 20%;
height: 70%;
margin: auto;
background-color: red;
}
In Transitional (quirks mode), IE maintains the behavior of its older browsers, so as to not break pre-existing websites that were constructed to look ok in IE 5. So in IE 6 and up, if you do not define a Strict doctype, then it will resort to its old incorrect behavior of not honoring margin:auto.