CSS - Page Length Goes Crazy In Ie5...

It's a classic problem, but I was just wondering if anyone could give me some help on it.

Heres the link to the webpage (note, none of the links or owt work, it's just filler for the mo):
Code:

http://users.aber.ac.uk/jdg8/WebSiteHelp/

I want to the make the sidebars on each side stretch to the bottom of the page (Down to the footer) but it won't seem to go. I've tried following googles advice and it's not working either.
Here's the code:
Code:

body  {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	background:#FFF;
	height: 100%;
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #FFF;
}

a:link{color:#00B800;}
a:visited{color:#39F}
a:hover{color:white; text-decoration:underline; font-weight:bold;}

#container {
	width: 80%;  /* this will create a container 80% of the browser width */
	background: #666666; /* the auto margins (in conjunction with a width) center the page */
	border: 3px solid #000000;
	text-align: left; /* this overrides the text-align: center on the body element. */
	height: 100%;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
} 

#header {
	background: #999999;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	color: #390;
} 
IMG.ukdm {
	display: block;
	margin-left: auto;
    margin-right: auto;
}


/* Tips for sidebars:
1. Since we are working in percentages, it's best not to use side padding on the sidebars. It will be added to the width for standards compliant browsers creating an unknown actual width. 
2. Space between the side of the div and the elements within it can be created by placing a left and right margin on those elements as seen in the "#sidebar1 p" rule.
3. Since Explorer calculates widths after the parent element is rendered, you may occasionally run into unexplained bugs with percentage-based columns. If you need more predictable results, you may choose to change to pixel sized columns.
*/
#sidebar1 {
	float: left; /* this element must precede in the source order any element you would like it be positioned next to */
	width: 22%; /* since this element is floated, a width must be given */
	height:100%;
	background-color: #555555;
	background-image:url(backgroundshizzle.jpg);
	padding: 15px 0;  /*top and bottom padding create visual space within this div  */
}

#sidebar2 {
	float: right; /* this element must precede in the source order any element you would like it be positioned next to */
	width: 23%; /* since this element is floated, a width must be given */
	height:100%;
	background-color: #555555;
	font-size:14px;
	padding: 15px 0; /* top and bottom padding create visual space within this div */
	text-align:center;
	
}

IMG.albumom {
    display: block;
    margin-left: auto;
    margin-right: auto;
	font-weight:bold;}
	

#sidebar1breaker {
	width: 4%;
	height:680px;
}
#sidebar1 p, #sidebar1 h3, #sidebar2 p, #sidebar2 h3 {
	margin-left: 10px; /* the left and right margin should be given to every element that will be placed in the side columns */
	margin-right: 10px;
	
}

#navi{
	display:block;
	margin-left: auto;
	margin-right: auto;
	text-align:center;
	font-weight: bold;
	font-size: 17px;
}

#aom{
	font-style:italic;
}

/* Tips for mainContent:
1. the space between the mainContent and sidebars is created with the left and right margins on the mainContent div.
2. to avoid float drop at a supported minimum 800 x 600 resolution, elements within the mainContent div should be 300px or smaller (this includes images).
3. in the Internet Explorer Conditional Comment below, the zoom property is used to give the mainContent "hasLayout." This avoids several IE-specific bugs.
*/
#mainContent { 
	 /* the right and left margins on this div element creates the two outer columns on the sides of the page. No matter how much content the sidebar divs contain, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the sidebar spaces when the content in each sidebar ends. */
	 font-size:12px;
	 margin-left: 3px;
	 



	
}

#footer { 
	padding: 0 10px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
	background:#999999;
	text-align:center;
	font-size:9px;
} 
#footer p {
	margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
	padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}

/* Miscellaneous classes for reuse */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page The floated element must precede the element it should be next to on the page. */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain its child floats */
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}

It should be noted that I'm not totally sure about CSS and most of it is either stolen from dreamweaver or rehashed together from old websites I made.

Any help I could get would be greatly appreciated.
Cheers.

Resolved!

