CSS Forum

**jodybethw** · 07-05-2009, 05:04 PM

http://www.skolnickcpa.com/indextest.html

Please visit this link. You will see in IE that there is a beige background on the footer. In Firefox, this beige background goes away, leaving the background charcoal color showing through. Is there a fix for this?

My CSS:

* { padding: 0; margin: 0; }

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 80%;
line-height: 1.2em;
background-color:#666;
}
#wrapper {
margin: 0 auto;
width: 820px;
border: 1px solid #333;
background-color:#fff;
overflow:hidden;
height:100%;
}
#header {
width: 822px;
float: left;
padding: 10px;
height: 116px;
margin: 0;
background:url(header.jpg) no-repeat;
}
#leftcolumn {
color: #666;
background:url(leftslice.jpg) no-repeat;
margin: 0;
padding: 10px 30px 10px 30px;
min-height: 384px;
width: 198px;
float: left;
}
#rightcolumn {
color: #666;
float: left;
background:url(rightslice.jpg) repeat-x;
margin: 0;
padding: 10px 30px 10px 30px;
min-height: 384px;
width: 502px;
display: inline;
}
#footer {
width: 820px;
height:100%;
clear: both;
color: #333;
background-color:#c4bca4;
font-size: 85%;
line-height: 1.2em;
border-top: 1px solid #333;
}
#footerleft {
width: 198px;
padding: 10px 30px 10px 30px;
float: left;
height:100%
background-color:#c4bca4;
}
#footerright {
width: 502px;
padding: 10px 30px 10px 30px;
float:left;
height:100%
background-color:#c4bca4;
}
#footer a{
text-decoration:none;
color:#84693b;
font-weight:bold;
}
#footer a:hover,#footer a:active {
text-decoration:none;
color:#ffffff;
font-weight:bold;
}
ul#menu {
list-style:none;
padding-left:290px;
width:100%;
text-align:center;
}
ul#menu li {
margin:0px; padding:0px;
list-style:none;
font-size:12pt;
line-height:1em;
display:inline;
}
ul#menu li a {
display:block;
text-align:center;
width:12%;
float:left;
margin-top:102px;
margin-right:20px;
color:#ffffff;
font-weight:bold;
text-decoration:none;
padding:0 0 0 0;
background-color:red;
}
ul#menu a:hover,#footer a:active {
text-decoration:none;
color:#666;
font-weight:bold;
}

**StylaStyla** · 07-05-2009, 06:42 PM

Code:

#footer { 
 width: 820px;
 height:100%;
 clear: both;
 color: #333;
 background-color:#c4bca4;
 font-size: 85%;
 line-height: 1.2em;
 border-top: 1px solid #333;
}

Change the height value to 40px.

FF doesn't read % values like IE does. I believe it needs a parent reference

**jodybethw** · 07-05-2009, 06:46 PM

Ideally, I'd like the beige color to extend to the bottom of the screen, no matter the resolution or the browser you're using. How do I so this??? I have spent all afternoon trying to figure it out!

**jodybethw** · 07-05-2009, 06:51 PM

Oh -- I got rid of all of the height:100% references, and added min-height:50px. It worked. Thank you!!!

**StylaStyla** · 07:00 PM

http://www.skolnickcpa.com/indextest.html

this the page? as I don't see it working ?

**jodybethw** · 07-05-2009, 07:13 PM

I JUST uploaded it -- try again? The problem now is that the color shows, but it isn't stretching to the bottom of the browser on screens with larger resolutions like 1440. Argh! Someone must know how to fix that....

**StylaStyla** · 07-05-2009, 07:16 PM

add

Code:

html {
height:100%;
}

then..

Code:

height:100%;

to your body and your #ftr (removing the min-height selector)

see if it works now...?

**jodybethw** · 07-06-2009, 07:44 PM

nope, no luck

**StylaStyla** · 05:51 AM

hmm, I tested it in Firefox and it seems to work

could you please apply the following changes to
http://www.skolnickcpa.com/indextest.html
so I can see it.

Code:

change your footer to 
#footer { 
 width: 820px;
 height:100%;
 clear: both;
 color: #333;
 background-color:#c4bca4;
 font-size: 85%;
 line-height: 1.2em;
 border-top: 1px solid #333;
}

Code:

 add this to the top of your stylesheet
html {
height: 100%;
}