The following code does not work in IE. The DIV does not span entire page despite the fact it is set to left:0px and right:0px. Body element has big width according to debugger.
Why?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div align="center" style="position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px; background-color: red">
Some text
</div>
</body>
</html>
Yo can't use"left: 0; right: 0; " either left or right and same with top bottom in same container.
Use This
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div align="center" style="position: absolute; left: 0; top: 0; background-color: red">
Some text
</div>
</body>
</html>
Actually, margins are not required. and it is working here in IE also !
position: absolute; width:100%;height:100%;background-color: red;
if you want to use the whole page. use width:100% and height:100%
Related
<!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=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
margin: 0px; padding:0;
background:url(http://custdemos.com/synverse_portfolio/images/safercab_mobi.png) no-repeat left bottom;
height:100%
}
</style>
</head>
<body>
<div class="do">
X Content
</div>
</body>
</html>
I need to put that background image on body bottom, plz if anybody knows this issue tel me.
You need to give a min height to body. Here is the corrected jsFiddle link. Following is also modified css
body {
margin: 0px;
padding:0;
background:url(http://custdemos.com/synverse_portfolio/images/safercab_mobi.png) no-repeat left bottom;
min-height:500px;
}
What I'm trying to do is have a bootstrap like navbar where the actual navbar is around 960px in the center but have the background color span the entire width of the window.
However, when the window is less than 960px in width, and I scroll, the background doesn't go all the way to the end.
Is it possible to make this happen without having custom rules for max-width(960px)?
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test Page</title>
<style type="text/css">
#container {
width: 960px;
margin: 0 auto;
}
#nav {
height: 33px;
background-color: #cfcfcf;
}
</style>
</head>
<body>
<div id="nav">
<div id="container">
test
</div>
</div>
</body>
</html>
Thanks in advance!
Edit: Oops. Had an extra in there, though that wasn't the issue.
The height has to be in the inner div (#container).
try
#nav { background-color: #cfcfcf; }
#container {
height:33px;
width:960px;
margin: 0 auto;
}
see http://jsfiddle.net/wYGLj/
You need your nav div to span the entire page.
#nav { width:100%; }
will work in this case.
Your CSS is working as it should. So if you want it to extent the whole length of the screen, create a wrapper to handle that grey element. Like this.
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test Page</title>
<style type="text/css">
#wrapper {
width: 100%;
margin: 0;
padding: 0;
background-color: #cfcfcf;
}
#container {
width: 960px;
margin: 0 auto;
}
#nav {
height: 33px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="nav">
<div id="container">
test
</div>
</div>
</div>
</body>
</html>
I added
body {
min-width:960px;
}
which seemed to fix the problem.
I have one floating header div set to 1000px inside another div (width 1000px) and followed by a div with a smaller width. The problem is this table inside this div is on the left of the header.
If I add some character above the table, it is ok. Is this a bug?
This works fine in IE and Google Chrome.
<!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>
<title></title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<style>
#container
{
margin: 0px auto;
width: 1000px;
}
#header
{
margin-top: 15px;
width: 1000px;
float: left;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
aaa
</div>
<div style="width: 900px;">
<table>
<tr>
<td>
the wow
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
The question is not clear. If what you want is to display the table below the header, simply take out the
float: left;
Please make clear what you want.
I do have div with a fixed height, containing an Image higher than the div's height.
I want to position this image in the middle of the div, and I use jquery-ui position().
However the image is clipped, the contents outside the div is not shown. I tried the overflow-y: visible (overflow-x must be hidden). I want the image to be completely visible I think I'm missing something trivial.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8">
<title>Jeroen's Plaatjes Presentator</title>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" charset="utf-8">
<script src="js/jquery-1.5.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery-ui-1.8.10.custom.min.js" type="text/javascript" charset="utf-8"></script>
<script>
$(function() {
$('#focus_img').position({my: 'center center', at: 'center center', of: '#panel_1'});
});
</script>
</head>
<body>
<div id="wrapper">
<div class="scroll">
<div class="panel" id="panel_1">
<img src="images/middle/kameleon.png" alt="kameleon" id="focus_img" style="{width:239 height:160}"/>
</div>
</div>
</div>
</div>
<div id="content" style="margin-top:50px;margin-left:auto;">
<table width="100%">
<tr><td id="left" width="50%"><div class="stage"></div>
</td><td id="bright" width="50%"></td></tr>
</table>
</div>
</body>
</html>
the css looks like:
#wrapper {
padding-top: 150px;
}
#slider {
position: relative;
}
.scroll {
overflow-x: hidden;
overflow-y: visible;
width: 100%;
margin: 0 auto;
position: relative;
border: 2px solid black;
height: 50px;
}
Overflow is tricky business. One option is to increase the div height to fit your image, then either display: block; or float it.
Have you tried setting the overflow for panel_1?
I have problem with width using percentage in Mozilla Firefox.
In Firefox:
In Opera:
Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="author" content="adminite">
<title>Untitled 2</title>
<style>
#cont {
width:99.8%;
height:125px;
border:1px solid red;
background-color:#1ea1de;
margin: 0px 0px 0px 0px;
}</style>
</head>
<body>
<div id="cont">
</div>
</body>
</html>
A possibility is that you haven't reseted the browser default styles.
Try:
html, body{
margin: 0;
padding: 0;
}
If that's the case, you might benefit from using a reset stylesheet such as this one:
http://meyerweb.com/eric/tools/css/reset/