I have been working on this problem for the past week now. When I set the height of #main to 100%, it basicly acts like there is nothing in it and all you see are the leftcontent, centercontent, and rightcontent which stretch to the length of the content they hold. I want to have the tanish area stretch all the way down. Right now I have it set as 700px height but if the data in the other 3 divs stretch further than 700px it goes past it (as you can see in this example: http://panik.owphosting.com/article.php?id=1 , This can only be seen in Firefox). so yea, this is crazy, I am also trying to keep this cross browser compatible. So im keeping firefox in mind. Someone please shed some light on this problem. Thanks for any help at all!

Here is my website:

http://panik.owphosting.com/home.php

And here is my css:

Code:

body {
	margin: 0px;
	color: #000;
	font-size: 8pt;
	font-family: verdana;
	height: 100%;
	width: 100%;
	background: url("images/bg2.jpg");
}
a {
	color: #237CBB;
	font-weight: bold;
	font-size: 8pt;
	text-decoration: none;
}
a:visited {
	color: #237CBB;
	font-weight: bold;
	font-size: 8pt;
	text-decoration: none;
}
a:hover {
	color: #237CBB;
	font-weight: bold;
	font-size: 8pt;
	text-decoration: underline;
}
#wrap {
position:relative;
min-height:100%;
}
* html #wrap {
height:100%;
} 
h1 {
	font-family: verdana;
	color: #000;
	font-weight: bold;
	font-size: 24pt;
}
#header {
	border-left: 2px solid #000;
	border-right: 2px solid #000;
	background: #FBF2D9;
	width: 700px;
	margin: 0;
}
#main {
	position: relative;
	width: 700px;
	border-left: 2px solid #000;
	border-right: 2px solid #000;
	height: 700px;
	background: #FBF2D9;
}
#leftcontent {
	position: absolute;
	padding-top: 10px;
	padding-left: 2px;
	padding-right: 2px;
	border-left: 2px solid #000;
	left: -2px;
	background: #FBF2D9;
	width: 150px;
}
#rightcontent {
	position: absolute;
	padding-top: 10px;
	padding-right: 2px;
	padding-left: 2px;
	border-right: 2px solid #000;
	right: -2px;
	background: #FBF2D9;
	width: 150px;
}
#centercontent {
	position: absolute;
	left: 154px;
	padding: 10px;
	background: #FBF2D9;
	width: 375px;
	text-align: left;
}
#moduletop {
	position: relative;
	width: 130px;
	padding: 5px;
	color: #fff;
	font-weight: bold;
	text-align: center;
	border: 1px solid #000;
	background: #26476C;
}
#modulebottom {
	position: relative;
	width: 130px;
	padding: 5px;
	color: #fff;
	text-align: left;
	font-size: 8pt;
	border: 1px solid #000;
	border-top: 0px;
	background: #4184B4;
	background-image: url("images/modulefill.jpg");
	background-position: 0% 100%;
	background-repeat: repeat-x;
	overflow: auto;
}
#modulebottom a {
	color: #fff;
	font-weight: bold;
	font-size: 10pt;
	text-decoration: none;
}
#modulebottom a:visited {
	color: #fff;
	font-weight: bold;
	font-size: 10pt;
	text-decoration: none;
}
#modulebottom a:hover {
	color: #99D8FE;
	font-weight: bold;
	font-size: 10pt;
	text-decoration: none;
}
table#news {
	color: #000;
	font-size: 10pt;
	font-weight: bold;
	width: 375px;
	margin: 0;
	border: 0;
	vertical-align: top; 
}
table#news div.head{
	color: #237CBB;
	font-size: 10pt;
	width: 375px;
	font-weight: bold; 
}
table#news div.date{
	color: #919191;
	font-size: 8pt;
	width: 375px;
	font-weight: 100;
	vertical-align: top; 
}
table#news div.detail{
	color: #000;
	font-size: 8pt;
	width: 375px;
	font-weight: 100;
	vertical-align: top; 
}
table#news div.foot{
	color: #000000;
	font-size: 10pt;
	font-weight: bold;
	margin: 0;
	width: 375px; 
}
shout{
	width: 130px;
	overflow: auto;
}

I'm TRYING to design a site with CSS, but every browser seems to display CSS differently. How do I do it? How can I make a CSS site that'll render properly in IE6 & 7 and FF, and at 800x600 and 1024x768? This is driving me absolutely bonkers.

