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.
Related
I'm trying to get the classic footer at the bottom of page. The idea is that header and footer don't be fixed, to maximize content screen. It has to work in IE8, but the following code doesn't work. The wrong part is that IE leaves a white space below <footer>, although in Firefox works fine.
html, body
{
height: 100%;
}
header
{
height: 50px;
margin-bottom: 22px;
}
#content
{
box-sizing: border-box;
min-height: 100%;
height: auto;
margin-top: -72px; /* To avoid white space below footer. Works in FF, but not in IE*/
padding-top: 72px;
}
footer
{
clear: both;
height: 30px;
background: #222;
margin-top: -30px;
}
The html code is pretty standard:
<body>
<header>...</header>
<div id="content">...</div>
<footer>...</footer>
</body>
Is there a way to stick footer at bottom without fixing it in IE8?
P.S. I'm using HTML5Shiv for <header> and <footer>
I can't take credit for someone else's work... But this is great for accomplishing that:
http://www.cssstickyfooter.com
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
My footer if quite high so I'm wondering if it is possible to get the content to overlap it slightly whilst still remaining in the content flow?
I suppose the alternative is to make the footer a few thousand pixels high and position it at the bottom. It's not an elegant solution though, anyone have a better idea?
http://www.digiflipconcepts.com/temporary-images/footer-overlap.jpg http://www.digiflipconcepts.com/temporary-images/footer-overlap.jpg
That seems a nice idea. If you need overlapping, then some absolute position must be done.
Set your footer absolutely to the bottom of the page and z-index:0. Then your content z-index:1 and padding-bottom: (footer height - desired overlap).
You can use sticky footer which I found a while ago in this question
I made this which works in Firefox, but I can't get it to play nice with IE 7. Anybody's help would be awesome.
EDIT: Made it work
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>A CSS Sticky Footer with Overlap</title>
<style type="text/css">
body {
text-align: center;
}
.wrapper {
margin: 0 auto -142px;
position: relative;
text-align: left;
width: 700px;
}
.header {
/*Go download the header yourself from http://ryanfait.com/sticky-footer/header.png
Please don't steal the guy's bandwidth*/
background: transparent url(header.png) no-repeat scroll 0 0;
height: 160px;
}
.footer_bg {
/*Go download the header yourself from http://ryanfait.com/sticky-footer/footer.jpg
Please don't steal the guy's bandwidth*/
background: transparent url(footer.jpg) no-repeat scroll 0 0;
border: 1px solid blue;
height: 100%;
margin: 0 auto;
width: 700px;
}
.footer {
clear:both;
border: 1px solid red;
margin: 0 auto;
position: relative;
width: 100%;
}
.footer_bg p {
bottom: 4px;
color: #FFFFFF;
left: 0;
position: absolute;
text-align: center;
width: 100%;
}
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
height: auto !important;
min-height: 100%;
}
.push {
height: 142px;
position: absolute;
}
.footer {
height: 142px;
z-index: -1;
}
#content {
z-index: 10;
}
</style>
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
</head>
<body>
<div class="wrapper">
<div class="header">
<h1>CSS Sticky Footer</h1>
</div>
<div id="content">
<h2>A CSS sticky footer that just works</h2>
<p>We've all tried to use a <strong>sticky footer</strong> one time or another, but they never seem to come out right, do they? Well, the days of a hard to understand CSS-based <strong>sticky footer</strong> are thankfully over. In just a few simple CSS classes with minimal extra HTML markup, I've fashioned a <strong>sticky footer</strong> that even beginners can get a handle on. It's been tested in IE 5 and up, Firefox, Safari and Opera.</p>
<h2>Usage of the CSS</h2>
<p><q>Great! this is exactly what I'm looking for! Can I use it?</q></p>
<p>Absolutely. There are no terms, licenses, fees or requirements. Use it as you will. If you find the kindness to link to me on your site, I'd appreciate it, but it's by no means necessary. Have fun, and don't be afraid to ask me any questions or send me your thoughts.</p>
<p class="download">View the CSS or learn about using it</p>
</div>
<div class="push"></div>
</div>
<div class="footer">
<div class="footer_bg">
<p>Copyright © 2006-2008 Ryan Fait</p>
</div>
</div>
</body>
</html>
What can be a practical solution to center vertically and horizontally content in HTML that works in Firefox, IE6 and IE7?
Some details:
I am looking for solution for the entire page.
You need to specify only width of the element to be centered. Height of the element is not known in design time.
When minimizing window, scrolling should appear only when all white space is gone.
In other words, width of screen should be represented as:
"leftSpace width=(screenWidth-widthOfCenteredElement)/2"+
"centeredElement width=widthOfCenteredElement"+
"rightSpace width=(screenWidth-widthOfCenteredElement)/2"
And the same for the height:
"topSpace height=(screenHeight-heightOfCenteredElement)/2"+
"centeredElement height=heightOfCenteredElement"+
"bottomSpace height=(screenWidth-heightOfCenteredElement)/2"
By practical I mean that use of tables is OK. I intend to use this layout mostly for special pages like login. So CSS purity is not so important here, while following standards is desirable for future compatibility.
From http://www.webmonkey.com/codelibrary/Center_a_DIV
#horizon
{
text-align: center;
position: absolute;
top: 50%;
left: 0px;
width: 100%;
height: 1px;
overflow: visible;
display: block
}
#content
{
width: 250px;
height: 70px;
margin-left: -125px;
position: absolute;
top: -35px;
left: 50%;
visibility: visible
}
<div id="horizon">
<div id="content">
<p>This text is<br><emphasis>DEAD CENTRE</emphasis ><br>and stays there!</p>
</div><!-- closes content-->
</div><!-- closes horizon-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Centering</title>
<style type="text/css" media="screen">
body, html {height: 100%; padding: 0px; margin: 0px;}
#outer {width: 100%; height: 100%; overflow: visible; padding: 0px; margin: 0px;}
#middle {vertical-align: middle}
#centered {width: 280px; margin-left: auto; margin-right: auto; text-align:center;}
</style>
</head>
<body>
<table id="outer" cellpadding="0" cellspacing="0">
<tr><td id="middle">
<div id="centered" style="border: 1px solid green;">
Centered content
</div>
</td></tr>
</table>
</body>
</html>
Solution from community.contractwebdevelopment.com also is a good one. And if you know height of your content that needs to be centered seems to be better.
For horizontal:
<style>
body
{
text-align:left;
}
.MainBlockElement
{
text-align:center;
margin: 0 auto;
}
</style>
You need the text-align:left in the body to fix a bug with IE's rendering.
For this issue you can use this style
#yourElement {
margin:0 auto;
min-width:500px;
}
Is this what you are trying to accomplish? If not, please explain what is different than the image below?