CSS Div Issue 1

[Guru7777]

A friend of mine is trying to implement a new template on her blog. It works fine in IE, but not in Firefox.

If you go to

http://www.quixoticpixels.com/sets/naturalist/index.htm

you can see the template. The left and right columns will stop having the background color in Firefox after one page worth of data. You can see this phenomenon with the left column in the above page.

You can view the source of the page, but the stylesheet is linked, so for convenience I will post it here.

Thanks for any help you can offer.

<style type="text/css">
 body {
	background-color: #F4DEBB;
	SCROLLBAR-FACE-COLOR: #F4DEBB;
	SCROLLBAR-HIGHLIGHT-COLOR: #D0A56A;
	SCROLLBAR-SHADOW-COLOR: #D0A56A;
	SCROLLBAR-3DLIGHT-COLOR: #924F52;
	SCROLLBAR-ARROW-COLOR: #D0A56A;
	SCROLLBAR-TRACK-COLOR: #D0A56A;
	SCROLLBAR-DARKSHADOW-COLOR: #000000;
	SCROLLBAR-BASE-COLOR: #D0A56A;
	background-repeat: repeat;
	background-image: url([URL unfurl="true"]http://photos12.flickr.com/18159293_0409cd9632_o.jpg);[/URL]
	z-index: 100;
}

   #sidebar {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #000000;
	background-color: #D0A56A;
	border-color: #562A12 #562A12 #562A12 #562A12;
	border-style: solid;
	border-top-width: 0px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	position:absolute;
	top: 0px;
	left:65%;
	width:250px;
	height: 100%;
	line-height: 15px;
	background-repeat: repeat;
	background-image: url([URL unfurl="true"]http://photos14.flickr.com/18159294_cb3243b049_o.jpg);[/URL]
	z-index: 100;
}

   #blogbody {
	font-family: Georgia, Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #000000;
	background-color: #D0A56A;
	line-height: 15px;
	text-align: justify;
	border-color: #562A12 #562A12 #562A12 #562A12;
	border-style: solid;
	border-top-width: 0px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	position:absolute;
	top:0px;
	left:50px;
	width: 55%;
	height: 100%;
	background-repeat: repeat;
	background-image: url([URL unfurl="true"]http://photos14.flickr.com/18159294_cb3243b049_o.jpg);[/URL]
	z-index: 100;
}

   .blog{
	margin-top: -85px;
	z-index: 100;
}

   #logo {
	position:absolute;
	top:0px;
	left:0px;
	z-index: 100;
}


#banner {
	position:absolute;
	top:0px;
	left:330px;
	z-index: 100;
}

a:active {  color: #5F4B1B; text-decoration: none; font-weight: bold; z-index: 100;}
a:link {  color: #470A11; text-decoration: none; font-weight: bold; z-index: 100;}
a:visited {  color: #5F4B1B; text-decoration: none; font-weight: bold; z-index: 100;}
a:hover {  color: #F4DEBB; text-decoration: none; font-weight: bold; z-index: 100;}

.date {
   font-family: Georgia, Verdana, Arial, Helvetica, sans-serif;
   font-size: 13px;
   color: #5D1B13;
   font-weight: bold;
   text-transform: capitalize;
   text-align: right;
   background-repeat: no-repeat;
   padding-top: 5px;
   padding-bottom: 5px;
   border-color: #562A12 #562A12;
   border: dashed;
   border-top-width: 0px;
   border-right-width: 0px;
   border-bottom-width: 1px;
   border-left-width: 0px; 
   z-index: 100;}

.title {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 11px;
   font-style: italic;
   color: #000000;
   font-weight: bold;
   margin-top: 5px;
   text-align: center;
   text-transform: capitalize;
   z-index: 100;}

.sidetitle {
   font-family: Georgia, Verdana, Arial, Helvetica, sans-serif;
   font-size: 11px;
   color: #5D1B13;
   font-weight: bold;
   border-color: #562A12 #562A12;
   border: dashed;
   border-top-width: 0px;
   border-right-width: 0px;
   border-bottom-width: 1px;
   border-left-width: 0px;
   padding-top: 3px;
   padding-bottom: 3px;
   text-align: center;
   text-transform: capitalize;
   background-repeat: no-repeat;
   z-index: 100;
}

p {
   font-family: Georgia, Verdana, Arial, Helvetica, sans-serif;
   font-size: 11px;
   line-height: 15px;
   color: #000000;
   z-index: 100;}

li {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 10px;
   list-style-type: square;
   z-index: 100;
   }

ul {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 10px;
   z-index: 100;}

.forminput {
   border: #562A12;
   border-style: solid;
   border-top-width: 1px;
   border-right-width: 1px;
   border-bottom-width: 1px;
   border-left-width: 1px;
   background-color: #F4DEBB;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 10px;
   z-index: 100;}

h4 {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 13px;
   font-weight: bold;
   z-index: 100;}

.posted {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 10px;
   line-height: 8px;
   padding-bottom: 10px;
   text-align: center;
   margin-bottom: 10px;
   z-index: 100;}

.sidecontent {
   padding-top: 5px;
   padding-right: 5px;
   padding-bottom: 5px;
   padding-left: 5px;
   z-index: 100;}

.content {
   padding-top: 5px;
   padding-right: 8px;
   padding-bottom: 5px;
   padding-left: 8px;
   z-index: 100;
   }
</style>

 

[Vragabond]

FF is right, IE incorrectly interprets some css rules. It is height: 100% that is the culprit here. FF renders this as high as the screen, so if it extends over the screen, FF will stop there. IE interprets that as min-height and will expand the container if there is more content. I suggest you work with min-height in standards compliant browsers and use height in IE (repeat for all elements with height in question):

#sidebar {
    ...
    min-height: 100%;
    ...
}

* html #sidebar {
    height: 100%;
}

 

[joshbates15]

the problem is with your widths. with a higher resolution it works perfectly fine in firefox. however, when the resolution is smaller some of the items won't fit into the layout and is then squeezed into the bottom. hence giving you a big gap at the bottom of the page.

 

[Guru7777]

Vragabond, the min-height piece worked beautifully. Thanks a ton for such a quick response. Star for you.