If I try to center my page by adding the following style rule
html, body {
margin: 0 auto;
width: 900px;
}
Flot works well on FireFox and Chrome, but on IE 11, when I select area on the screen, the yellow-marked-selected-area is not the same as the mouse-selected-area.
How can I solve it?
To reproduce: take Flot selection sample - http://www.flotcharts.org/flot/examples/zooming/index.html
and add the style rule for centering.
have you try by centering .container instead of html and body ?
form example
CSS
html,body {
margin:0;
padding:0;
}
.container {
margin: 0 auto;
width: 900px;
}
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Document Title</title>
</head>
<body>
<div class="container">
<!--your element place here-->
</div>
</body>
</html>
Related
I'am using bootstrap to create a page layout. My footer bound to the page bottom as described here. This works fine.
But when I'am place a footer inside of container with relative position, I can't to bound footer to the page bottom. Here is example
html,
body{
height:100%;
margin:0;
padding:0;
}
.container{
position:relative;
min-height:100%;
height:auto !important;
height:100%;
}
header{
height:120px;
background-color:#eee;
}
.middle{
background-color:#aaa;
}
footer{
height:120px;
background-color:#888;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>
<body>
<div class="container">
<header>
Header
</header>
<div class="middle">
Middle
</div>
<footer>
Footer
</footer>
</div>
</body>
</html>
Is it possible to do it with only CSS?
you need to add this css code to the footer
footer{
position: absolute;
bottom: 0;
width: 100%;
}
this will position the footer at the bottom of the first parent with a relative position which is in this case the container div
I am trying to design a web form in ASP.NET. In that I am trying to set a background color to different empty divs. Normally a simple html code like below works:
<html>
<head>
<style>
#header{
width:100%;
height:20%;
background-color:lightblue
}
#nav-bar{
width:100%;
height:5%;
background-color:lightgreen;
}
body,html{
margin:0;
}
</style>
</head>
<body>
<div id="header">
</div>
<div id="nav-bar">
</div>
</body>
</html>
But if I use this same snippet in ASP.NET, I fail to achieve the desired result. The browser displays nothing. My aspx code is as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head runat="server"><title></title>
<style type="text/css">
#header {
background-color: lightblue;
height: 20%;
width: 100%;
}
#nav-bar {
background-color: lightgreen;
height: 5%;
width: 100%;
}
body, html { margin: 0; }
</style>
</head>
<body runat="server">
<div id="header">
</div>
<div id="nav-bar">
</div>
</body>
</html>
So how can I set a background color to an empty div in ASP.NET? Any help would be much appreciated. Thanks!
The problem is that your #headerand #nav-barhave percentage heights. You'll see if you change them to pxdimensions, they empty div's still show up. So your problem doesn't have anything with ASP.NET it's just a CSS issue.
If you want the heights to be responsive to the user's screen, you should try the vhtag. This stands for viewport height. So if you have 20vhfor example, it will take up 20% of the users screen height.
See my updated JSfiddle:
http://jsfiddle.net/0mr9z6hy/2/
percentage heights may work differently across browsers
but one problem is you have no height specified on the body so the height is only really the height of the actual content of your page which is not much.
html, body{
height: 100%;
}
I cannot seem to remove the spacing between the top of the page and the <div> in this example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Index</title>
<style type="text/css">
html, body{
padding: 0;
margin: 0;
}
#container{
background-color: #808080;
}
</style>
</head>
<body>
<div id="container">
<div id="inner-container">
<h3>Index</h3>
</div>
</div>
</body>
</html>
I have narrowed it down to this line:
<!DOCTYPE html>
It seems removing this aligns the <div> to the top of the page. I can't see a way in CSS to achieve the same thing.
remove the margin from your <h3> as well
h3 { margin-top: 0 }
DEMO
Margins collapse into each other.
The top margin of html (0), body (0), #container (0), and h3 (not 0) merge into a combined non-zero top margin between the first content and the edge of the window.
Set h3 { margin-top: 0 } to remove it.
(Although you should start your document with a heading (h1) not a sub-sub-heading (h3).)
Actually Default Margin Of H1 to H6 is the problem you are facing so overriding this value will solve your problem.
h3 { margin-top: 0;margin-bottom: 0; }
Extra Info:
You also might want to look into using a CSS reset script before starting a project so you don't have to worry about little things like this.
I have this simple code in css:
#main {
height: 100%;
min-height: 500px;
background-color:black;
overflow: auto;
}
and this simple html code:
<html>
<head>
<title>Benvenuti in Egnomia</title>
<link rel="stylesheet" type="text/css" href="./prova.css">
<body>
<div id="main">
</div>
</body>
</html>
If i resize the window ie 9 scroll bar doesn't work, the min-height (also for width ) are not matched.
Why? On chrome, firefox and all others work fine!!
If you add the HTML5 Doctype this problem is fixed.
<!DOCTYPE html>
<html>
<head>
<title>Benvenuti in Egnomia</title>
<link rel="stylesheet" type="text/css" href="./prova.css">
<body>
<div id="main">
</div>
</body>
</html>
IE9 renders websites using a compatibility mode unless a doctype is detected.
Actually if you add the html5 doctype the behaviour is just consistent across the browsers, it doesn't do what you originally set out to do.
To fix entirely add this to the CSS file
html, body
{
width: 100%;
height: 100%;
margin: 0;
}
This is an embarrassingly basic problem, but I've been wracking my brains trying to find the solution and finally the frustration got too much for me...
All I'm trying to do is center a website in IE7. It works fine in Firefox, Safari, IE8, and Chrome. Just not IE7:
#container
{
margin:0 auto;
width:1035px;
}
I just can't see how this can go wrong. I've tried strict and transitional doctypes, I've also put the body in a text-align:center (makes no difference).
Any advice on this matter would be gratefully received.
Ok, here's (some of the) surrounding code:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="css/styles.css" media="screen" />
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="css/ie6.css" />
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="css/ie7.css" />
<![endif]-->
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="css/ie8.css" />
<![endif]-->
</head>
<body>
<div id="container">
<div id="content-container">
<div id="content">
/* content */
</div>
</div>
</div>
</body>
</html>
CSS (main):
html,body
{
text-align: center;
background-color:#F8F5EF;
height:100%;
margin:0;
padding:0;
width:100%;
}
#container
{
margin: 0 auto;
width:1100px;
}
#content-container
{
float: left;
width: 1100px;
background-image:url('../images/BG1.gif');
background-repeat:no-repeat;
background-position:0px 0px;
}
#content
{
float: left;
width: 778px;
padding: 15px 0px 80px 15px;
margin: 0 0 60 0px;
}
The IE7.css file doesn't modify those items.
Thanks!
G
Without posting your surrounding HTML/CSS we can't really help, as this code works in all IE (just tested)
Live Example
Which leads me to believe you have something affecting the styles. If you can show that or provide a link, I think more help can be provided.
Here is the CSS used:
#content {
width: 100px;
margin: 0 auto;
border: 1px dashed red;
}
HTML used:
<div id="content">
content here
</div>
Updated code, using your css/html provided:
http://jsfiddle.net/hyVjs/2/
This code is fine. One of your sub css files is messing you up :)
Have you tried removing your conditional css files and see if it still isn't working?
Make sure you have set the DOCTYPE. If not IE will enable quirk "dirty mode"
text-align is for aligning text...
in ie7 make sure you have given the parent container a width other than auto then all should be well.
You could try doing this for your container:
#container {
position: absolute;
margin:0 0 0 50%;
width:1100px;
left: -550px; /*half the element width*/
}
If the above doesn't fit your needs, try position:relative;
I found using percentage margins worked for IE7 when nothing else did. Though auto margins seem to work sometimes - your code in jsFiddle seemed fine under IE7.
The negative positioning to the left is needed to bring back the element, which is centered from its left edge.
If the container is a DIV then
#container
{
margin:0 auto 0 auto;
position:relative;
width:1035px;
}
if it does not work, use a css-reset first. It will definitely work.
try using
display:block;
for the container
Yeah, if I'm going to center a container, I usually text-align:center; the body and left align inside the container for backwards compatibility. Old habit I'm going to kill some day.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>a box</title>
<style>
body { text-align:center; }
#wrap { width:36em; padding:2em; margin:1em auto; text-align:left; background:#eee; }
</style>
</head>
<body>
<div id="wrap">…</div>
</body>
</html>