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.
Related
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
The #footerdetails div of my page is absolutely positioned and anchored to the bottom. (i know, IE problem iminent)
anyway...
http://talga.sanscode.com/blog
Take a look at the footer in IE 7 (ie 8 compat). has a number all the way on the right hand side of the screen.
In every other browser it's on the left where it should be.
Any ideas how to fix this?
Jason
#jason;
i saw it in IE may you have to define width like width:200px; to your #footerdetails div because in IE7 it's take width 100% of the screen.
css
#footerdetails {
color: #FFFFFF;
display: block;
height: 100px;
left: 0;
position:fixed;
text-align: right;
top: 0;
width: 200px;
z-index: 100;
}
IE 7 doesn't do position:fixed, can you not make it absolute to the sidebar?
Try this:
HTML:
<div id="sidebarmenu_container">
<ul id="sidebarmenu"/>
<div id="footerdetails"/>
</div>
CSS:
#sidebarmenu_container {
position: relative;
}
#footerdetails {
position: absolute; //instead of position: fixed;
}
I am having issues making my footer stick to the bottom of the page in all browsers.
I have the following document structure:
<html>
<head>
</head>
<body>
<div id="wrapper">
<div id="header">
<ul>
<li>home</li>
</ul>
</div>
<div class="expander"></div>
</div>
<div id="footer" class="expander">
</div>
</body>
</html>
Relevant CSS is:
body
{
margin: 0;
height: 100%;
}
#wrapper
{
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -116px;
}
.expander
{
height: 116px;
}
#footer
{
width: 100%;
}
#header ul
{
list-style: none outside none;
clear: both;
margin: 0;
}
#header li
{
margin: 0;
margin-right: 20px;
padding: 0;
display: inline-block;
height: 85px;
padding-top: 20px;
margin-bottom: -20px;
}
When used without any doc type, the page renders as I intend it to in Chrome and Firefox. In IE8, however, the list item tabs are on separate lines
When I add an XHTML doctype, the page renders correctly in IE8 except the footer is not drawn at the bottom of the page in IE8, Chrome or Firefox, i.e. the footer sits directly below the menu bar.
Example doctype:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
What am I doing wrong?
Testing with the DOCTYPE in the code:
Changing:
body
{
margin: 0;
height: 100%;
}
to:
html, body
{
margin: 0;
height: 100%;
}
fixes it for me.
You need to let the footer stay at the bottom of the page
i.e.
body, html{
margin:0;
height:100%;
}
#footer{
position:absolute;
bottom:0px;
width:100%;
}
Note: this solution is thought to avoid wrapper height tricks/problems
In addition to using the wrong doctype, as I mentioned above, changing or removing doctypes is never an option. Essentially, it's the set of rules you are telling the browser you are using to create the page. You can't be changing the rules in midstream or on a whim. Change/remove the doctype, change the rules.
Never, EVER use IE as a reference for how things work. Inept at best, it's a decade or more behind all others in modern standards and compliance. If it's working in FF and Chrome then your markup is most likely correct.
Life has just called and I hope to give more info later.
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.
I have the following code:
<html>
<head>
<style type="text/css">
DIV#left
{
z-index: 100;
position:absolute;
left:0px;
top:0px;
width: 100px;
height: 100px;
background-color: #e7e7e7;
}
DIV#right
{
z-index: 100;
position:absolute;
left:100px;
top:0px;
width: 100px;
height: 100px;
background-color: #e20074;
}
</style>
</head>
<body>
<div id="left">
1
</div>
<div id="right">
2
</div>
</body>
</html>
But I need the right div section to be expanded to the end of the page (width=100%)
So here is how I changed the width for DIV#right:
width: expression(parseInt(document.body.offsetWidth)-100);
Unfortunately, this doesn't work with IE any more! IE8 and firefox ignore expressions. How can I overcome this issue?
Many thanks in advance!
You shouldn't use CSS expressions like that - they're slow, old, and most importantly, proprietary, meaning it won't work on anything other than IE.
Here's a simple solution that works on Firefox, IE8 and IE7 [but not IE6 though]: Give the right div a right: 0 to force the div to expand out all the way to the end of the page:
#right {
position: absolute;
left: 100px;
top: 0;
right: 0;
height: 100px;
}
See: http://jsfiddle.net/hEeVY/
If you're using expressions for anything, it's probably better off to use Javascript to achieve the same effect.
Yes, CSS Expressions are slow, they affect performance. Along with they they compromise with security as well. Solution specified by Yi Jiang must work.
Now all browsers will go on same terms. To know more on why Expressions were dropped please check http://techbookshelf.blogspot.in/2012/11/css-expressions-in-ie8-and-higher.html