Jump to content

Clipping...in Ie7


thescientist
 Share

Recommended Posts

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. Edited by thescientist
Link to comment
Share on other sites

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!
Link to comment
Share on other sites

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...

Link to comment
Share on other sites

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;}

Link to comment
Share on other sites

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!

Edited by thescientist
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...