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.
Related
I'm trying to create a header with position: sticky; and position: fixed; of one item inside it and second item without position: fixed;.
Here is the implementation: Codepen
The problem: when I open this Codepen in Chrome, everything is going well, but when I try this code in Firefox there is a strange blinking. You can try by yourself, just scroll down and up.
Just in case, here is the video: Youtube link
Here are the solutions that i've tried:
transform: translateZ(0); on header class is not working for me, because header__item stops moving.
Nested position: sticky; I can use position: sticky on header__item instead of position: fixed; but this solution is not working in Safari browser.
What I want: remove this blinking that you can watch on video.
Firefox version: 80.0.1 64-bit
OS: Ubuntu 18.04.5 LTS
NOTE: this bug may sometimes not reproduce on Windows (i don't know why), but always reproduces on Ubuntu or macOS operating systems. For Firefox 80.0.1 on my PC with Windows, everything works great.
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
background: skyblue;
height: 300vh;
}
.header {
width: 100%;
height: 250px;
background: green;
position: sticky;
top: -80px;
}
.header__item {
height: 150px;
width: 100px;
background: tomato;
position: fixed;
top: 0;
}
.header__second-item {
height: 80px;
width: 100px;
background: purple;
margin-left: auto;
}
<header class="header">
<div class="header__item"></div>
<div class="header__second-item"></div>
</header>
To start, try to replace from position: fixed; elements to position: sticky;
In Firefox, it will be fixed, but child elements with the sticky position are not supported by Safari.
The only way that I see - to detect the browser and replace the position in accordance with the browser.
For example:
.header__item {
position: fixed;
}
#-moz-document url-prefix() {
.header__item {
position: sticky;
}
}
I can't seem to center my navigation or footer in IE8.
I had to float my navigation just to get the dimensions to show correctly in IE8.
I'm using divs for the footer and nav because I know this language isn't going to be translated in IE8 and I'm still having issues. Below is the CSS that I am using for my footer, which works fine in Firefox and Safari. Also, I need this to be stationary so it somehow needs to involve margin: 0 auto; my issue can be viewed at http:www.vslateart.com/index.html (homepage alignment)
.footer {
display: block;
margin-left: auto;
margin-right: auto;
width: 200px;
}
Is there any sort of workaround so that this can translate to IE8?
Similar question: Using "margin: 0 auto;" in Internet Explorer 8
Your code looks perfectly valid.
Are you missing a doc type at the top of your page? Without the DOCTYPE, IE automatically goes into Quirks rendering mode.
<!DOCTYPE html>
Failing that - have you set the width of your parent to be greater than the width of .footer?
this code center a div to center (fiddle):
.footer {
display: block;
margin: 0 auto;
width: 200px;
}
I think you want to do this
.footer{
position: absolute;
display:block;
width: 200px;
margin-left: -100px;
left: 50%;
}
This should do the trick!
margin-left shoud be negativ and the width/2
so margin-left = (-1)*(width/2)
The position could be relative(may work better)
EDIT
I use this code to center my homepage
position: absolute;
width: 1000px;
min-height: 100%;
margin-left: -500px;
left: 50%;
This will make then window center until the window is 999px wide then it will missmatch.
Then use something like this
#media only screen and (min-width: 1000px){
div.screen-size-wrapper{
position: absolute;
width: 1000px;
min-height: 100%;
margin-left: -500px;
left: 50%;
}
}
#media only screen and (max-width: 999px){
div.screen-size-wrapper{
width: 100%;
min-height: 100%;
}
}
Tell me if this dosen't work :)
EDIT - This works for your webpage (i tried it)
Paste this in you container css
margin-right: auto;
width: 1200px;
margin-left: -600px;
left: 50%;
position: absolute;
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 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
I have an issue with CSS z-index on IE7 that I cannot seem to get to the bottom of.
#screen {
display: none;
background-image: url('/images/bg.png');
background-repeat: repeat;
position: fixed;
top: 0px;
left: 0px;
min-width: 100%;
min-height: 100%;
z-index: 10000;
}
<div id="screen"></div>
I have an overlay that appears on page load called r_box
<div id="r_box">
<div id="message_panel">
...Content in here...
</div>
</div>
#r_box
{
width: 335px;
height: 337px;
background: url("/images/panel.png") no-repeat scroll 0 0 transparent;
position: fixed;
margin-left: -150px;
margin-top: -130px;
left: 50%;
top: 50%;
z-index: 10001;
display: none;
}
#r_box #message_panel {
color: #fff;
z-index: 10001;
bottom: 95px;
}
However, the problem I am having on IE7 only is that on page load the screen div is always on top of r_box. I have tested this on IE8, IE9, FF, Safari and Chrome and it works on all these browsers. The only one where it is an issue is Internet Explorer 7.
Is this likely to be an issue with the screen or r_box DIVs or could this be something else?
This boiled down to a stacking context issue that was only apparent, as many have found, with Internet Explorer 7.
I decided to remove the problematic behaviour for IE7 only, as i'm a believer that an application does not need to look the same in every browser.