I've been writing a small notice board site in ASP.NET and nothing i do will make it work properly in IE6. The main page has a header DIV, with the content region below it. Within this region are three further regions, a search facility in the top left, a list of notices below it, and the currently displayed notice to the right of these two. The search and notice list regions are 240px wide, and the displayed notice region takes up the rest of the width. The problem is that the notice list and displayed notice regions should both scroll if the content is bigger than the displayed area (i.e. overflow:auto style) but this doesn't happen in IE6. Everything else displayes fine. The layout is as follows:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<title>Notice Board</title>
<style type="text/css">
body
{
margin:0;
border:0;
padding:0;
height:100%;
max-height: 100%;
overflow: hidden;
}
#header
{
position:absolute;
top:0;
left:0;
width:100%;
height:130px;
overflow:hidden;
}
#footer
{
position:absolute;
bottom:0;
left:0;
width:100%;
height:0px;
overflow:hidden;
}
#content
{
position:absolute;
top:130px;
left:0;
bottom:0px;
right:0;
overflow:hidden;
}
* html body
{
padding:130px 0 0 0;
}
* html #content
{
height:100%;
width:100%;
}
#leftdiv
{
position:absolute;
left:0;
width:240px;
top:0;
height:100px;
overflow:hidden;
}
#listdiv
{
position:absolute;
left:0;
width:240px;
top:100px;
bottom:0px;
overflow:auto;
}
#noticediv
{
position:absolute;
left: 270px;
right:0;
top:0;
bottom:0;
overflow:auto;
}
</style>
</head>
<body>
<form id="form1" runat="server" method="post">
<div id="header" >
<!-- Header content goes here -->
</div>
<div id="content">
<div id="leftdiv">
<!-- Content region for the search facility goes here -->
</div>
<div id="listdiv">
<!-- Content region for the notice list goes here -->
</div>
<div id="noticediv" >
<!-- Content region for the displayed notice goes here -->
</div>
</div>
</form>
</body>
</html>
Any ideas?
For a DIV to scroll it must have at least a height and/or a width specified, depending on which dimension you want it to scroll through. Some browsers (eg Firefox) will infer a height if given both a top and bottom value. IE6 will not, however.
If you are still stuck with supporting IE6, then a lot of CSS issues are resolved by using Dean Edwards' IE7 scripts -- I've not faced this particular problem, but have been able to take designs from more compliant browsers and have them "just work" using these scripts. With the magic of IE conditional comments, you can just serve the fix-ups to those people still stuck with browsers that are 2 versions behind current.
Related
How do you get CSS to scale down two absolute positioned images, side-by-side, within their own div but inside a parent wrapper?
I have looked at many stackoverflow questions, but could not find an answer for how to deal with two or more images. I have tried multiple CSS examples but to no avail.
I put together a mock example that simulates what I’m trying to do. See http://www.netplayhockey.com/test.php. Please note that there is a reason the images are different widths and in their own div (has to do with some absolute text positioning that I removed for this demo).
The page width is 1024px (image1 598px, image2 426px). If you reduce the width of the browser, I would like both images to scale down. But, instead, the images do not change size. In fact, image2 overlaps image1.
It’s doing what I want when browser width is less than 600px (I picked 600px as an example, I really want this to occur for mobile but not iPad), I want image2 to move under image1. And the images to be centered.
Note: If I use relative positioning and float, I don't get the desired centering results (the images stack when screen is less than 1024px, and they don't center).
Attached is the HTML and CSS:
<!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></title>
<link href="test.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
<div class="footer-wrapper">
<div class="footer">
<div class="footer-left"><img src="image1.png" /></div>
<div class="footer-right"><img src="image2.png" /></div>
</div>
</div>
</div>
</body>
</html>
body {
position:relative;
background:#999;
margin:0;
padding:0;
}
.container {
position:relative;
max-width:1024px;
margin:0 auto;
}
.footer-wrapper {
position:relative;
}
.footer {
position:relative;
}
.footer-left {
position:absolute;
left:0;
}
.footer-right {
position:absolute;
right:0;
}
.footer img {
max-width:100%;
text-align:center;
height:auto;
}
#media all and (max-width:600px) {
.footer-left {
position:relative;
text-align:center;
}
.footer-right {
position:relative;
text-align:center;
}
}
Yes. Thank you! I slightly modified the CSS (removed some stuff that wasn't needed for it to work like I want it). - I had to re-edit, to show CSS code. after I posted my thank you
.footer {
position:relative;
}
.footer-left {
position:relative;
float:left;
width:58.4%;
}
.footer-right {
position:relative;
float:left;
width:41.6%;
}
.footer img {
max-width:100%;
height:auto;
}
#media all and (max-width:600px) {
.footer-left, .footer-right {
position:relative;
float:none;
width:100%;
height:auto;
text-align:center;
}
}
will this work for you ?
http://jsfiddle.net/PR4DE/btzj5dtu/
for future reference:
<div class="grid">
<div class="col-1"><img src="http://www.netplayhockey.com/image1.png"></div>
<div class="col-2"><img src="http://www.netplayhockey.com/image2.png"></div>
</div>
/*style*/
.grid {position:relative;max-width:960px;margin:0 auto;}
.col-1 {position:relative;width:58.4%;float:left;}
.col-2 {position:relative;width:41.6%;float:left;}
#media (max-width:960px) {
.col-1 {width:100%;float:none;height:auto;}
.col-2 {width:100%;float:none;height:auto;}
img {width:100%;height:auto;}
}
I have tried literally everything I can think of. I have tried dozens of coding samples from the stack and tutorial sites. I cannot get this to work no matter what I do, and I'm absolutely at my wits end with trying to figure it out. Me and CSS don't get along.
Here is what I'm trying to do:
Static Header (always on the screen.)
Footer that always stays at the bottom of the page. (Scrolls with content, but if there isn't enough content will appear at bottom of the screen.
Left menu with background that goes all the way down to the top of the footer.
I'm having trouble getting the background to go all the way down. It is a normal problem of being unable to have 100% parents, relatives and absolutes. This code I have now works fine with the exception of the background. I'm honestly considering just making the background a image and have it repeat. Here is the code:
<!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">
html, body {
margin: 0;
padding: 0;
height: 100%;
}
#main_wrapper {
min-height: 100%;
position: relative;
}
#header {
width: 100%;
background:#0F0;
height:42px;
position:fixed;
left: 0;
top: 0;
}
#content {
margin-left: 200px;
background:#F00;
}
#footer {
width:100%;
height:32px;
position:absolute;
bottom:0;
left:0;
background:#00F;
}
#content_wrapper {
padding-bottom: 32px;
padding-top: 42px;
overflow: auto;
}
#left_menu {
width:200px;
background: #FF0;
float:left;
}
</style>
</head>
<body>
<div id="main_wrapper">
<div id="header"></div>
<div id="content_wrapper">
<div id="left_menu">MENU</div>
<div id="content">CONENT</div>
</div>
<div id="footer"></div>
</div>
</body>
</html>
JSFiddle Source
As you can see in the Fiddle code, what I'm going for is to have the yellow background take up the whole height. And any content that gets added will cause the whole page to scroll, footer to move to bottom and header remain static. All of that works right now except for the yellow background color taking up the whole height.
The easiest thing to do would be to add an image to the background that repeats in the Y direction.
background-image:url(images/background.gif);
background-repeat:repeat-y;
This gets the job done, but there has to be a better way!
I have a wrapper with inside a header, a left column and the main content.
Outside the wrapper i got the footer.
My problem is that main content, if there's not enough text, doesn't stretch till the bottom of the page. If i insert lorem ipsum etc, being many rows it's all ok, but if i try with only few rows, the main div stops before the very end of the wrapper (or better, the end of the page, before the footer).
Here's my html code
<?php session_start();
unset($_SESSION['message']);
?>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="../css/stili.css" type="text/css" />
<script type="text/javascript" src="../script/scripts.js"></script>
<meta charset="utf-8"/>
<title></title>
<style>
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<?php
include('../php/header.php');
?>
</div>
<div id="leftcolumn">
<?php
include('../php/leftcolumn.php');
?>
</div>
<div id="main" >Welcome to our site
...Some text, but not enough to stretch to the end of page...
</div>
<div style="clear: both"></div>
</div>
<div id="footer">Copyright 2013</div>
</body>
</html>
And here's the CSS
html,
body {
padding:0;
margin:0;
height:100%;
}
#wrapper {
min-height:100%;
height:auto;
margin:0 auto -30px;
width:950px;
background-color:#E3AA56;
}
#main {
float:right;
width:680px;
padding:10px;
background:#E0CD90;
text-align:justify;
overflow: auto;
}
#main a{
font-size:40px;
}
#footer{
border-top: 2px solid #CCCCCC;
width:950px;
margin:auto ;
height:30px;
background:#ee5;
clear: both;
}
Thanks in advice to everyone that will help finding the problem!
Splitting a page into multiple columns stretching automatically the height of the viewport is an ongoing topic. Just google for that, there are several CSS based solutions around there.
The problem is, that the height of the surrounding boxes are undefined (html, body, wrapper in your case). You may only add some "style" if theres a size on the parent as well.
One weired solution is, to set the style of the html object:
<html style="overflow:hidden;clip:
rect(auto);height:100%;;margin:0px;padding:0px;
background-color:white;">
(yes, it's not forbidden, you CAN do that and it's even IE 6 and 7 proven...)
and
#wrapper {
min-height:100%;
height:100%';
margin:0 auto -30px;
width:950px;
background-color:#E3AA56;
overflow: hidden; /* not sure if you want that */
}
Here are the keys to your problem you should look at and implement however you want:
html, body {
height: 100%;
min-height: 100% /* for firefox */
}
#wrapper, #leftcolumn, #main {
height: 100%;
}
You dont need to add height in wrapper it will get the height based on the content inside a wrapper :)
Is this how you want it to be like? If not, then please let me know and I'll revise my answer.
UPDATE:-
#main {
height:100%
}
#wrapper {
height:100%
}
#leftcolumn {
padding:10px;
height:100%;
}
This should work.
UPDATE 2:-
#main {
height:100%;
}
#wrapper {
height:100%;
overflow:hidden;
min-height:500px; (you can change this to your liking)
}
#footer {
position:relative;
}
This should give you the results you expect. No need to add my previous styling, just use this one now.
Below is a simple code in which I have implemented multiple background images to body, but this code does not work in IE 7 and 8 whereas it works in all other browsers. I have used PIE.htc which is relative to the html document,but still no success. Please help me to solve this example.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body style="background: url(header_top_border.png) repeat-x, url(bg_1px.jpg) repeat-x; behavior: url(http://localhost/mutliple_bg/PIE.htc);
-pie-background:url(header_top_border.png) repeat-x, url(bg_1px.jpg) repeat-x; position:relative; zoom:1; z-index:1;">
</body>
</html>
Sorry hasty read of your question, just noticed your using pie.
PIE doesn't support multiple backgrounds on BODY element;
Solution: create div container for body.
Multiple backgrounds are only supported by IE9 and above.
use div positionrelative and absolute
i think this is the easy way to fix cross browser problem hope it help...
click here for working fiddle
html
<div class="parent">
<div class="colorLeft"></div>
<div class="contentArea"></div>
</div>
css
.parent {
float:left;
width:100%;
height:200px;
background-color:#555;
position:relative;
z-index:1;
}
.colorLeft {
width:50%;
float:left;
height:200px;
background-color:blue;
position:absolute;
z-index:-1;
}
.contentArea {
width:400px;
background-color:#fff;
height:180px;
margin:10px auto;
}
I'm trying to develop a 5 part top layout that will work on any browser. Its 5 part because you have the center menu that spans 1024.
Then you have a left and right side of the menu that has some non-repeating images that will run over into a repeating image that I want to go to infinity.
This has proven to be very hard, and I've probably forgotten that it could be impossible...
What I have done is get so close I can almost taste it. If you could look at my code and tell me what's going on with the "right_side" and it's width - it's causing some serious trouble with the scrollbar.
Image of what I'm talking about:
http://i.imgur.com/xertW.jpg
The following is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style>
body{
margin:0px;
padding:0px;
}
.left_stretch{
background-color:red;
z-index:-10;
position:absolute;
top:0px;
left:0px;
width:50%;
height:100%;
}
.left_side{
background-color:blue;
z-index:-5;
position:relative;
top:0px;
right:512px;
width:100%;
height:100%;
}
.center{
background-color:green;
height:500px;
width:1024px;
margin-left:auto;
margin-right:auto;
}
.right_side{
background-color:grey;
z-index:50;
position:relative;
top:0px;
left:512px;
width:100%;
height:100%;
}
.right_stretch{
background-color:orange;
z-index:-10;
position:absolute;
top:0px;
right:0px;
width:50%;
height:100%;
}
</style>
</head>
<body>
<div class="left_stretch">
<div class="left_side"></div>
</div>
<div class="center"></div>
<div class="right_stretch">
<div class="right_side"></div>
</div>
</body>
</html>
And then I'm of course worried that ie 7 and ie 6 is messing things up... But I just want to solve this first...
Any hints at all?
Realized that i can jsfiddle your code, so i tested it.
It's your <div class="right_side"></div> whats causing it.. its just basically hanging in there.. creating the space.
I'm not really sure why the structure is like this so im not gonna give any hints as far as fixing it goes. ..unless you want a quick fix.. which is to delete that element :D