Hi, Firefox, safari, ie7 all display my site correctly. ie6 for some reason does not repeat my background correctly and actually repeats more of it. please check my site and help me: www.Tvdiets.net Thanks.
Replace the existing #clickhere css with this one: #clickhere { width: 560px; float: left; height: 70px; [B] margin-top:25px!important; margin-top: 5px; margin-bottom:0px!important; margin-bottom:-5px;[/B] } Code (markup): The problem arises from the fact that you had padding, which although will move down 25px, IE6 will actually add 25px beyond the designated height of 560px, so infact IE6 thinks you have 560 + 25 in height, in which case we simply apply negitive margins to adjust for them. The !important margins will be read by all browsers expect IE6, meaning it'll stay the same way it was before, since it was working. While the fix underneath will apply to IE6 fixing your problem!
Don't use the !important hack. It'll screw up more browsers than you can possibly believe. I'm not at home right now so I can't take a serious look at your code, but if you need to give IE 6 a "band-aid" to staunch the bleeding so to speak before you can re-write the page to prevent the problem, use the Star Selector Hack after the code that IE 6 is choking on. It works like this: * html [i]selector[/i] { /* code for only IE 5/6 to see */ } Code (markup): Just replace selector with the element (either plain, or with a class or ID) that you want to target. Bear in mind that this is best used as a quick-fix to "hold the fort" until you can rebuild the template to get rid of the problem you're having.
How's that? I have been using this since I can remember. And in this particular case, I just tested it with these browsers: Internet Explorer 6 Internet Explorer 7 Latest Opera Latest Firefox Latest Safari And it shows up fine, and even passes validation. If there's another reason for not using !important, I would love to know.