Here's the link to my site: Door 41

When I hover over any of the links at the top of my page (in IE) the bottom portion of my page jumps up and you can no longer see the content. I'm guessing there may be some issues with the css for the footer elements, but I'm not sure. I was having problems getting it to stay at the bottom and probably messed up something. Any help would be greatly appreciated. Thanks in advance!

 
/* 3.1 Top Navigation
--------------------------------------------------------------------------------------- */
 
.masthead ul {
 list-style: none;
 text-align: right;
 padding-top: 60px;
 }
.masthead li {
 display: inline;
 margin: 0 0 0 10px;
 padding: 0 0 0 15px;
 font: 16px tahoma, verdana, arial, sans-serif;
 }
.masthead a:link{
 text-decoration: none;
 color: #55c7d1;
 }
.masthead a:visited{
 text-decoration: none;
 color: #55c7d1;
 }
.masthead a:hover{
 text-decoration: none;
 color: #55c7d1;
 border-bottom: 2px solid #55c7d1;
 }
.masthead a:active{
 text-decoration: none;
 color: #55c7d1;
 }
 
/* 5.0 Footer
--------------------------------------------------------------------------------------- */
 
.footer {
 background: #1a1a1a;
 padding: 10px 0;
 margin: 80px 0 0 0;
 text-align: center;
 min-height: 140px; 
 } 
 
/* 5.1 Footer Structure
--------------------------------------------------------------------------------------- */
 
.footercontent {
 width: 700px;
 text-align: left;
 margin-left: auto; 
 margin-right: auto; 
 }
.col1 {
 float: left;
 padding-left: 10px;
 }
.col2, .col3 {
 float: left;
 padding-left: 40px;
 }
.col4 {
 float: left;
 padding-left: 20px;
 }

If you need more information, let me know.

I wonder if the min-height is giving you your fit.

.footer {
 background: #1a1a1a;
 padding: 10px 0;
 margin: 80px 0 0 0;
 text-align: center;
 min-height: 140px; 
 }

Try

.footer {
 background: #1a1a1a;
 padding: 10px 0;
 margin: 80px 0 0 0;
 text-align: center;
height: 140px; 
 }

Hmm. That might be it. I'll try it when I get home and let you know if it worked. I added that because the footer container wasn't expanding with the text. It probably wasn't the right fix for the issue. Thanks!

Good looking site by the way. I really like it.

IE 6 doesn't support min/max height or width. If that's the version of IE with the problem, you're going to need a separate CSS file and conditional comments to feed IE a fixed height.

Thanks, smeare!
I'll see if I can do it without a min-height. I probably don't need it.

That didn't work, but when I took it out of the footer div and included in the main wrap, it stopped jumping. However, now my gray background that spanned the width of the browser is gone and I don't know how to get it back

I just wanted to report that I removed the border from the .masthead a:hover and it was fine. I'm still baffled about why it would behave that way, but it's fixed...Thanks!

Everyone wonders about the IE box model. It's really quite strange. I'm sure LNR had a link to a good page about it floating around a day or two ago...

Oh yeah.. lots of links on IE's busted box model, this is the biggie:

http://www.positioniseverything.net/index.php
http://www.communitymx.com/content/a...989953B6F20B41