I use this style information to make my footer stick to the bottom of my web pages and it works super in FF, Chrome and Opera. Only in IE, the footer appears in the middle of the page instead of at the bottom.
body { margin: 0; padding: 0; height: 100%; font-family: Georgia; }
#parent
{
min-height: 100%;
position: relative;
}
#header { position: relative; left:0px; top:0px; width: 100%; height:45px; background-color: black; }
#content { padding-bottom: 150px; position: relative; }
#footer { position: absolute; left: 0px; width:100%; bottom: 0; height:80px; background-color: black; }
The HTML structure is as follows:
HTML body tag
parent
header
content
footer
Update
I figured if I add a conditional this selector for IE, it works in both browsers.
#parent { height: 100%; /* min-height: 100%; */ }
Now, would someone please tell me if it is legal to add a conditional CSS comment in a .css file that is included as an external in an HTML file? I guess not. How do I go about using this conditional comment without using an additional IE only CSS file?
This should help:
html {
height: 100%;
}
Take a look in the source code and try it on any browser: Footer at the bottom of the page. It works on IE7, IE8 and IE9, only IE6 and under will not becouse of min-height property. I think putting correct DOCTYPE will fix your issue. Hope that helped.
I had the same problem a few weeks back and a found a pretty good tutorial on this. Click here! The general idea behind this solution is to create a wrapper which soaks up most of the page, leaving only enough room for your footer to be positioned at the bottom of the page. This trick definitely works in IE.
Related
First let me say that it seems Internet Explorer 8 completely ignores box-sizing: border-box; declaration on a box, when there is a min-height set on it as well (this post confirms that: https://stackoverflow.com/a/11714178/3355252).
Now let me describe what I need to accomplish. Here's my site (much simplified): http://jsfiddle.net/ttKP3/. Doctype is HTML 4.01 Strict.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head></head>
<body>
<div id="header">header</div>
<div id="main">main</div>
<div id="footer">footer</div>
</body>
html,
body {
height: 100%;
margin: 0;
}
#header,
#footer {
height: 100px;
}
#main {
box-sizing: border-box;
min-height: 100%;
width: 300px;
margin: -100px auto;
padding: 100px 0;
}
What I need is footer at the very bottom of the screen and the main box filling the whole screen from the top to the bottom. Also, when the content gets bigger (click Add content in JSFiddle few times) I need the main box to enlarge and footer to move accordingly.
It renders just fine in Chrome and Firefox. You probably won't be able to run it in IE8 (it doesn't render JSFiddle), but border-box property on main is completely ignored and so that main box is 200px higher than it should be - the footer is below the visible area of screen.
As it looks like it couldn't be handled by using border-box and min-height, I'm looking for any other solution for IE8. The only one that came to my mind was using calc, that is height: calc(100% - 200px); but IE8 doesn't support that as well. By the way I have a conditional adding ie8 class on html element when ran in IE8, so I don't need a cross browser solution - just CSS to get the desired layout in that particular browser.
After reading once more this sticky footer post on CSS-tricks and tinkering a bit, I found a clean solution that doesn't require any markup changes (you can do with only 3 containers: header, main and a footer) nor using box-sizing at all. It works in IE8 just as well.
html,
body {
height: 100%;
margin: 0;
}
#header,
#footer {
height: 100px;
}
#header {
margin-bottom: -100px;
}
#footer {
margin-top: -100px;
}
#main {
min-height: 100%;
width: 300px;
margin: 0 auto;
}
/* Space for header and footer. */
#main:before,
#main:after {
display: block;
content: "";
height: 100px;
}
You may like to apply the margins to main instead of header and footer.
Here's my fiddle with this solution applied: http://jsfiddle.net/ttKP3/1/
I've found quite a few places that mention Ryan Fait's technique: http://ryanfait.com/sticky-footer/
And also found this one: http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
But they both seem dated and hacky, even if the code does validate. Is there something simpler that works in modern browsers?
This is cleaner way of making sticky footer where there is no need for the having additional wrappers and works across all browsers including IE8.
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 110px; /* bottom = footer height + margin of the footer */
}
footer {
position: absolute;
left: 0;
bottom: 0;
margin-top:10px;
height: 100px;
width: 100%;
}
Easy! Use position:absolute; and bottom:0;
This webpage being in beta, http://porkystuff.com, has a very big problem.
The webpage is larger than the BODY and the HTML tags. I've checked this with developer tools in both Chrome and Firefox.
I HAVE tried adding html, body{ height:100%; }.
Got it!! in your CSS a class name sidecontent height is 150%.
.sidecontent {
position: absolute;
width: 180px;
height: 150%;
left: 820px;
top: 50px;
}
in my case i just needed to stretch the body and html tag to full-page size by these CSS tricks:
html {
min-height: 100% !important;
}
body {
min-height: 100vh !important;
}
reference link : https://makandracards.com/makandra/39473-stretching-an-html-page-to-full-height
I can't seem top find a definitive answer to this.
The following styling will remove scrollbars from an iframe in firefox and chrome but I can't seem to find an alternative for ie. I really don't want to have to set the scrolling attribute. Any ideas?
iframe
{
height:500px;
width:500px;
overflow:hidden;
}
iframe::-webkit-scrollbar
{
display: none;
}
edit: I would have no control over the html for the iframe source. IE sadly means ie7 upwards.
How about this trick? (If you just don't want to show scrollbars)
Your <iframe> must have a container. So do something like this:
<container>
<iframe src="http://www.domain.com"></iframe>
</container>
And your CSS:
container {
width: 500px;
height: 500px;
overflow: hidden;
position: relative;
}
iframe {
width: 517px; /* scrollbar = 17px */
height: 517px; /* scrollbar = 17px */
position: absolute;
top: 0; left: 0;
}
My default page works fine in ie but Firefox it has problems with the a:link.
At my page http://www.printer-ink-toner.co.uk and half way down is a link to my status on ebay.
For Firefox this link does not work and for ie it does. I can reproduce this behavior on my development PC also.
The link is contained in a float div block called "centercol50pct" which has CSS of
.centercol50pct {
position: relative;
float: left;
width: 380px;
margin:0px 5px 0px 0px;
}
If the float:left; is removed it works fine. changing any other parameter does not have an effect on the problem.
In addition the search drop downs do not work in Firefox either. I assume it is related but thought I would try and solve the more simple 'a link' problem first
Thanks
Nigel
The centrecolLowerblock div was covering up the above content, therefore making the link unreachable.
Change
#centrecolLowerblock {
position: relative;
top: 20px;
}
to
#centrecolLowerblock {
clear: both;
position: relative;
top: 20px;
}
Also your dropdowns are not working due to the same problem (an element is overlapping them). Try changing.
h3.h3_Largeblue {
color: blue;
font-size: 20px;
}
to
h3.h3_Largeblue {
clear: both;
color: blue;
font-size: 20px;
}
That should sort the problem's :)