Look at my site: http://www.firstinsurancefunding.net/

It displays differently in EVERY different browser.

WHAT'S THE FIX??

(sorry, I'm frustrated. Could really use some pointers).

Hello,

I'm trying to make the left and right divs increase length with the centre (content) div.

http://offhourscomputing.com/test.htm

I've tried experimenting with using 100% and auto for the height, but that either makes the left and right sides exactly 100% of the height space in my browser or makes them disappear (using auto).

Thanks.

Hi there.. please have a look here, someone knows how to get rid of the 20px gap between the two black boxes?

Please help me CSS gods. I want pure CSS Menus.

I have tried two independent times to get working menus for a site and every time one of the IE browsers is killing me.

URL Blocked
Works fine on FF and IE6. IE7 users complain.

URL Blocked
Works fine on FF but IE6 has fat border on right and the whole page jumps a pixel when looking at sub menus.

I also can't get it centered or the title evenly spaced on any browser.


At this point, I don't care which I get working. But If I get sample2 working then I can add many more pages.

The CSS is main.css in the respective folders.


Ohh well, the forum won't let me give links to my samples.

Hi,
I've got a strange problem, which I'm sure the answer to it is simple, but it escapes me at the moment.
I have a site we're building at: 209.200.245.223/$sitepreview/quality-edge.com/content.aspx?usertype=2&page=home
And as you can see, the background image is cut off (the colour on the left-hand side should be seen to fade out. I had to use min-height to get it to show, but I don't think that I completely understand min-height.
Mainly my problem is the footer and the background. I think I've read every footer how-to there is and I can't seem to get anything to work properly. I'm not new to CSS so this is really frustrating me.
Any help would be greatly appreciated.
Thanks,
Steph

please click here to read my message.

My code:
Code:

#whitebox {
width:600px;
background-color:#fff;
padding:10px;
margin-left:auto;
margin-right:auto;
}

#salmonbox {
width:500px;
height:50px;
padding:10px;
background-color:salmon;
margin-left:auto;
text-align:left;
}

Hi -

I have a small problem with a contact form on my website not working properly and it is driving me crazy, now let me explain.

The website works fine in Firefox and Safari, and almost all the pages work fine in IE.

The only thing that isn't working is the contact page in IE. The contact page works fine in Firefox and Safari.

It's quite tricky to explain to you what I mean really, without showing you. The website is set to a certain width and I have all the margins and paddings correct, as far as I can tell anyway. The contact form is in PHP.

The website should be in the middle of the browser at about 900px wide, but when you go to the contact page the PHP code is for some reason making it align to the left, and making the horizontal menu become vertical and out of place.

If anyone on here knows about CSS and could take a look for me to see what's gone wrong, I don't think it would take to long, it's just something that I am not aware of or have overlooked in the code.

It would be greatly appreciated if you could let me know if you would like to help me out.

I'm new to this forum and I did come here looking for help but plan on sticking around so I look forward to meeting you all.

Huge thanks if anyone wants to help me, will probably only take a few minutes, I would post the link here but I don't wanna get banned as I am a new member.

Hi, I have a very odd IE6 issue occuring within my site which I hope someone can help me with.

Here is my xhtml
And here is my css

I have commented both the relevant CSS and HTML with "TEXT PROBLEM IN IE" so you can find it quickly.

Please ignore the functionality, this is very much in the development phase. The problem I have is that under the categories listed - in IE there are the letters "c" and "e" which seem to have been duplicated from the last category "executive office". If you select the "ce" in the browser you will see what I mean. This doesn't happen in FireFox etc.

Cheers

I have a major problem with my site rendering in FF, there is a space between the header and nav bar that I don't see in IE and can't find a fix!! I have gone over and over the CSS and XHTML and just can't see what would be doing this. Anyone know how to fix it??


Click Here for My Website

CSS code -

Code:

body {
	background-color:#0071E1;
	background-image: url(images/head.png);
	background-repeat: repeat;
	margin-top: 25;
	margin-bottom: 25;
	margin-right: 0px;
	margin-left: 0px;
}

/* LAYOUT */

