This CSS works on firefox and chrome, but for some weird reason it wont work on IE =(
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>I hate u, ie :p</title>
<style>
header>nav, main, footer>nav {
max-width: 500px;
padding: 0em;
margin: 0em auto;
}
header, footer { min-width: 100%; background-color: #c0c0c0;}
main { background-color: yellow; }
main>section, main>aside { display: inline-block; }
main>section { background-color: aqua; }
main>aside { background-color: pink; }
</style>
</head>
<body>
<header>
<nav>
<ul><li>Header is centered =)</li></ul>
</nav>
<nav>
<ul><li>Header (nemu 2) is centered =)</li></ul>
</nav>
</header>
<main>
<section>
<h1>Why IE won't center me?</h1>
</section>
<aside>
<p>Stackoverflow: please help me</p>
</aside>
</main>
<footer>
<nav>
<ul><li>Footer is centered =)</li></ul>
</nav>
</footer>
</body>
</html>
I'd appreciate it if you help me fix this, preferably without adding/removing elements. I'd like to keep the current semantic if possible. If not, o well...
It is worth to mention that if I do something like <main><div>...</div></main> and add main>div { margin: 0em auto;} IE (and all other browsers, as expected) center main's content. But like I mentioned, I'd like to not break the semantics.
IE does not support the main element. To get it to work, however, you can just set main { display:block; } and it will work. This is a similar fix to the other new HTML5 elements, such as section and nav, which weren't supported but could be added by just adding that CSS.
As I don't have enough reputation, I post my idea as an answer:
My guess is, that you have to add position: relative; for your .main.
Browsers have a default.css with default values for keys you didn't set. I think (but didn't check) the IE has different std-values than other browsers. That could cause problems.
The main element is not supported in IE:
MDN
caniuse
Which I believe means there is no default styling for the main element, so you will have to add it. Most reset stylesheets will do this for you for the newer, more semantic elements.
Add display: block to your CSS selector for main and it should work.
main {
display: block;
max-width: 500px;
margin: 0 auto;
}
Related
Hi everyone I have a html page with big table and when I print the page I want to print footer too at very bottom on every page. I did not find a solution that does this 100%.
What I found is we can use tfoot, this will print on every page at the bottom but not on the last page, like example below
[tfoot example-1][1]
[tfoot example-2][2]
I found another solution which is to use position fixed, it did work but it covers last row of the table in the page. Like example below
[Position fixed example-1][3]
[Position fixed example-2][4]
the style that I use
thead{
display: table-header-group;
}
tfoot{
display: table-footer-group;
}
tr,td{
border: 1px solid;
page-break-inside: avoid;
}
.footer{
position: fixed;
bottom: 0;
text-align:center;
width: 100%;
padding-top: 10px;
}
#media print {
tr {
page-break-inside: avoid;
}
}
Can anyone help me with one of these problems or if there is a solution that I haven't found.
[1]: https://i.stack.imgur.com/DWCZ2.png
[2]: https://i.stack.imgur.com/mkQAb.png
[3]: https://i.stack.imgur.com/vTpam.png
[4]: https://i.stack.imgur.com/t0LQu.png
A display flex css style.
<html>
<head>
<title>this is title</title>
</head>
<style>
.main-container {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-between;
}
</style>
<body>
<div class="main-container">
<main>
<h1>every thing within this.</h1>
</main>
<footer>this is footer.</footer>
</div>
</body>
</html>
and have more things in internet. you can search make html footer at bottom. or link
There's also break, break-before and break-after properties which extend the page-break properties for images, code snippets, tables, and lists. Applying break-after to the footer may solve your problem.
I have run into a problem where IE is not rendering my page correctly.
Here is the site: Cakeball Flavors
Google Chrome
Internet Explorer 11
Basically I'm trying to make the main element 1000px wide, but internet explorer is failing to accomplish this. I'm utilizing max-width of 1000px and width of 100% for a fluid layout, but IE seems to be ignoring it. I've double-checked the code inspection in both browsers to ensure that nothing is overriding it.
Markup
...
<body>
<header>
...
</header>
<main>
<header>
<h1>Flavors</h1>
</header>
<h2>Basic</h2>
<figure>
<img src="...">
<figcaption></figcaption>
</figure>
...
</main>
...
Style
...
body {
margin: auto;
background: white;
text-align: center;
}
main {
width: 100%;
max-width: 1000px;
margin: -1rem auto -1rem;
text-align: left;
}
Thanks to #steveax, I was able to figure out the problem is IE's lack of support for the main element. After a further 30 minutes of research and testing I came up with a solution.
In my head tag, I added the following code above all my css links:
<script>document.createElement('main');</script>
In my stylesheet I added:
main { display: block; }
Now the page correctly renders in Internet Explorer (10 & 11 at least).
MyPage.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title>Color Flash Cards</title>
<link rel="stylesheet" href="css/index.css" />
</head>
<body>
<div id="header">
<div id="title">
<h1>Color Flash Cards</h1>
</div>
</div>
</body>
</html>
index.css
body{
background-color: #31859C;
margin-left: 0px;
margin-top: 0px;
overflow-x: hidden;
}
#header{
margin-top: 0px;
height: 120px;
background: #9838CE;
}
#title{
margin-top: 0px;
}
result:
Where is the margin that is at the top (above the purple) coming from? And what do I need to do to get rid of it? I could use negative values for margin-top to do it but is that the "real" solution here?
All headings have a default margin that can be canceled out with:
h1 {
margin: 0;
}
Demo:
I would recommend using a css reset code like this one if you want to avoid these quirks and style them yourself.
One of two things might be causing this:
Padding in the body? Add padding: 0; to body.
The top margin on the H1. To combat this add overflow-hidden; to #header
Adding overflow: hidden to the #header will cause the header DIV to contain it's contents (including the margin on the H1).
Set the margin of h1 tag to 0:
h1 { margin: 0; }
See jsFiddle demo.
Try setting the margins of html to 0 as well.
html {
margin:0;
padding:0;
}
Two things:
You might want to add
body{
padding:0;
}
but that's not the real issue, its the H1 tag that is spoiling the layout
add this to your css
h1{
margin-top:0;
}
here is a little fiddle
use reset css for default browser setting will be reset.
http://meyerweb.com/eric/tools/css/reset/
enter code here
I'm having a little trouble having this behave exactly as I want across all browsers, but I swear I've done this before:
<!html>
<head>
<style type="text/css">
div { width:300px; }
ul { list-style:none; margin:0; padding:0; }
li { margin:0.25em 0.5em 0.25em 0; background:transparent url(http://cdn.iconfinder.net/data/icons/basicset/pencil_16.png) no-repeat scroll 0 0; float:left; }
a { padding-left:24px; }
</style>
</head>
<body>
<div>
<ul>
<li>Amazon</li>
<li>Barnes & Noble</li>
<li>Books-A-Million</li>
<li>Borders</li>
<li>Indie Bound</li>
<li>Powell's</li>
</ul>
</div>
</body>
This looks fine and dandy in most modern browsers, but in IE 6 and 7, the "Books-A-Million" link wraps.
I'd like to have the list items variable width and wrapping to new lines, but the links inside not wrapping. I can't figure out the magic combination of display types and CSS browser hacks to make it work. Has anyone tackled this issue before?
Add white-space: nowrap; to the a tags
I want my page's BODY not to be scrollable but a DIV inside the BODY should be scrollable.
I have this in my css file:
body {
overflow:hidden
}
.mainSection {
overflow:scroll
}
but it doesn't work and the DIV doesn't become scrollabel (it just shows two disabled scroll bars for the DIV)!
.mainSection needs to have a height. Otherwise the browser can not know what it should consider overflow.
Are you sure the style for your mainSection class is being applied? You can use a tool like Web Developer or Firebug (for Firefox) to make sure that the style is being correctly applied. Also if you just have one mainSection, you might want to use an id instead of a class. the tag in html would then be <div id="mainSection"> instead of <div class="mainSection"> and the css becomes #mainSection { ... } instead of .mainsection { ... }
Here is the whole thing well explained
http://www.w3schools.com/css/pr_pos_overflow.asp
You can experiment.
I had the same problem before, but I could manage to solve it just with overflow: auto;. Try it and it will work.
Updated
The full html code looks like this
<html>
<head>
<title>Test page</title>
<style type="text/css">
#scrollable_div{
overflow: auto;
width: 100px;
height: 100px;
border: solid thin black;
}
</style>
</head>
<body>
<div id="scrollable_div">my div text</div>
</body>
Works perfectly in any browsers. I tested myself in Chrome, IE, Safari, Mozilla, and Opera