I'm creating a website with a fixed header. The following code works fine in Chrome and Firefox, but IE9 (and probably earlier versions) ignores the margin-top of the .container, making it appear behind the .header (= sticked to the top of the page).
<!DOCTYPE html>
<html>
<head>
<style>
.header {
height: 100px;
width: 100%;
background: transparent;
border: 5px solid green;
position: fixed;
top: 0;
left: 0;
}
.content {
height: 200px;
width: 100%;
background: orange;
margin-top: 110px; /* IE ignores this */
}
</style>
</head>
<body>
<div class="header">Header</div>
<div class="content">Content.</div>
</body>
<html>
Oddly enough, if I switch the header and content...
<body>
<div class="content">Content.</div>
<div class="header">Header</div>
</body>
... IE9 renders the page correctly (as do other browsers).
I would like to avoid this, as it breaks the logical order of the document. Any suggestions?
simply give float:left; to class content.
.content {height:200px;width:100%;background:orange;margin-top:110px;
float:left;}
definitely it will works and never forget to give charset declaration for ie in header, its simply likes below.
<meta charset='utf-8'>
Related
I know this is a duplicate question, I've read through many questions on this particular question like this one.
But I can't for the life of me get mine to work. I've tried many combinations of height and min-height for my html and body, using both % and vh. I tried setting the margin to 0 as well but that doesn't help. I tried this on both Chrome and Firefox, neither browser works. There were some answers that suggested using position: absolute but that messes up the styling for all the content I have.
Some combos I tried:
html, body{
height: 100%;
min-height: 100%;
}
html{
height: 100%;
}
body {
min-height: 100%;
}
html{
height: 100%;
margin: 0;
}
body {
margin: 0;
min-height: 100%;
}
My HTML layout:
<html>
<head>
... stuff
</head>
<body class=".container">
... stuff
</body>
</html>
You can use a fixed position for the bottom, but that can leave you with display problems as content gets covered.
I recommend using something like
body {
height: calc(100vh - 100px);
}
if you want to leave 100 px for your header and footer
What you're looking for is position: fixed, which tells the element to be fixed to that location, regardless of the other content. Couple this with bottom: 0, to state that the element should be fixed to the bottom of the page:
body {
margin: 0;
}
div {
padding: 5px;
}
.container {
background: #DDD;
height: 50px;
}
.footer {
position: fixed;
bottom: 0px;
height: 20px;
width: 100%;
background: #DDD;
}
<body>
<div class="container">Text</div>
<div class="footer">Copyright</div>
</body>
Hope this helps! :)
Solution :You can use the html 5 elements like
Header,
Article,
Section,
Footer
And set there height and width according to your requirements...
you can use this code to create a fixed footer at the bottom of your page
.yourfooterclass {
position:fixed;
left:0px;
bottom:0px;
height:30px;
width:100%;
background:#999;
}
basically what this is doing is positioning the footer at the very bottom of the page, so it doesnt matter how much content you have on the page it will always be at the bottomn
Since I couldn't change anything on the height-property of the body, I found this solution at https://www.freecodecamp.org/news/how-to-keep-your-footer-where-it-belongs-59c6aa05c59c/1, also pure CSS:
The html structure:
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>
<div id="page-container">
<div id="content-wrap">
<!-- all other page content -->
</div>
<footer id="footer"></footer>
</div>
</body>
</html>
And the CSS accordingly:
#page-container {
position: relative;
min-height: 100vh;
}
#content-wrap {
padding-bottom: 2.5rem; /* Footer height */
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 2.5rem; /* Footer height */
}
I am trying to use Zen Grids to avoid spending hours fighting with my layouts as I have been. The main advantage that I wanted from it besides simplicity was avoiding the compounding sub-pixel rounding issues in most browsers (provided via floats and negative margins to position the elements rather than relying on the previous columns).
However, in IE7 I cannot get the layout to behave. I have IE7 legacy support on and the boxsizing.htc working correctly. The test page I made consists of a header, two side bars, a content area, and a footer. When positioning the elements using floats and negative margins as Zen Grids does, I end up with all of the elements stacking in the same physical space, as you can see below. Using Zen Grids results in the exact same behavior. This only happens with IE7 (I am not concerned with IE6).
I have tried setting haslayout on different elements with no success and I cannot find an example of the same issue to save my life.
Layout collapse screenshot.
I set up a jsfiddle example here:
jsfiddle
Here is the html:
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="css/style.css">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="container">
<div class="header">
<h2>Header</h2>
</div>
<div class="sideOne">
<h2>Sidebar 1</h2>
</div>
<div class="content">
<h2>Page Content</h2>
</div>
<div class="sideTwo">
<h2>Sidebar 2</h2>
</div>
<div class="footer">
<h2>Footer</h2>
</div>
</div>
</body>
</html>
And the CSS:
.container {
position: relative; /* Checked to see if haslayout was the issue */
zoom: 1;
width: 1000px;
background: silver;
}
.header {
float: left;
margin-left: 0;
margin-right: -100%;
width: 100%;
height: 60px; /* For visibility */
background: green;
}
.sideOne {
float: left;
clear: left;
margin-left: 0;
margin-right: -25%;
width: 25%;
height: 40px; /* For visibility */
background: purple;
}
.content {
float: left;
margin-left: 25%;
margin-right: -75%;
width: 50%;
height: 40px; /* For visibility */
background: orange;
}
I have the following code:
<!doctype html>
<html lang="en">
<head>
<title>Test</title>
<style type="text/css">
*
{
margin: 0;
padding: 0;
}
div#container
{
position: relative;
top: 100px;
left: 100px;
width: 640px;
height: 480px;
background: #ff0000;
}
textarea
{
position: absolute;
top: 20px;
left: 20px;
right: 20px;
bottom: 20px;
}
</style>
</head>
<body>
<div id="container">
<textarea></textarea>
</div>
</body>
</html>
If you test this in any other browser than IE you will see a red box and a textarea that fills the entire area with a 20px padding around it. However in IE (all versions) it will just show a tiny textarea.
The reason I am doing it this way is because I will be using the same effect for a popup that fills the screen and therefore the size is unknown which is why I just specify the position rather than using width and height.
How do I fix this to get it working in IE? jquery perhaps?
Just to confirm using width:100%;height:100%; will not work in this instance
The problem is that <textarea> is a replaced element and has an intrinsic width and there are rules - CSS2.1:10.3.8 - that govern what the eventual width will be. Ironically, Webkit is at fault here and Gecko is doing it right.
Using this CSS will make it work in Firefox3+, Safari and Opera and IE8+ which is unfortunate as you want it working from IE6 upwards.
IE6 and IE7 at least render the <textarea> at the correct width, so it is just the height that is incorrect. I strongly suggest that IE6/7 be left in this state since the <textarea> is usable. Progressive enhancement here allows modern browsers to render the box in a more accessible way but old browsers are still usable. Failing that, a quick, simple JavaScript function could be used to to set the height for IE6/7 if it must look the same in all browsers.
div#container {
position:relative;
top:100px;
left:100px;
width:600px;
height:440px;
background: #ff0000;
padding:20px;
}
textarea {
position:relative;
width:100%;
height:100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
Reference articles used for this answer
Absolutely positioned textareas
Firefox / IE textarea sizing quirk - workarounds?
there you go (you need to "play" with the textarea width percentage) you can hide the scrollbar with overflow:hidden;
<!doctype html>
<html lang="en">
<head>
<title>Test</title>
<style type="text/css">
*
{
margin: 0;
padding: 0;
}
div#container
{
position: relative;
top: 100px;
left: 100px;
width: 640px;
height: 480px;
background: #ff0000;
}
textarea
{
position: absolute;
top: 20px;
left: 20px;
right: 20px;
bottom: 20px;
width:93%;
height:92%;
}
</style>
</head>
<body>
<div id="container">
<textarea></textarea>
</div>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<title>Test</title>
<style type="text/css">
*
{
margin: 0;
padding: 0;
}
div#container
{
position: relative;
top: 100px;
left: 100px;
width: 640px;
height: 480px;
background: #ff0000;
}
.box
{
position: absolute;
top: 20px;
left: 20px;
right: 20px;
bottom: 20px;
}
textarea
{
overflow-y: scroll;
width:100%;
height:100%;
}
</style>
</head>
<body>
<div id="container">
<div class="box">
<textarea></textarea>
</div>
</div>
</body>
</html>
I have a container and 4 div’s inside it. My container is stretched to fill the entire window. In IE, if you re-size the window all the content re-sizes correctly, with all 4 margins around the container visible. I’m trying to get the same behavior in FF, yet I can’t seem to find the right CSS recipe.
Note, if you past the HTML and CSS code and examine the behavior in the IE, I’m trying to achieve the same behavior in FF.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>IE AutoResize</title>
<style type="text/css" media="screen">
html {
height:100%;
width:100%;
overflow: hidden;
margin-bottom:40px;
}
body {
height:100%;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
}
#container{
background-color:#808080;
height: 100%;
Valignment-adjust: central;
padding: 10px 10px 10px 10px;
}
#top {
background-color:#00FF80;
height: 10%;
}
#left {
background-color:#FF8000;
float:left;
width: 20%;
height:80%;
}
#right {
background-color:#3944C6;
width: 80%;
height:80%;
float:right;
}
#bottom {
clear:both;
background-color:#FF0000;
height: 10%;
}
</style>
</head>
<body>
<div id="container">
<div id="top">top</div>
<div id="left">left</div>
<div id="right">right</div>
<div id="bottom">bottom</div>
</div>
</body>
</html>
I am afraid this is another case of IE getting it wrong, and FF getting it right. You cannot have 100% height and then have an additional margins or padding top or bottom, you will need to find another way. If you could post your html or a link we may be able to guide further.
i have been trying to implement a bottombar for my site, however the vision i have seems to me to be rather difficult. Maybe you can enlighten me?
I want to have a bottombar that sits at the bottom of the browser window if the content does not spill over the edge, but if the content does spill over i want the bottombar at the bottom of the content.
I would prefer if it was CSS solution but it might be better/easier in something else, i dont know. Also no PHP.
I hope you understand me.
And thanks in advance for any answers.
Have you looked at http://www.cssstickyfooter.com/
Assuming the height of the bottom bar is fixed it's fairly simple. eg.:
<!DOCTYPE html "-//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>
<style type="text/css">
html, body { height: 100%; margin: 0; padding: 0; }
#content { min-height: 100%; }
* html #content { height: 100%; } /* IE6 hack */
#trailer { height: 2em; margin-top: -2em; background: yellow; }
#pad { height: 2em; }
</style>
</head><body>
<div id="content">
Content content content content content content content content content content content.
<div id="pad"></div>
</div>
<div id="trailer">
Bit at the bottom.
</div>
</body></html>
Something like this will do the trick, (note that the extra wrapping div with some padding-bottom is required in order to make sure the footer does not overlap the contents),
<html>
<head>
<title>Sticky Footer Test</title>
<style>
html, body {
height: 100%;
padding: 0px;
margin: 0px;
}
* {
margin: 0px;
}
#container {
min-height: 100%;
height: auto !important;
height/**/: 100%; /* for IE6 */
background: #ddd;
}
#footer {
position: relative;
background: #555;
margin-top: -100px;
height: 100px;
}
#content {
padding-bottom: 100px;
}
</style>
</head>
<body>
<div id="container">
<div id="content">
<p>Hello! I'm some content!</p>
</div>
</div>
<div id="footer">
<p>Hello! I'm a footer!</p>
</div>
</body>
</html>