#catbg {
	color: #0066CC;
	padding-left: 10px;
	padding-right: 10px;
	background: #dedede url(images/catbg.gif) repeat-x;
	font-size: 16px;
	height: 25px;
	border: 1px solid #CCCCCC;
	font-weight: bold;
	line-height: normal;
	padding-top: 3px;
	width: 98%;
}
#catbg1 {
	color: #0066CC;
	padding-left: 10px;
	padding-right: 10px;
	background: #dedede url(images/catbg.gif) repeat-x;
	font-size: 20px;
	height: 25px;
	border: 1px solid #CCCCCC;
	font-weight: bold;
	line-height: normal;
	width: 98%;
}
#catbg2 {
	color: #009900;
	padding-left: 10px;
	padding-right: 10px;
	background: #dedede url(images/catbg.gif) repeat-x;
	font-size: 16px;
	height: 45px;
	border: 1px solid #CCCCCC;
	font-weight: bold;
	line-height: normal;
	padding-top: 3px;
	width: 98%;
}
#catbg3 {
	color: #990000;
	padding-left: 10px;
	padding-right: 10px;
	background: #dedede url(images/catbg.gif) repeat-x;
	font-size: 16px;
	height: 25px;
	border: 1px solid #CCCCCC;
	font-weight: bold;
	line-height: normal;
	padding-top: 3px;
	width: 98%;
}
#catbg4 {
	color: #0066CC;
	padding-left: 10px;
	padding-right: 10px;
	background: #dedede url(images/catbg.gif) repeat-x;
	font-size: 16px;
	height: 45px;
	border: 1px solid #CCCCCC;
	font-weight: bold;
	line-height: normal;
	padding-top: 3px;
	width: 98%;
}
/* Surrounding div */

#wrap {
	width: 961px;
	margin: 0 auto;
	padding: 0;
	top: auto;
}

/* Surrounding the nav and main content */
#wrapper {
	width:925px;
	align:center;
	background-color:#FFFFFF;
	background-image: url(images/newbkZ2.png);
	background-repeat: repeat;
	vertical-align: top;
	border-top: #005FAC;
	border-right: thin inset #005FAC;
	border-bottom: #005FAC;
	border-left: thin outset #005FAC;
	height: auto;
	padding: 0px;
	margin: 0 auto;
}

/* Header surround */
#shad-l {
	 padding-left: 18px;
	 background: url(images/shadow-l.png) 0 0 no-repeat;
}

#shad-r {
	 padding-right: 18px;
	 background: url(images/shadow-r.png) 100% 0 no-repeat;
}

#header{
	position:relative;
	height:215px;
	overflow:hidden;
	background: #FFFFFF url(images/newbkZ2.png) repeat;
	top: auto;
	width: 925px;
	margin: 0 auto;
}
#head-r{height:215px; background:url(./images/head-l.png) 0 0 no-repeat; position:relative}
#head-l{height:215px; background:url(./images/head-r.png) 100% 0 no-repeat; position:relative}
#logo {
	display: block;
	width: 900px;
	height: 215px;
	cursor: pointer;
	padding-left: 30px;
	padding-top: 10px;
	background-image: url(images/logo.png);
	background-repeat: no-repeat;
	position: relative;
	background-position: center;
	top: auto;
	padding-right: 0px;
	padding-bottom: 0px;
}



/* Navbar */

#nav {
	margin: 0 auto;
	width:925px;
	height:38px;
	font-family:Arial;
	font-size:14px;
	color:#ffffff;
	background-image: url(images/navbg3.jpg);
	background-repeat: repeat;
	border-right-width: thin;
	border-left-width: thin;
	border-right-style: inset;
	border-left-style: outset;
	border-right-color: #005FAC;
	border-left-color: #005FAC;
	line-height: 1.8em;
	font-weight: bold;
}

#navlist li
{
	display: inline;
	background-repeat: no-repeat;
	padding-left: 10px;
}

#navlist a
{
	font-weight: bold;
	text-transform: none;
	text-decoration: none;
	font-size: 16px;
	line-height:38px;
}

#navlist a:link, #navlist a:visited
{
padding-left: 25px;
color: #FFFFFF;
background: url(images/blue.png) no-repeat 0;}

