Clipping...in Ie7

[thescientist]

www.seasonsnh.com/rates.htmlstylesheetI thought I had this solved but apparently in IE7 the subnav on my pages clips at the bottom and cuts off the text slightly. I can't remember what I did to make it work in all browsers but I must have deleted it for some reason when I was cleaning up my HTML/CSS before it went live. I tried adding padding/border/margin to #subnav but that didn't do anything. When switching between FF3 and IE7 the only thing I noticed is that the tan space at the top of the page above the header grows biggers in IE7 and is smaller in FF. The site looks fine in IE8.

[dsonesuk]

it probably to do the "#sub_nav ul li a" there no set height for this.

[thescientist]

it probably to do the "#sub_nav ul li a" there no set height for this.

cool, i'll look into that a little later on today!

[thescientist]

so I noticed the #main_nav is doing it to, and that has a line-height property in it that seems to work fine in IE8/FF but shrinks in IE7 while at the same time pushing the header down too...I could've sworn I had it working at one point, but now I'm mightily flummoxed.For some reason height doesn't seem to be doing much either...

[dsonesuk]

you seem to repeat declarations for all the mouse events? when all you require is to state the background-color, and text color required for these events.I've tidied up the code below, notice the comment about the the bottom border, i think this is the problem! IE subtracts the height of border from total height, so experiment with this to see if it fixes the problem./* Navigation-----------------------------------------------------------------------*/#main_nav ul{ margin: 0; padding: 0; width: 760px; float: left; list-style: none; background-color: #1B5166;}#main_nav ul li{ float: left; background-color: #91693B; text-align: center;}#main_nav ul a{ display: block; padding: 0 3px; width: 89px; line-height: 35px; color: #FFFFFF; text-decoration: none; font-family: "Garamond";}#main_nav ul a:link{ color: #FFFFFF; }#main_nav ul a:hover{ color: #BBEBFF; background-color: #1B5166; }#sub_nav{ margin: 0; padding: 0; width: 760px; float: left; list-style: none; background-color: #1B5166; border-bottom: 5px; /*WHY is this needed? try with 0 border might be this is rendered differently for IE*/}#sub_nav ul{ margin: 0; padding: 0; width: 760px; float: left; list-style: none; background-color: #1B5166;}#sub_nav ul li{ float: left; background-color: #1B5166; text-align: center;height: 25px; /*added by ds*/}#sub_nav ul a{ display: block; text-decoration: none; font-family: "Garamond";height: 25px; /*added by ds*/}#sub_nav ul a:link{ color: #CCCA8B;}#sub_nav ul a:visited{ color: #CCCA8B;}#sub_nav ul a:hover{ color: #BBEBFF;}.active{ background-color: #1B5166; color: #BBEBFF;}#main_nav ul a:visited{ color: #FFFFFF;}

[thescientist]

margin-top: 5px on the #content_holder div seemed to fix it, but there's still a shift down on the top of the page in IE7 though when I flip back and forth between it and IE8, but at least there's no clipping now. I cleaned up some of my code like you suggested and got rid of the extra stuff. The border-bottom: 5px; must have been an earlier attempt to keep the #sub_nav from clipping, which apparantly stopped working as I went on. Thanks for your help though, I very much appreciate it!