#navlist a:hover
{
	color: #FFFF00;
	background-repeat: no-repeat;
	background-position: 0;
	background-image:  url(images/green.png);
	padding-left: 25px;
} 



/* Main content Area */

#box1 {
	margin:10px;
	text-align:left;
	width:95%;
	font-family:Tahoma;
	font-size:14px;
	color:#0066CC;
	padding: 10px;
	font-weight: bold;
	float: left;
	clear: left;
}

#box2 {
	text-align:left;
	width:95%;
	font-family:Tahoma;
	font-size:14px;
	color:#0066CC;
	padding: 10px 30px 10px 20px;
	font-weight: bold;
	height: auto;
	float: left;
	clear: left;
}

#box3 {
	text-align:center;
	width:95%;
	font-family:Tahoma;
	font-size:14px;
	color:#0066CC;
	padding: 10px 30px 10px 20px;
	font-weight: bold;
	height: auto;
	float: left;
	clear: left;
}

/* Height Gap */

.hg {
	margin:0 auto;
	height:5px;
}



#footer{
	background: url(images/footer-bg.png) repeat-x 100%;
	text-align:center;
	margin: 0 auto;
	font-size:12px;
	font-family:Tahoma;
	color:#FFFFFF;
	position: relative;
	height: 130px;
	width: 925px;
	font-weight: bold;
	line-height: 1.2em;
}

/* LINK STYLES */

/* Linkpage links */

a.weblink {
	font-family:Arial;
	font-size:16px;
	text-decoration:none;
	color:#0066CC;
	font-weight: bold;
}

a.weblink:hover {
	font-family:Arial;
	font-size:16px;
	text-decoration:underline overline;
	color:#990000;
	font-weight: bold;
}

/* Footer links */

a.footerlink {
	font-family:Tahoma;
	font-size:11px;
	color:#FFFFFF;
	text-decoration:none;
}

a.footerlink:hover {
	font-family:Tahoma;
	font-size:11px;
	color:#FFFF00;
	text-decoration:none;
}

/* All other links */

a {
	font-family:Tahoma;
	font-size:11px;
	color:#0066CC;
	text-decoration:none;
}
a:hover {
	text-decoration:overline;
	color: #990000;

}	
#left {
	float: left;
	margin: 0;
	padding: 20px 20px 0 30px;
	width: 300px;
}

#right {
	float: right;
	margin: 0;
	padding: 20px 30px 20px 20px;
	width: 400px;
}
/* No image should have a border when linked */

.a img {
	 border: 0;
}

#bodyarea {
	padding: 10px;
	margin: 0;
	background: #FFFFFF url(images/bodyarea-bg.gif) repeat-x;
	font-family: Tahoma;
	font-size: 9px;
	color: #0066CC;
	font-weight: bold;
	text-align: right;
}

/* text classes */

.smalltext {
	 font-size: 10px;
	 font-family: verdana, sans-serif;
}

.middletext {
	 line-height: 14px;
}

.normaltext {
	 font-size: 12px;
}

.largetext {
	 font-size: 16px;
}

/* lightbox */

#lightbox{	position: absolute;	left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #FFFFFF; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(images2/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(images2/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #FFFFFF; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%; }

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}	 	

#overlay{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 90;
	width: 100%;
	height: 500px;
	background-color: #0066CC;
	background-image: url(images/head.png);
}
#overlay[id]{ /* IE6 and below Can't See This */
position:fixed;
}

Ive been at this for almost 6 days, searched the realm for help, googled, IRC'd, worked side by side with templates - even a 2 column setup and for some reason it can't render in IE. Also looked at the Tan hack, whitespace hacks.. Would you be so kind to tell me what I can do to make this work in IE?

You can find the CSS by clicking Valid CSS, and html as you know- source. Thanks dearly

Site

The picture you can see is part of a PSD which I'm now "converting" into html... anyway, I'd like to know whether there is a CSS attribute that can define the exact width of borders?

Hi everyone.

This is my first venture into laying out pages using style sheets.

If you have a look at the attached image you will see what I need done. Please ignore the pink lines, it's ust my graphic designer slicing up images.

I'm pretty sure that I can create the colors, borders, positioning etc. I just don't know how to make the left column grow with the right column when more text is added.

Help anyone?

Thanks in advance.